javascript中的繼承_ZenDei技術網路在線

我的博客: "http://bigdots.github.io" 、 "http://www.cnblogs.com/yzg1/" 繼承有什麼好處？很簡單，繼承了你爸的財產，自己就可以少奮鬥點嘛。開玩笑，言歸正傳，繼承使子類擁有超類的作用域、屬性與方法，可以節省程式設計的時間。ECMAScript實

我的博客:http://bigdots.github.io、http://www.cnblogs.com/yzg1/

繼承有什麼好處？很簡單，繼承了你爸的財產，自己就可以少奮鬥點嘛。開玩笑，言歸正傳，繼承使子類擁有超類的作用域、屬性與方法，可以節省程式設計的時間。ECMAScript實現繼承主要方式是依靠原型鏈。

原型鏈方式——不建議使用

function SuperType(){
    this.colors = ["red", "blue", "green"];
}
function SubType(){
}
//利用原型鏈繼承
SubType.prototype = new SuperType();
var instance1 = new SubType();
console.log(instance1.colors) //["red", "blue", "green"]

上例中，通過SubType.prototype = new SuperType()使SubType的原型鏈上增加了SuperType()這一環。從而使SubType 通過原型鏈繼承了SuperType的color屬性。

存在的問題：

實例共用
在上面的例子中加入以下代碼，發現SubType()的實例1對color屬性做出改變後，實例2獲取到的color屬性是改變後的值。這是因為：

每個構造函數都有一個原型對象，原型對象都包含一個指向構造函數的指針，而實例都包含一個指向原型對象的內部指針。
```
instance1.colors.push("black");
console.log(instance1.colors); //["red", "blue", "green", "black", "black"]
var instance2 = new SubType();
console.log(instance2.colors);//["red", "blue", "green", "black", "black"]
```

首先，instance1和instance2都是SubType()的實例，這倆個實例都會包含一個指向原型對象的內部指針
SubType()的原型指向SuperType()的一個實例，而且這個實例指向的是SuperType()的原型對象
SuperType()的原型對象又指向SuperType()。最終，instance1.colors和instance2.colors的指向都是SuperType()的colors。

沒有辦法在不影響所有對象實例的情況下，給超類型的構造函數傳遞參數，原理同上。

構造函數方式——不建議使用

function SuperType(){
    this.colors = ["red", "blue", "green"];
}
function SubType(){
    //繼承了SuperType
    SuperType.call(this);
}
var instance1 = new SubType();
console.log(instance1.color)//["red", "blue", "green"]

基本思想即在子類型構造函數的內部調用超類型構造函數。

call和apply
全局函數apply和call可以用來改變函數中this的指向。

存在的問題：

子類型無法繼承超類原型鏈，導致所有類型都只能使用構造函數模式；
方法都在構造函數中定義，函數無法復用。

組合繼承——最常用的繼承模式

function SuperType(name){
    this.name = name;
    this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function(){
    console.log(this.name);
};
function SubType(name, age){
    //繼承屬性
    SuperType.call(this, name);   //第二次調用SuperType()
    this.age = age;
}
//繼承方法
SubType.prototype = new SuperType(); //第一次調用SuperType()
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function(){
    console.log(this.age);
};
var instance1 = new SubType("Nicholas", 29);
instance1.colors.push("black");
console.log(instance1.colors); //"red,blue,green,black"
instance1.sayName(); //"Nicholas";
instance1.sayAge(); //29
var instance2 = new SubType("Greg", 27);
console.log(instance2.colors); //"red,blue,green"
instance2.sayName(); //"Greg";
instance2.sayAge();

基本思想：

通過原型鏈來繼承超類的sayName()方法；
通過構造函數的方式來使SuperType()里的屬性私有化；

為什麼可以實現屬性私有化？

第一次調用超類，SubType.prototype 會得到兩個屬性：name 和colors；它們都是SuperType 的實例屬性，位於SubType 的原型中；
第二次調用超類，在新對象上創建了實例屬性name 和colors。於是，這兩個屬性就屏蔽了原型中的兩個同名屬性；

存在的問題：
無論什麼情況下，都會調用兩次超類型構造函數:：一次是在創建子類型原型的時候，另一次是在子類型構造函數內部

原型式繼承

function object(o){
    function F(){}
    F.prototype = o;
    return new F();
}
var person = {
    name: "Nicholas",
    friends: ["Shelby", "Court", "Van"]
};
var anotherPerson = Object.create(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob");
var yetAnotherPerson = Object.create(person);
yetAnotherPerson.name = "Linda";
yetAnotherPerson.friends.push("Barbie");
console.log(person.friends); //["Shelby", "Court", "Van", "Rob", "Barbie"]

ECMAScript 5 通過新增Object.create()方法規範化了原型式繼承。這個方法接收兩個參數：一個用作新對象原型的對象和（可選的）一個為新對象定義額外屬性的對象

將person對象作為基礎對象
把person對象傳入到object()函數中，然後該函數就會返回一個新對象F()，這個新對象將person 作為原型
適用於讓一個對象與另一個對象保持類似的情況

存在同原型鏈方式一樣的問題

寄生式基礎

function object(o){
    function F(){}
    F.prototype = o;
    return new F();
}
function createAnother(original){
    var clone = object(original); //通過調用函數創建一個新對象
    clone.sayHi = function(){ //以某種方式來增強這個對象
    console.log("hi");
};
return clone; //返回這個對象
}
var person = {
    name: "Nicholas",
    friends: ["Shelby", "Court", "Van"]
};
var anotherPerson = createAnother(person);
anotherPerson.sayHi(); //"hi"

將person對象作為基礎對象
將基礎對象傳遞給object()函數，將返回的新對象賦值給clone；（示範繼承模式時使用的object()函數不是必需的；任何能夠返回新對象的函數都適用於此模式。）
為clone 對象添加一個新方法sayHi()，最後返回clone 對象

寄生組合式繼承——被認為是引用類型最理想的繼承範式

function object(o){
    function F(){}
    F.prototype = o;
    return new F();
}
function inheritPrototype(subType, superType){
    var prototype = object(superType.prototype); //創建對象
    prototype.constructor = subType; //增強對象
    subType.prototype = prototype; //指定對象
}

function SuperType(name){
    this.name = name;
    this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function(){
    console.log(this.name);
};
function SubType(name, age){
    SuperType.call(this, name); //調用一次SuperType()
    this.age = age;
}
inheritPrototype(SubType, SuperType);
SubType.prototype.sayAge = function(){
    console.log(this.age);
};

var instance1 = new SubType("Nicholas", 29);
instance1.sayName();
console.log(instance1.colors);