一 原型繼承
function Parent(){
? ? this.color = 'red'
}
Parent.prototype.getName = function(){
? ? console.log(this.name)
}
function Child(){}
Child.prototype = new Parent();//將父類的實例賦給子類的原型
var child1 = new Child();
child1;
child1通過指針__proto__指向其原型對象(其原型對象又指向他的原型對象)撞芍,其原型對象分為兩部分悄雅,從構造函數(shù)中繼承的實例屬性color稽犁,和從原型對象中繼承的斟赚。
補充:原型對象的構造函數(shù)是函數(shù)本身绸贡,因此每個構造函數(shù)的prototype對象可以看做一個實例化對象。
優(yōu)點:可以繼承構造函數(shù)屬性砖第,也可繼承原型屬性绍移。
缺點:
1.首先屬性值為引用類型值的原型屬性被修改后可能會影響到所有的實例,而該種繼承方式中急凰,構造函數(shù)中的屬性會繼承到子類型女仰,成為子類的原型對象的屬性。(這也是為什么要在構造函數(shù)中定義屬性抡锈,在原型中定義公共方法)
2.在創(chuàng)建子類的實例時疾忍,不能向父類的構造函數(shù)中傳遞參數(shù)。
二.借用構造函數(shù)
function Parent(name){
? ? this.name = name;
? ? this.colors = ['red','green','pink'];
}
Parent.prototype.getName = function(){
? ? console.log(this.name)
}
function Child(){
? ? Parent.call(this,'Mary');//使用call()方法繼承父類構造函數(shù)中的屬性
? ? this.age = '18';
}
var child1 = new Child();
var child2 = new Child();
優(yōu)點:避免了原型繼承中的兩個缺點床三,可以向父類傳參一罩,且不會造成原型屬性共享的問題(因為父類構造函數(shù)中的屬性繼承到子類構造函數(shù)中,而非原型對象中)撇簿。
缺點:不能繼承原型屬性擒抛,無法實現(xiàn)函數(shù)復用推汽,所有方法都只能放在構造函數(shù)中。
三.組合繼承
functionSuperType(name){
this.name = name;
this.colors = ["red","blue","green"];
}
SuperType.prototype.sayName =function(){
alert(this.name);
}
functionSubType(name, age){
// 繼承屬性
SuperType.call(this, name);
this.age = age;
}
// 繼承方法
SubType.prototype =newSuperType();
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge =function(){
alert(this.age);
};
varinstance1 =newSubType("Nicholas",29);
instance1.colors.push("black");
alert(instance1.colors);//"red,blue,green,black"
instance1.sayName();//"Nicholas";
instance1.sayAge();//29
varinstance2 =newSubType("Greg",27);
alert(instance2.colors);//"red,blue,green"
instance2.sayName();//"Greg";
instance2.sayAge();//27
2.核心:把 實例函數(shù)放在原型對象上歧沪,以實現(xiàn)函數(shù)的復用。同時還要保留借用構造函數(shù)方式的優(yōu)點莲组,通過Super.call(this)诊胞;繼承父類的基本屬性和引用屬性并且能夠保留傳參的優(yōu)點,通過Sun.prototype = new Super();繼承父類函數(shù)锹杈,以實現(xiàn)函數(shù)復用?
優(yōu)缺點:?
優(yōu)點:?
1.不存在引用屬性共享的問題?
2.可傳遞參數(shù)?
3.函數(shù)可復用?
缺點:?
1.子類原型上有一份多余的父類實例屬性撵孤,因為父類構造函數(shù)被調用了兩次,生成了兩份竭望,而子類實例上的那一份屏蔽了子類原型上的(在代碼的注釋部分給予解釋)邪码,內存浪費
四.原型鏈繼承
function Person(){ } Person.prototype.hello = "hello"; Person.prototype.sayHello = function(){ alert(this.hello); }
? function Child(){? }
? Child.prototype = new Person();//這行的作用是:將Parent中將所有通過prototype追加的屬性和方法都追加到Child,從而實現(xiàn)了繼承?
?Child.prototype.world = "world";??
Child.prototype.sayWorld = function(){??
? alert(this.world);
? }?
? var c = new Child();? c.sayHello();? c.sayWorld();
優(yōu)點:簡單咬清,易于實現(xiàn)?
缺點:?
闭专。1.修改sub1.arr之后sub2.arr也發(fā)生了改變,因為來自原型對象的引用屬性是所有實例共享的?
可以這樣理解執(zhí)行過程:?
執(zhí)行sub1.arr.push(2)是先對sub1進行屬性查找旧烧,找遍實例屬性(在這個例子中未定義實例屬性),沒找到就順著原型鏈向上找影钉,找到了sub1的原型對象,發(fā)現(xiàn)arr屬性掘剪,于是在arr末尾插入2,所以sub2.arr也變了?
2.創(chuàng)建子類實例時平委,無法向父類構造函數(shù)傳參數(shù)
五.寄生式繼承
function beget(obj){
? var F = function(){};
? F.prototype = obj;
? return new F();
}
function Super(){
this.val = 1;
this.arr = [1];
}
function getSubObject(obj){
//創(chuàng)建新對象
var clone = beget(obj);//核心
clone.attr1 = 1;
clone.attr2 = 2;
return clone;
}
var sub= getSubObject(new Super());
console.log(sub.val);
console.log(sub.arr);
console.log(sub.arr1);
核心:?
給原型式繼承穿了個馬甲?
注意:beget函數(shù)不是必須的,創(chuàng)建對象-增強-返回該對象夺谁,這樣的過程叫做寄生式繼承廉赔,新的對象是如何創(chuàng)建的不重要?
優(yōu)缺點:?
優(yōu)點:1.不需要創(chuàng)建自定義類型?
缺點:1.無法實現(xiàn)函數(shù)的復用