摘要：因此，請慎重重寫原型繼承說到就不得說繼承，我們通過給上添加屬性和方法，就能使該構造函數所有的實例對象擁有屬性和方法。

本人博客：【www.xiabingbao.com】

在本文中，我們講解prototype的內容主要由：什么是prototype，prototype與函數之間的關系，prototype與實例對象之間的關系，使用proto實現一個簡單的繼承。

在javascript中，創建的每個函數天生都自帶著一個prototype屬性。這里我們要強調的是：這個prototype屬性是一個指針，指向一個對象，在這里，我們稱指向的這個看不到但確實存在的對象為原型對象。其實可以用下面一個簡單的例子來說明：

var proto = {
    name : "wenzi",
    age : 25
}
function Person(){

}
Person.prototype = proto;

這樣Person.protptype就指向到了proto，如果還有其他的引用（A）也指向到了proto，那么這個引用和Person.prototype就是相等的：A==Person.prototype；

prototype指向的這個對象是真實存在的，可能很多的同學對prototype屬性和原型對象有些混淆，我們在這里把原型對象叫做大SB。大SB與普通對象的一個不同之處就是，他也有一個天生的屬性：constructor，這個constructor重新指回到了函數。不過，既然大SB也是一個對象，那么它也是繼承于Object的，擁有Object所有的方法和屬性，比如toString()等。

大SB = {
    constructor : Person,
    say : function(){
        return "hello world";
    }
}

那么現在我們就能得到兩個引用關系：

大SB = Person.prototype; // 原型對象 = 函數.prototype;
Person = 大SB.constructor(Person.prototype.constructor); // 函數 = 原型對象.constructor(函數.prototype.constructor)

從運行的代碼中，可以驗證我們的觀點，Person.prototype的類型是object，Person.prototype.constructor重新指回到了Person。
其實在實例對象中，也存在著一個屬性指向到大SB中：

var John = new Person();
大SB = John.__proto__;

即 John.__proto__ 和 Person.prototype 指向的是同一個引用：John.__proto__==Person.prototype。

在構造函數能設置屬性和方法，在prototype中也能設置屬性和方法，那new出的對象使用的是哪個呢？我們來看一個例子：

function Person(){
    this.name = "wenzi";
}
Person.prototype.name = "bing";
Person.prototype.say = function(){
    return "hello world";
}
var John = new Person();
alert(John.name);  // "wenzi"
alert(John.say()); // "hello world"

從運行的結果我們可以看到，John.name輸出的是構造函數中的屬性值"wenzi"，John.say()輸出的是"hello world"。這是因為，當讀取某個對象的屬性值時，會首先在實例對象中進行搜索，若搜索到則直接進行返回；若搜索不到則去原型對象中進行尋找。因此在使用John調用say()方法時是正確的，不會報錯。而且是進行了兩次的搜索。

雖然say()是掛載在prototype上，John也同樣能直接進行訪問。但是，我們不能直接對John.say進行修改從而影響prototype的say()方法，如下：

John.say = function(){
    return "this has changed";
}
John.say(); // "this has changed"
var Tom = new Person();
Tom.say(); // "hello world"

從運行John.say()的結果來看，say()方法確實發生了變化。但是，當我們再new出一個新對象Tom時，Tom.say()返回的還是"hello world"，這是為什么呢？

因為，對John.say()進行修改時，不是修改了prototype上的say()，而是給John這個實例對象添加了一個say()方法，從而屏蔽了prototype上的say()方法，由上面的尋找順序我們可以知道，若實例對象存在這個方法就直接返回了，不再去原型對象上尋找。而new出的新對象Tom在調用say()方法時，Tom自己是沒有say()方法的，只能去原型對象上尋找，因此返回的還是"hello world"。所以，對John.say進行修改時，不是修改了prototype上的say()方法，而是給John添加了實例方法，屏蔽掉了prototype上的方法而已。那如何才能修改prototype上的方法呢，好辦，直接在prototype上修改：

Person.prototype.say = function(){
    return "wenzi"s blog";
}

這樣就能修改prototype的say()方法了。

在上面的例子中，我們都是大部分給prototype添加屬性或方法，本來prototype指向的是大SB，若我們給prototype添加屬性或方法時，就是給大SB添加屬性或方法：

Person.prototype.name = "wenzi"; 

而大SB里其他的屬性和方法是不受影響的，constructor依然指回到Person。但是，若我們這樣寫：

Person.prototype = {
    name : "wenzi",
    say : function(){
        return "my name is name"
    }
}

就是對Person的prototype重寫了，讓prototype進行了重新的指向，本來Person.prototype指向的是大SB，可是現在卻指向了CTM，而CTM里也沒有constructor屬性指回到Person，若是想重新指回到Person，還得手動添加一個constructor屬性：

Person.prototype = {
    constructor : Person, // 重新指回到Person
    name : "wenzi",
    say : function(){
        return "my name is name"
    }
}

這樣就能手動構造出新的原型對象了，new出的實例對象也能使用這個prototype上的屬性和方法。

但是這里還存在一個問題，若之前已經有new出的實例對象，然后再修改Person.prototype，之前的實例對象是無法使用新的原型對象(CTM)上的屬性和方法的，因為之前的實例對象的__proto__指向的依然是大SB。因此，請慎重重寫prototype

說到prototype就不得說prototype繼承，我們通過給prototype上添加屬性和方法，就能使該構造函數所有的實例對象擁有屬性和方法。我們先來看下面的代碼：

function Father(){
    this.name = "father";
    this.age = 43;
}
Father.prototype.job = "Doctor";
Father.prototype.getName = function(){
    return this.name;
}

function Son(){
    this.name = "son";
}
Son.prototype = new Father(); // Son的prototype指向Father的實例對象
var John = new Son();
for(var k in John){
    console.log(k+" : "+john[k]);
}
/*
    輸出結果：
    name : son
    age : 43
    job : Doctor
    getName : function (){
        return this.name;
    }
*/

從上面的例子中可以看到，Son的實例對象繼承了Father中所有的屬性和方法。當然，若Son的對象實例中存在的，還依然保留。不過Son原型中的屬性和方法是會被徹底覆蓋的。我們來分析一下這是為什么？

Son的prototype指向的是Father的一個實例，我們把這拆成兩步：

var father = new Father();
Son.prototype = father;

在實例father中既有name,age屬性，也有Father.prototype中的屬性和方法，我們對father循環看一下：

for(var k in father){
    console.log(k, father[k]);
}
/*
    name father
    age 43
    job Doctor
    getName Father.getName()
*/

由于constructor是不可枚舉的類型，在for~in循環里是輸出不了constructor的，其實father是這樣的：

father = {
    constructor : Father,
    name : father
    age : 43
    job : Doctor
    getName : Father.getName()
}

因此Son的prototype指向的就是上面father的內容。到此，Son的prototype中的constructor的指向也發生了改變，本來Son.prototype是指向到Son的，現在指向到了Father。即完全重寫了Son的prototype，重新指向了另一個引用。所以，我們就能知道為什么對象實例中的屬性能夠保存，而prototype中的會徹底被刪除了。

如果想給Son添加原型方法或屬性，那只能是在Son.prototype = new Father();之后進行添加：

Son.prototype = new Father();
Son.prototype.getJob = function(){
    return this.job;
}

這樣就能添加上getJob方法了。

到這里，會有人問，如果Son.prototype = Father.prototype會怎么樣呢？我們剛才也說了Father.prototype指向的是大SB，而大SB也是一個實例對象，是Object的一個實例，這就相當于：

Son.prototype == 大SB; // 指向了大SB

因此，如果是Son.prototype = Father.prototype的話，那么Son只能繼承到Father.prototype上的job和getName()，其他的屬性是獲取不到的。

本文簡單的介紹了一下prototype，讓我們能對prototype有個淺顯的認識。當然，博主才疏學淺，文章里會有很多疏漏和不完善的地方，歡迎大家批評指正。

本人博客：【www.xiabingbao.com】

歡迎大家關注我的微信公眾號：wenzichel