javascript中的繼承

繼承有什麼好處？很簡單，繼承了你爸的財產，本身就能夠少奮鬥點嘛。開玩笑，言歸正傳，繼承使子類擁有超類的做用域、屬性與方法，能夠節省程序設計的時間。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屬性。

存在的問題：

1. 實例共享
   在上面的例子中加入如下代碼，發現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。

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

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

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的指向。

存在的問題：

1. 子類型沒法繼承超類原型鏈，致使全部類型都只能使用構造函數模式；
2. 方法都在構造函數中定義，函數沒法複用。

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

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);

• 將超類的原型對位基礎對象，而且傳遞給object()函數，返回新對象賦值給prototype；
• 將子類的原型指向prototype，即超類的原型，這裏繼承了超類的sayName方法
• 子類中利用構造方法使子類上建立了name和colors屬性

參考書籍：《javascript高級程序設計》

個人博客:http://bigdots.github.io、http://www.cnblogs.com/yzg1/

若是以爲本文不錯的話，幫忙點擊下面的推薦哦,謝謝！