摘要：之二關(guān)于原型開篇我記得初學(xué)時(shí)，最難懂的概念就是的原型，而且這個(gè)概念在筆試面試中常常提到，因此今天我們把這個(gè)概念拿出來(lái)，好好聊一聊。

我記得初學(xué)js時(shí)，最難懂的概念就是js的原型，而且這個(gè)概念在筆試面試中常常提到，
因此今天我們把這個(gè)概念拿出來(lái)，好好聊一聊。

在仔細(xì)講解之前，我們先來(lái)看一道題，這道題來(lái)自JavaScript高級(jí)程序設(shè)計(jì)中原型鏈那一節(jié)：

function SuperType(){
    this.property = true;
}

SuperType.prototype.getSuperValue = function(){
    return this.property;
};

function SubType(){
    this.subproperty = false;
}

SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function (){
    return this.subproperty;
};

var instance = new SubType();
alert(instance.getSuperValue());

請(qǐng)大家猜一猜最后alert出的結(jié)果是什么？

大家先思考一下再看下面的內(nèi)容。

如果上面的題沒(méi)解出來(lái)，也不要灰心喪氣，因?yàn)橛锌赡苡械娜私獬鰜?lái)的結(jié)果也不一定對(duì)。
要想弄明白原型等一系列概念，其實(shí)只需要記住這幾個(gè)知識(shí)點(diǎn)。

_proto_:任何一個(gè)對(duì)象Object都有_proto_，它是每一個(gè)對(duì)象的私有屬性，是天生自帶的。
prototype:不是任何對(duì)象都有prototype，只有構(gòu)造函數(shù)有prototype，是后天賦予的。

其實(shí)只需要記住一句話：調(diào)用一個(gè)對(duì)象的屬性或方法，一但這個(gè)對(duì)象中沒(méi)有，就去這個(gè)對(duì)象的_proto_中查找。這個(gè)對(duì)象的_proto_指向自己構(gòu)造函數(shù)的prototype屬性
然后我們來(lái)看一張圖：

再來(lái)看一個(gè)例子：

var Person = function () {
    this.sleep = "Zzzzz..."
}
Person.prototype.sayHello = function () {
    console.log("hello world");
}
var zhangsan = new Person();
zhangsan.sayHello();

其實(shí)zhangsan這個(gè)對(duì)象下面只有一個(gè)sleep屬性，是沒(méi)有sayHello方法的。
但是通過(guò)原型鏈查找會(huì)查zhangsan._proto_也就是查找它的構(gòu)造函數(shù)的Person.prototype，Person.prototype下有sayHello這個(gè)方法，所以會(huì)在控制臺(tái)輸出hello world
所以啦，萬(wàn)變不離其宗！

除了最新的ES6外，js其實(shí)是沒(méi)有繼承和類的概念的，因此想要達(dá)到j(luò)s的繼承就要通過(guò)模擬的方式。
這里將主要介紹三種繼承的方式：純?cè)玩溊^承，借用構(gòu)造函數(shù)繼承，組合繼承

多說(shuō)無(wú)益，來(lái)個(gè)簡(jiǎn)單暴力直接的方式，直接上代碼：

function Father() {
    this.likeFood= ["牛排","餃子","啤酒","可樂(lè)"]
}
Father.prototype.saylikeFood = function () {
    console.log(this.likeFood);  
};

function Son() {
}
Son.prototype = new Father();

var zhangsan = new Son();
zhangsan.likeFood.push("西瓜");
zhangsan.saylikeFood(); // ["牛排", "餃子", "啤酒", "可樂(lè)", "西瓜"]

Ok，這就是純?cè)玩湹睦^承方式，其實(shí)說(shuō)白了就是把繼承的對(duì)象的prototype等于繼承自構(gòu)造函數(shù)的實(shí)例。
但是這樣的方式有問(wèn)題。接著上面的代碼的后面我們?cè)賹懀?/p>

var lisi = new Son();
lisi.saylikeFood(); // ["牛排", "餃子", "啤酒", "可樂(lè)", "西瓜"]

看出問(wèn)題了吧，zhangsan直接修改了其構(gòu)造函數(shù)的likeFood，
導(dǎo)致我們?cè)賹?shí)例的對(duì)象也收到了修改的影響，
因此這種繼承方式有缺陷

還是多說(shuō)無(wú)益，我們直接來(lái)看例子，上代碼：

function Father(name) {
    this.name = name;
    this.sayName = function () {
        console.log(this.name);
    }
}

function Son(name, age) {
    Father.call(this, name);
    this.age = age;
}

var zhangsan = new Son("zhangsan", 17);

這種繼承方式并沒(méi)有利用到原型以及原型鏈的概念，它主要利用call的特性，call的第一個(gè)參數(shù)傳入this，后面的參數(shù)傳入函數(shù)所需的參數(shù)。
這種方式歸根結(jié)底其實(shí)就是在實(shí)例一個(gè)對(duì)象的時(shí)候，向這個(gè)對(duì)象的上面添加所需的屬性和方法。
不信的話可以輸出zhangsan看一下

但是其實(shí)這種方式也有問(wèn)題，什么問(wèn)題呢？
按照這種方式，每次new一個(gè)對(duì)象，就是實(shí)例化一個(gè)對(duì)象，都會(huì)向這個(gè)對(duì)象身上添加一堆屬性和方法。
添加屬性是沒(méi)問(wèn)題的，但是每次在對(duì)象身上添加的方法，這個(gè)函數(shù)就要重寫一次。
函數(shù)不能進(jìn)行復(fù)用，這就是最大的問(wèn)題！

這次要多說(shuō)兩句，組合繼承其實(shí)分別是擁有以上兩種方法的優(yōu)點(diǎn)，同時(shí)也規(guī)避了以上兩種方法的缺點(diǎn)。
這種方法的應(yīng)用是最廣泛的，是最普遍的，舉個(gè)栗子來(lái)看一下：

function Father(name) {
    this.name = name;
}
Farther.prototype.sayName = function () {
    console.log(this.name);
}

function Son(name, age) {
    Farther.call(this, name);
    this.age = age;
}

Son.prototype = new Father();
Son.constructor = Son;
Son.prototype.sayage = function () {
    console.log(this.age);
}

var zhangsan = new Son();

來(lái)看一下，這種方式不錯(cuò)吧！
其實(shí)除了組合繼承外，還有兩種繼承方式：原型式繼承和寄生式繼承，
這兩種方式感興趣的同學(xué)可以自行了解一下

抱歉，這篇這么遲才出來(lái)，其實(shí)應(yīng)該早早完事的。
我最近買了一本《學(xué)習(xí)JavaScript數(shù)據(jù)結(jié)構(gòu)與算法》再看，我準(zhǔn)備新開辟一個(gè)專欄來(lái)寫一下我的學(xué)習(xí)筆記。
下一次我決定和大家講講閉包的事。

本期的內(nèi)容是原創(chuàng)的，但其實(shí)主要是看了《JavaScript高級(jí)程序設(shè)計(jì)》的啟發(fā)！
建議你也去看書，讀一下這本書的第六章的繼承那一部分，相信你也會(huì)深有啟發(fā)。

加油！