摘要：舉例說(shuō)明組合繼承組合繼承利用原型鏈借用構(gòu)造函數(shù)的模式解決了原型鏈繼承和類(lèi)式繼承的問(wèn)題。示例組合式繼承是比較常用的一種繼承方法，其背后的思路是使用原型鏈實(shí)現(xiàn)對(duì)原型屬性和方法的繼承，而通過(guò)借用構(gòu)造函數(shù)來(lái)實(shí)現(xiàn)對(duì)實(shí)例屬性的繼承。

對(duì)js原型和繼承的理解一直處于“不懂-懂-不懂-懂-不懂。。?！钡臒o(wú)限循環(huán)之中，本來(lái)打算只是簡(jiǎn)單總結(jié)下js繼承方式，可看了些網(wǎng)上的資料后，發(fā)現(xiàn)又不懂繼承了。。。這篇文章只是一個(gè)閱讀筆記，總結(jié)了我所看到的js文章，參考見(jiàn)文末。

? ? ? ?Js所有的函數(shù)都有一個(gè)prototype屬性，這個(gè)屬性引用了一個(gè)對(duì)象，即原型對(duì)象，也簡(jiǎn)稱(chēng)原型。這個(gè)函數(shù)包括構(gòu)造函數(shù)和普通函數(shù)，我們講的更多是構(gòu)造函數(shù)的原型，但是也不能否定普通函數(shù)也有原型。譬如普通函數(shù)：

function F(){};
alert(F.prototype instanceof Object);//true

默認(rèn)情況下，原型對(duì)象也會(huì)獲得一個(gè)constructor屬性，該屬性包含一個(gè)指針，指向prototype屬性所在的函數(shù)

Person.prototype.constructor === Person

在面向?qū)ο蟮恼Z(yǔ)言中，我們使用類(lèi)來(lái)創(chuàng)建一個(gè)自定義對(duì)象。然而js中所有事物都是對(duì)象，那么用什么辦法來(lái)創(chuàng)建自定義對(duì)象呢？這就需要用到j(luò)s的原型：
我們可以簡(jiǎn)單的把prototype看做是一個(gè)模版，新創(chuàng)建的自定義對(duì)象都是這個(gè)模版（prototype）的一個(gè)拷貝 （實(shí)際上不是拷貝而是鏈接，只不過(guò)這種鏈接是不可見(jiàn)，新實(shí)例化的對(duì)象內(nèi)部有一個(gè)看不見(jiàn)的__Proto__指針，指向原型對(duì)象）。

_proto_是對(duì)[[propertyName]]屬性的實(shí)現(xiàn)（是只能對(duì)象可以擁有的屬性，并且是不可訪問(wèn)的內(nèi)部屬性），它指向?qū)ο蟮臉?gòu)造函數(shù)的原型對(duì)象。如下：

function Person(name) {
    this.name = name;
}
var p1 = new Person();
p1._proto_ === Person.prototype;//true

__proto__只是瀏覽器的私有實(shí)現(xiàn)，目前ECMAScript標(biāo)準(zhǔn)實(shí)現(xiàn)方法是Object.getPrototypeOf(object),如下：

function Person(name) {
    this.name = name;
}
var p1 = new Person();
Object.getPrototypeOf(p1) === Person.prototype;//true

? ? ? ?構(gòu)造函數(shù)，也即構(gòu)造對(duì)象。首先了解下通過(guò)構(gòu)造函數(shù)實(shí)例化對(duì)象的過(guò)程

function A(x){
     this.x=x;
}
var obj = new A(1);

實(shí)例化obj對(duì)象有三步：

(1).創(chuàng)建obj對(duì)象：obj=new Object();
(2).將obj的內(nèi)部__proto__指向構(gòu)造他的函數(shù)A的prototype，同時(shí)obj.constructor===A.prototype.constructor(這個(gè)是永遠(yuǎn)成立的，即使A.prototype不再指向原來(lái)的A原型，也就是說(shuō)：類(lèi)的實(shí)例對(duì)象的constructor屬性永遠(yuǎn)指向"構(gòu)造函數(shù)"的prototype.constructor),從而使得obj.constructor.prototype指向A.prototype（obj.constructor.prototype===A.prototype，當(dāng)A.prototype改變時(shí)則不成立，下文有遇到）obj.constructor.prototype與的內(nèi)部_proto_是兩碼事，實(shí)例化對(duì)象時(shí)用的是_proto_，obj是沒(méi)有prototype屬性的，但是有內(nèi)部的__proto__，通過(guò)__proto__來(lái)取得原型鏈上的原型屬性和原型方法，F(xiàn)ireFox公開(kāi)了__proto__，可以在FireFox中alert（obj.__proto__）；
(3).將obj作為this去調(diào)用構(gòu)造函數(shù)A，從而設(shè)置成員（即對(duì)象屬性和對(duì)象方法）并初始化。

當(dāng)這3步完成，這個(gè)obj對(duì)象就與構(gòu)造函數(shù)A再無(wú)聯(lián)系，這個(gè)時(shí)候即使構(gòu)造函數(shù)A再加任何成員，都不再影響已經(jīng)實(shí)例化的obj對(duì)象了。此時(shí)，obj對(duì)象具有了x屬性，同時(shí)具有了構(gòu)造函數(shù)A的原型對(duì)象的所有成員，當(dāng)然，此時(shí)該原型對(duì)象是沒(méi)有成員的。

原型對(duì)象初始是空的，也就是沒(méi)有一個(gè)成員（即原型屬性和原型方法）。可以通過(guò)如下方法驗(yàn)證原型對(duì)象具有多少成員。

function A(x){
    this.x=x;
}

var num = 0;
for(o in A.prototype){
    alert(o);// alert 原型屬性名字
    num++;
} 
alert(num);//0

但是，一旦定義了原型屬性或原型方法，則所有通過(guò)該構(gòu)造函數(shù)實(shí)例化出來(lái)的所有對(duì)象，都繼承了這些原型屬性和原型方法，這是通過(guò)內(nèi)部的_proto_鏈來(lái)實(shí)現(xiàn)的。

例如：

A.prototype.say=function(){alert("haha");}

那所有的A的對(duì)象都具有了say方法，這個(gè)原型對(duì)象的say方法是唯一的副本給大家共享的，而不是每一個(gè)對(duì)象都有關(guān)于say方法的一個(gè)副本。

由于js不像java那樣是真正面向?qū)ο蟮恼Z(yǔ)言，js是基于對(duì)象的，它沒(méi)有類(lèi)的概念。所以，要想實(shí)現(xiàn)繼承，可以通過(guò)構(gòu)造函數(shù)和原型的方式模擬實(shí)現(xiàn)類(lèi)的功能。

js里常用的如下兩種繼承方式：

    原型鏈繼承（對(duì)象間的繼承）
    類(lèi)式繼承（構(gòu)造函數(shù)間的繼承）   

以下通過(guò)實(shí)例詳細(xì)介紹這兩種繼承方式的原理

類(lèi)式繼承是在子類(lèi)型構(gòu)造函數(shù)的內(nèi)部調(diào)用超類(lèi)型的構(gòu)造函數(shù)。

1    function A(x){
2        this.x = x;
3    }
4    function B(x,y){
5        this.tempObj = A;
6        this.tempObj(x);
7        delete this.tempObj;
8        this.y=y;
9    }

解釋：
? ? ? ?第5、6、7行：創(chuàng)建臨時(shí)屬性tmpObj引用構(gòu)造函數(shù)A，然后在B內(nèi)部執(zhí)行（注意，這里執(zhí)行函數(shù)的時(shí)候并沒(méi)有用new），執(zhí)行完后刪除。當(dāng)在B內(nèi)部執(zhí)行了this.x=x后（這里的this是B的對(duì)象），B當(dāng)然就擁有了x屬性，當(dāng)然B的x屬性和A的x屬性兩者是獨(dú)立，所以并不能算嚴(yán)格的繼承。第5、6、7行有更簡(jiǎn)單的實(shí)現(xiàn)，就是通過(guò)call(apply)方法：A.call(this,x);
? ? ? ?這兩種方法都有將this傳遞到A的執(zhí)行里，this指向的是B的對(duì)象，這就是為什么不直接A(x)的原因。這種繼承方式即是類(lèi)繼承（js沒(méi)有類(lèi)，這里只是指構(gòu)造函數(shù)），雖然繼承了A構(gòu)造對(duì)象的所有屬性方法，但是不能繼承A的原型對(duì)象的成員。而要實(shí)現(xiàn)這個(gè)目的，就是在此基礎(chǔ)上再添加原型繼承。

原型式繼承是借助已有的對(duì)象創(chuàng)建新的對(duì)象，將子類(lèi)的原型指向父類(lèi)，就相當(dāng)于加入了父類(lèi)這條原型鏈。

1    function A(x){
2        this.x = x;
3    }
4    A.prototype.a = "a";
5    function B(x,y){
6        A.call(this,x);
7        this.y = y;
8    }
9    B.prototype.b1 = function(){
10        alert("b1");
11    }
12   B.prototype = new A();
13   B.prototype.b2 = function(){
14        alert("b2");
15    }
16   B.prototype.constructor = B;
17   var obj = new B(1,3);

解釋：
? ? ? ?這個(gè)例子講的就是B繼承A。第7行類(lèi)繼承：A.call(this.x);上面已講過(guò)。實(shí)現(xiàn)原型繼承的是第12行：B.prototype = new A();
? ? ? ?就是說(shuō)把B的原型指向了A的1個(gè)實(shí)例對(duì)象，這個(gè)實(shí)例對(duì)象具有x屬性，為undefined，還具有a屬性，值為"a"。所以B原型也具有了這2個(gè)屬性（或者說(shuō)，B和A建立了原型鏈，B是A的下級(jí)）。而因?yàn)榉讲诺念?lèi)繼承，B的實(shí)例對(duì)象也具有了x屬性，也就是說(shuō)obj對(duì)象有2個(gè)同名的x屬性，此時(shí)原型屬性x要讓位于實(shí)例對(duì)象屬性x，所以obj.x是1，而非undefined。第13行又定義了原型方法b2，所以B原型也具有了b2。雖然第9~11行設(shè)置了原型方法b1，但是你會(huì)發(fā)現(xiàn)第12行執(zhí)行后，B原型不再具有b1方法，也就是obj.b1是undefined。因?yàn)榈?2行使得B原型指向改變，原來(lái)具有b1的原型對(duì)象被拋棄，自然就沒(méi)有b1了。
? ? ? ?第12行執(zhí)行完后，B原型（B.prototype）指向了A的實(shí)例對(duì)象，而A的實(shí)例對(duì)象的構(gòu)造器是構(gòu)造函數(shù)A，所以B.prototype.constructor就是構(gòu)造對(duì)象A了（換句話說(shuō)，A構(gòu)造了B的原型）。alert(B.prototype.constructor)出來(lái)后就是"function A(x){...}" 。同樣地，obj.constructor也是A構(gòu)造對(duì)象，alert(obj.constructor)出來(lái)后就是"function A(x){...}" ，也就是說(shuō)B.prototype.constructor===obj.constructor（true），但是B.prototype===obj.constructor.prototype（false），因?yàn)榍罢呤荁的原型，具有成員：x,a,b2，后者是A的原型，具有成員：a。如何修正這個(gè)問(wèn)題呢，就在第16行，將B原型的構(gòu)造器重新指向了B構(gòu)造函數(shù)，那么B.prototype===obj.constructor.prototype（true），都具有成員：x,a,b2。
? ? ? ?如果沒(méi)有第16行，那是不是obj = new B(1,3)會(huì)去調(diào)用A構(gòu)造函數(shù)實(shí)例化呢？答案是否定的，你會(huì)發(fā)現(xiàn)obj.y=3，所以仍然是調(diào)用的B構(gòu)造函數(shù)實(shí)例化的。雖然obj.constructor===A(true)，但是對(duì)于new B()的行為來(lái)說(shuō)，執(zhí)行了上面所說(shuō)的通過(guò)構(gòu)造函數(shù)創(chuàng)建實(shí)例對(duì)象的3個(gè)步驟，第一步，創(chuàng)建空對(duì)象；第二步，obj.__proto__ === B.prototype，B.prototype是具有x,a,b2成員的，obj.constructor指向了B.prototype.constructor，即構(gòu)造函數(shù)A；第三步，調(diào)用的構(gòu)造函數(shù)B去設(shè)置和初始化成員，具有了屬性x,y。雖然不加16行不影響obj的屬性，但如上一段說(shuō)，卻影響obj.constructor和obj.constructor.prototype。所以在使用了原型繼承后，要進(jìn)行修正的操作。
? ? ? ?關(guān)于第12、16行，總言之，第12行使得B原型繼承了A的原型對(duì)象的所有成員，但是也使得B的實(shí)例對(duì)象的構(gòu)造器的原型指向了A原型，所以要通過(guò)第16行修正這個(gè)缺陷。

為了讓子類(lèi)繼承父類(lèi)的屬性（也包括方法），首先需要定義一個(gè)構(gòu)造函數(shù)。然后，將父類(lèi)的新實(shí)例賦值給構(gòu)造函數(shù)的原型。

function Parent(){
    this.name = "mike";
}

function Child(){
    this.age = 12;
}
Child.prototype = new Parent();//Child繼承Parent，通過(guò)原型，形成鏈條

var test = new Child();
alert(test.age);
alert(test.name);//得到被繼承的屬性
//繼續(xù)原型鏈繼承
function Brother(){   //brother構(gòu)造
    this.weight = 60;
}
Brother.prototype = new Child();//繼續(xù)原型鏈繼承
var brother = new Brother();
alert(brother.name);//繼承了Parent和Child,彈出mike
alert(brother.age);//彈出12

以上原型鏈繼承還缺少一環(huán)，那就是Object，所有的構(gòu)造函數(shù)都繼承自O(shè)bject。而繼承Object是自動(dòng)完成的，并不需要我們自己手動(dòng)繼承，那么他們的從屬關(guān)系可以使用操作符instanceof和函數(shù)isPrototypeOf()判斷，如下：

alert(test instanceof Parent);//true
alert(test instanceof Child);//true
alert(brother instanceof Parent);//true
alert(brother instanceof Child);//true

alert(Parent.prototype.isPrototypeOf(test));//true
alert(Child.prototype.isPrototypeOf(test));//true
alert(Parent.prototype.isPrototypeOf(brother));//true
alert(Child.prototype.isPrototypeof(brother));//true

問(wèn)題字面量重寫(xiě)原型會(huì)中斷關(guān)系，使用引用類(lèi)型的原型，并且子類(lèi)型還無(wú)法給超類(lèi)型傳遞參數(shù)。

偽類(lèi)解決引用共享和超類(lèi)型無(wú)法傳參的問(wèn)題，我們可以采用“借用構(gòu)造函數(shù)”技術(shù)

示例1

function Parent(firstname)
{
    this.fname=firstname;
    this.age=40;
    this.sayAge=function()
    {
        console.log(this.age);
    }
}
function Child(firstname)
{
    this.parent=Parent;
    this.parent(firstname);
    delete this.parent;//以上三行也可以用call和apply函數(shù)改寫(xiě)
    this.saySomeThing=function()
    {
        console.log(this.fname);
        this.sayAge();
    }
}
var mychild=new  Child("李");
mychild.saySomeThing();

示例2：用call函數(shù)實(shí)現(xiàn)

function Parent(firstname)
{
    this.fname=firstname;
    this.age=40;
    this.sayAge=function()
    {
        console.log(this.age);
    }
}
function Child(firstname)
{

    this.saySomeThing=function()
    {
        console.log(this.fname);
        this.sayAge();
    }
   this.getName=function()
   {
       return firstname;
   }

}
var child=new Child("張");
Parent.call(child,child.getName());
child.saySomeThing();

示例3：用apply函數(shù)實(shí)現(xiàn)

function Parent(firstname)
{
    this.fname=firstname;
    this.age=40;
    this.sayAge=function()
    {
        console.log(this.age);
    }
}
function Child(firstname)
{

    this.saySomeThing=function()
    {
        console.log(this.fname);
        this.sayAge();
    }
    this.getName=function()
    {
        return firstname;
    }

}
var child=new Child("張");
Parent.apply(child,[child.getName()]);
child.saySomeThing();

問(wèn)題：類(lèi)式繼承沒(méi)有原型，子類(lèi)型只是繼承了父類(lèi)型構(gòu)造對(duì)象的屬性和方法，沒(méi)有繼承父類(lèi)型原型對(duì)象的成員。

舉例說(shuō)明：

function Father(x){
    this.x=x;
}

Father.prototype.say = function(){
    alert(this.x);
}

function Child(x,y){
    this.y=y;
    this.tempObj=Father;
    this.tempObj(x);
    delete this.tempObj;
}

var obj = new Child(1,2);
alert(obj.x);//1
alert(obj.y);//2
alert(obj.say);//undefined

組合繼承利用原型鏈+借用構(gòu)造函數(shù)的模式解決了原型鏈繼承和類(lèi)式繼承的問(wèn)題。
示例

function Parent(age){
    this.name = ["mike","jack","smith"];
    this.age = age;
}
Parent.prototype.say = function(){
    return this.name + "are both" + this.age;
}
function Child(age){
    Parent.call(this,age);
}
Child.prototype = new Parent();
var test = new Child(1);
alert(test.say());

組合式繼承是比較常用的一種繼承方法，其背后的思路是 使用原型鏈實(shí)現(xiàn)對(duì)原型屬性和方法的繼承，而通過(guò)借用構(gòu)造函數(shù)來(lái)實(shí)現(xiàn)對(duì)實(shí)例屬性的繼承。這樣，既通過(guò)在原型上定義方法實(shí)現(xiàn)了函數(shù)復(fù)用，又保證每個(gè)實(shí)例都有它自己的屬性。

問(wèn)題：組合繼承的父類(lèi)型在使用過(guò)程中會(huì)被調(diào)用兩次；一次是創(chuàng)建子類(lèi)型的時(shí)候，另一次是在子類(lèi)型構(gòu)造函數(shù)的內(nèi)部。
舉例說(shuō)明如下：

    function Parent(name){
        this.name = name;
        this.arr = ["哥哥","妹妹","父母"];
    }

    Parent.prototype.run = function () {
        return this.name;
    };

    function Child(name,age){
        Parent.call(this,age);//第二次調(diào)用
        this.age = age;
    }

    Child.prototype = new Parent();//第一次調(diào)用

這兩次調(diào)用一次是通過(guò)類(lèi)式繼承實(shí)現(xiàn)的，另一次是通過(guò)原型鏈繼承實(shí)現(xiàn)的，在上面原型鏈繼承詳解中有介紹?？梢杂孟旅娼榻B的寄生組合繼承解決該問(wèn)題。

這種繼承借助原型并基于已有的對(duì)象創(chuàng)建新對(duì)象。

1    function obj(o){
2        function F(){}
3        F.prototype = o;
4        return new F();
5    }
6     var person = {
7        name : "ss",
8        arr : ["hh","kk","ll"]
9    }

10    var b1 = obj(person);
11    alert(b1.name);//ss
12    b1.name = "join";
13    alert(b1.name);//join

14    alert(b1.arr);//hh,kk,ll
15    b1.arr.push("gg");
16    alert(b1.arr);//hh,kk,ll,gg

17    var b2 = obj(person);
18    alert(b2.name);//ss
19    alert(b2.arr);//hh,kk,ll,gg

疑問(wèn)：(求解答)
這里的b1和b2會(huì)共享原型對(duì)象person的屬性，那么在12行通過(guò)b1.name="join"修改了原型對(duì)象person的name屬性后，為什么并沒(méi)有影響到b2.name,在18行仍然輸出ss???
而在15行通過(guò)b1.arr.push("gg")修改了原型對(duì)象person的arr屬性后,卻影響到了b2.arr,在19行的輸出多了gg

這種繼承方式是把原型式+工廠模式結(jié)合起來(lái)，目的是為了封裝創(chuàng)建的過(guò)程。

function obj(o){
    function F(){}
    F.prototype = o;
    return new F()
}

function create(o){
    var f = obj(o);
    f.say = function() {
        return this.arr
    }
    return f
}

寄生組合繼承解決了組合繼承中父類(lèi)型兩次調(diào)用問(wèn)題

function obj(o){
    function F(){}
    F.prototype = o;
    return new F()
}

function create(parent,child){//通過(guò)這個(gè)函數(shù)，實(shí)現(xiàn)了原型鏈繼承，但child只含有parent原型鏈中的屬性
    var f = obj(parent.prototype);
    f.constructor = child;
    child.prototype = f;
}

function Parent(name){
    this.name = name;
    this.arr = ["heheh","guagua","jiji"];
}

Parent.prototype.say = function(){
    return this.name
}

function Child(name,age){
    Parent.call(this,name);//類(lèi)式繼承，這里繼承parent構(gòu)造函數(shù)中定義的屬性
    this.age = age;
}

create(Parent,Child);

var test = new Child("trigkit4",21);
test.arr.push("nephew");
alert(test.arr);//
alert(test.run());//只共享了方法
var test2 = new Child("jack",22);
alert(test2.arr);//引用問(wèn)題解決

1.js實(shí)現(xiàn)繼承的5中方式
2.ES6 Class
3.js繼承方式詳解
4.前段開(kāi)發(fā)必須知道的js(一)原型和繼承
5.細(xì)說(shuō) Javascript 對(duì)象篇（二） : 原型對(duì)象
6.javascript原型概念（一）
7.Javascript基于 ‘__proto__’ 的原型鏈