說明
面向?qū)ο蟮娜齻€基本特征是：封裝、繼承、多態(tài)。
call函數(shù)：預(yù)定義的JAVAScript方法，用來調(diào)用所有者對象作為參數(shù)的方法。
上節(jié)內(nèi)容：面向?qū)ο螅悺ο蟆傩浴⒎椒ǎo態(tài)屬性和方法，原型、原型鏈（prototype chain）。
JavaScript作為面向?qū)ο蟮娜躅愋驼Z言，繼承也是其非常強(qiáng)大的特性之一，繼承的3種方式：對象冒充實現(xiàn)繼承、原型鏈實現(xiàn)繼承、原型鏈+對象冒充實現(xiàn)繼承。
案例代碼
對象冒充實現(xiàn)繼承
特點：可以繼承構(gòu)造函數(shù)中的屬性及方法，沒法繼承原型鏈上的屬性及方法。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width;initial-scale=1.0;maximum-scale=1;user-scalable=no">
<script type="text/javascript">
// ====================================================================//
// ES5中的繼承
// ====================================================================//
function Person(){
// 屬性
this.name="石崇";
this.age = 20;
// 方法
this.run=function(){
alert(this.name + "，在走路~");
}
}
// 原型鏈上增加屬性和方法
Person.prototype.sex = "男";
Person.prototype.strategy=function(){
alert(this.name + "|" + this.sex + "|" + this.age + "，的謀略~");
};
// 靜態(tài)屬性
Person.info="人";
Person.toString=function(){
return "這里是靜態(tài)方法";
}
// ====================================================================//
// 繼承自Person 原型鏈+對象冒充的組合繼承方式
// ====================================================================//
function User(){
// 對象冒充實現(xiàn)繼承
Person.call(this);
}
let user1 = new User();
// 對象冒充實現(xiàn)繼承，可以繼承構(gòu)造函數(shù)中的屬性及方法
user1.run();
// 對象冒充實現(xiàn)繼承，沒法繼承原型鏈上的屬性及方法
// user1.strategy(); // Uncaught TypeError: user1.strategy is not a function
// ====================================================================//
// 繼承自Person 原型鏈實現(xiàn)繼承
// ====================================================================//
function Manager(){
}
// 原型鏈實現(xiàn)繼承
Manager.prototype = new Person();
//
let manager1 = new Manager();
// 既可以繼承構(gòu)造函數(shù)中的屬性及方法又可以繼承原型鏈上的屬性及方法
manager1.run();
manager1.strategy();
</script>
</head>
<body>
</body>
</html>
原型鏈實現(xiàn)繼承
特點：繼承的類的構(gòu)造函數(shù)無法傳值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width;initial-scale=1.0;maximum-scale=1;user-scalable=no">
<script type="text/javascript">
// ====================================================================//
//
function Person(name,age){
// 屬性
this.name= name;
this.age = age;
// 方法
this.run=function(){
alert(this.name + "，在走路~");
}
}
// 原型鏈上增加屬性和方法
Person.prototype.sex = "男";
Person.prototype.strategy=function(){
alert(this.name + "|" + this.sex + "|" + this.age + "，的謀略~");
};
// 靜態(tài)屬性
Person.info="人";
Person.toString=function(){
return "這里是靜態(tài)方法";
}
// 原型鏈實現(xiàn)繼承
function Manager(){
}
// 原型鏈實現(xiàn)繼承
Manager.prototype = new Person();
// 實例化子類時沒法給父類傳參
let manager1 = new Manager("彭祖",400);
manager1.run();
manager1.strategy();
// 實例化子類時沒法給父類傳參
let manager2 = new Manager("顏回",14);
manager2.run();
manager2.strategy();
</script>
</head>
<body>
</body>
</html>
原型鏈+對象冒充實現(xiàn)繼承
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width;initial-scale=1.0;maximum-scale=1;user-scalable=no">
<script type="text/javascript">
// ====================================================================//
// 原型鏈+構(gòu)造函數(shù)的組合繼承模式
// ====================================================================//
function Person(name,age){
// 屬性
this.name= name;
this.age = age;
// 方法
this.run=function(){
alert(this.name + "，在走路~");
}
}
// 原型鏈上增加屬性和方法
Person.prototype.sex = "男";
Person.prototype.strategy=function(){
alert(this.name + "|" + this.sex + "|" + this.age + "，的謀略~");
};
// 靜態(tài)屬性
Person.info="人";
Person.toString=function(){
return "這里是靜態(tài)方法";
}
// 原型鏈實現(xiàn)繼承
function Manager(name,age){
Person.call(this,name,age);
}
// ========================================//
// 原型鏈實現(xiàn)繼承
// Manager.prototype = new Person();
// 或者
Manager.prototype = Person.prototype;
// ========================================//
// 實例化子類時沒法給父類傳參
let manager1 = new Manager("彭祖",400);
manager1.run();
manager1.strategy();
// 實例化子類時沒法給父類傳參
let manager2 = new Manager("顏回",14);
manager2.run();
manager2.strategy();
</script>
</head>
<body>
</body>
</html>
