摘要：構(gòu)造函數(shù)構(gòu)造操作符調(diào)用的函數(shù)就是構(gòu)造函數(shù)。其和其構(gòu)造函數(shù)的指向相同。而構(gòu)造函數(shù)屬性指向的對象帶有屬性，指向函數(shù)自身。，回歸構(gòu)造函數(shù)繼承，仔細(xì)看看誕生的嘻嘻和哈哈兩位同學(xué)可以看到兩個實例都擁有了和兩個屬性，因為方法的運行類似于執(zhí)行了和。

最近在看《JavaScript設(shè)計模式》，然后開篇復(fù)習(xí)了JavaScript中的幾種繼承方式，自己似乎也沒有怎么仔細(xì)探究過，目前自己沒怎么碰到過應(yīng)用的場景（噗），所以借這次機會好好來屢屢思路。

例子

function Person() {
    this.telephone = ["000-0000-0000"];
}

function Student(className) {
    this.className = className;
}

Student.prototype = new Person();
var Haha = new Student(1);
var Xixi = new Student(2);

創(chuàng)建好父類和子類。聯(lián)系他們的方式是把學(xué)生的prototype指向一個人的實例。

問：prototype是什么？
幾乎任何對象有一個[[prototype]]屬性，在標(biāo)準(zhǔn)中，[[prototype]]一個隱藏屬性，指向的是這個對象的原型。而它的指向是由構(gòu)造該對象的方法決定的：
1.對象字面量構(gòu)造：其[[prototype]]指向Object.prototype。

var person = {};

2.構(gòu)造函數(shù)構(gòu)造：new操作符調(diào)用的函數(shù)就是構(gòu)造函數(shù)。其[[prototype]]和其構(gòu)造函數(shù)的prototype指向相同。而構(gòu)造函數(shù)prototype屬性指向的對象帶有constructor屬性，指向函數(shù)自身。

function Person(){}
var person = new Person();

此圖為Person的prototype內(nèi)容，可以看到constructor屬性實際指向的就是Person()函數(shù)。（小綠色框框內(nèi)和外面綠色框框其實是同一個內(nèi)容）。

3.Object.create構(gòu)造的。

var person = {};
var Haha = Object.create(person);

這里對象Haha的[[prototype]]指向?qū)ο髉erson。也可以寫null，此時對象Haha就沒有原型。

首先要分清楚類和實例，在控制臺顯示中，只有類才會有prototype屬性，而實例是擁有一個名為_proto_的屬性，它會指向構(gòu)造它函數(shù)的原型，兩者本質(zhì)都是一個指針。

function Person() {
   this.telephone = ["000-0000-0000"];
}
var Hehe = new Person(); 
console.log(Person.prototype);
console.log(Hehe);

以上代碼運行結(jié)果：

可以瞧見，這里Hehe的_proto_是指向了Person.prototype。

問：new關(guān)鍵字的作用是什么？
new關(guān)鍵字運作的過程如下，引用自《JavaScript》高級程序設(shè)計：

1、創(chuàng)建一個空對象，并且 this 變量引用該對象，同時還繼承了該函數(shù)的原型。  2、屬性和方法被加入到 this 引用的對象中。 
3、新創(chuàng)建的對象由 this 所引用，并且最后隱式的返回 this。

簡單來說，它創(chuàng)建了一個空對象，指定了原型，把屬性方法進(jìn)行拷貝，并把this指向進(jìn)行了改變。假如我們把上面的代碼改成：

function Person() {
 this.telephone = ["000-0000-0000"];
}
        
var Hehe = Person();
console.log(Hehe.telephone);

去掉new關(guān)鍵詞賦予Person()，會報錯，而輸出window.telphone得到的就是["000-0000-0000"]。因為函數(shù)的返回值（沒有返回值所以是undefined）賦予給了Hehe，嘗試去讀取undefined的屬性，報錯了。而此時函數(shù)運行中的this是全局變量window。

So，回歸類式繼承，仔細(xì)看看誕生的嘻嘻和哈哈兩位同學(xué)

會發(fā)現(xiàn)，各自都有自己的班級名屬性，但是原型指向的是同一個Person實例，所以如果嘻嘻有兩個號碼，或者他要更改自己的號碼，那哈哈的電話號碼也會發(fā)生變化，他們只能共享這個電話號碼。

例子

function Person(name) {
    this.name = name;
}

Person.prototype.showName = function() {
    console.log(this.name);
}

function Student(name, className) {
    this.className = className;
    Person.call(this, name);
}
var Haha = new Student("Haha", 1);
var Xixi = new Student("Xixi", 2);

問：call函數(shù)的運作過程？
call函數(shù)和apply函數(shù)的作用相同，不同之處就是apply函數(shù)只能傳入2個參數(shù)，而call函數(shù)可以有多個。F.call(thisArg,[arg1……]) 函數(shù)的運作過程如下（來源網(wǎng)絡(luò)）：

1.先判斷F是否為一個函數(shù)，如果不是一個函數(shù)，那么將拋出TypeError異常。 
2.創(chuàng)建一個內(nèi)部類型空列表list 
3.然后如果參數(shù)除去thisArg外還有其他參數(shù)的話，就將這些值添加到list中 
4.thisArg和list作為F內(nèi)部屬性[[Call]]的參數(shù)傳入調(diào)用進(jìn)行函數(shù)的執(zhí)行操作

簡而言之就是它把一個函數(shù)的對象上下文改成了由 thisArg指定的新對象。

So，回歸構(gòu)造函數(shù)繼承，仔細(xì)看看誕生的嘻嘻和哈哈兩位同學(xué)

可以看到兩個實例都擁有了className和name兩個屬性，因為call方法的運行類似于執(zhí)行了Haha.name="Haha"和Xixi.name="Xixi"。
但是因為沒有與父類的原型相聯(lián)系，所以父類原型中的方法，不能得到繼承。運行Haha.showName()會得到報錯。

例子

function Person(name) {
    this.name = name;
}

Person.prototype.showName = function() {
    console.log(this.name);
}

function Student(name, className) {
    this.className = className;
    Person.call(this, name);
}
Student.prototype = new Person();
Student.prototype.showClassName = function() {
     console.log(this.className);
}

var Haha = new Student("Haha", 1);
var Xixi = new Student("Xixi", 2);

組合繼承綜合了類式繼承和構(gòu)造函數(shù)繼承，在把父類的屬性繼承后，把子類的原型指向了父類實例，這樣就可以繼承父類原型的方法了。
但是這里相當(dāng)于使用了兩次父類函數(shù)，并且子類不是父類的實例，子類的原型是父類的實例，所以還會有更好的方法。

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

var person = {
 name: "unknown",
 telephone: ["000-0000-0000"]
}

var Xixi = inheritObject(person);
Xixi.name = "Xixi";
Xixi.telephone.push("111-1111-1111");

var Haha = inheritObject(person);
Haha.name = "Haha";

仔細(xì)看看誕生的嘻嘻和哈哈兩位同學(xué)

這里.name給Xixi實例添加了一個自己的name屬性，而push操作是直接影響原型中引用變量，所以改進(jìn)之后又有了下面這種方式。
在這里我產(chǎn)生了一個疑問，為什么name屬性是自己添加新的，而telephone是采用原來的。于是添加了一個age屬性，執(zhí)行Xixi.age++操作。

這里可以看到實例重新添加了一個age屬性，所以我們可以說只要是改變原型屬性的值，就會把新的屬性加在實例上，引用不改變是因為引用的地址還沒有改變。

寄生式繼承是在原型繼承的基礎(chǔ)之上，我們需要再添加一下代碼：

function createPerson(obj) {
 var o = inheritObject(obj);
 o.getName = function(){
  console.log(name);
 }
 return o;
}

這樣就給得到的對象添加了公共方法。

寄生組合式繼承是為了彌補組合式繼承的缺點，是在寄生式繼承+構(gòu)造函數(shù)繼承組合而成的：

function inheritObject(o) {
 function F() {}
 F.prototype = o;
 return new F();
}
function inheritPrototype(subClass, superClass) {
 //復(fù)制一份父類原型
 var p = inheritObject(superClass.prototype);
 //修正重寫子類原型導(dǎo)致constructor屬性被修改
 p.constructor = subClass;
 //設(shè)置子類原型
 subClass.prototype = p;
}

function Person(name) {
    this.name = name;
}

Person.prototype.showName = function() {
    console.log(this.name);
}

function Student(name, className) {
    this.className = className;
    Person.call(this, name);
}

inheritPrototype(Student, Person);

Student.prototype.showClassName = function() {
     console.log(this.className);
}

var Xixi = new Student("Xixi",2);
var Haha = new Student("Haha",1);

以下為嘻嘻和哈哈的內(nèi)容：

可以對比一下組合式繼承的結(jié)果：

不同的地方在于把子類原型的構(gòu)造函數(shù)改成了實例對應(yīng)的構(gòu)造函數(shù)，在組合繼承中子類原型直屬并沒有constructor屬性。