對原型與原型鏈的理解

這部分是我長久以來習慣於直接忽略的部分，但是后面在面試和實習的過程中發現這部分知識是非常有用的！所以我花了好久時間看書、參考博客、敲代碼，結合自己的理解將這些內容總結如下~

最開始想要直觀的理解請直接參考阮一峰老師博客關於繼承的講解：http://www.ruanyifeng.com/blog/2011/06/designing_ideas_of_inheritance_mechanism_in_javascript.html

 

原型對象

javascript語言是一種面向對象的語言，它沒有"子類"和"父類"的概念，里面所有的數據類型都是對象，如何將這些對象聯系起來呢？

Brendan Eich在考慮設計繼承機制的時候，參考了C++和JAVA使用new命令，通過調用類的構造函數生成實例的方式，將new命令引入javascript。

C++的寫法是：

　　ClassName *object = new ClassName(param);

Java的寫法是：

　　Person person = new Person();

但是，javascript里面沒有“類”這個概念，那么，Brendan Eich決定直接在new后面跟一個構造函數，來生成實例。

構造函數是什么？構造函數與其他函數唯一的區別在於調用方式不同。任何函數只要通過new來調用就可以作為構造函數，它是用來創建特定類型的對象。

下面定義一個構造函數Female：

function Female(name){
    this.name = name;
    this.sex = 'female';  
}

通過new命令來生成一個person實例：

var person1 = new Female("Summer")

這里，構造函數Female就是實例對象person1的原型！！！Female里的this關鍵字就指的是person1這個對象！

 

new出來的person1對象此時已經和Female再無聯系了！也就是說每一個new出來的實例都有自己的屬性和方法的副本，是獨立的的！修改其中一個不會影響另一個！

var person1 = new Female("Summer");
var person2 = new Female("Lily");

person2.sex = 'male';

console.log(person1.sex)      // female
console.log(person2.sex)      // male

但是，我們希望構造函數中的sex屬性是一個共有屬性，那么此時用這樣的方法，每個實例中都有一個相同的sex屬性，會造成資源極大的浪費！

 那么原型對象就即將登場了！Brendan Eich決定給每一個構造函數都設置一個prototype屬性，這個屬性就指向原型對象。其實原型對象就只是個普通對象，里面存放着所有實例對象需要共享的屬性和方法！所以，我們把需要共享的放到原型對象里，把那些不需要共享的屬性和方法存在在構造函數里！

那么上面的代碼可改寫如下：

        function Person(name,age){
            this.name = name;
        }
        Person.prototype.sex = 'female';

        var person1 = new Person("Summer");
        var person2 = new Person("Lily");
        
        console.log(person1.sex)      // female
        console.log(person2.sex)      // female

        Person.prototype.sex = 'male';

        console.log(person1.sex)      // male
        console.log(person2.sex)      // male

可以看出，修改prototype屬性會影響它的所有實例的sex的值！！

實例一旦創建出來就會自動引用prototype對象的屬性和方法！所以實例對象的屬性和方法一般分為兩種：一種是自身的，一種是引用自prototype的。

具體實現是這樣的：

      每當代碼讀取某個對象的某個屬性的時候，都會執行一次搜索。首先從對象實例本身開始，如果在實例中找到了該屬性，則返回該屬性的值，如果沒有找到，則順着原型鏈指針向上，到原型對象中去找，如果如果找到就返回該屬性值。

這里要提一點，如果為對象實例添加了一個屬性與原型中同名，則該屬性會屏蔽掉原型中的同名屬性，不會去修改它！使用delete可以刪除實例中的屬性~(提到delete那要插一句~delete只能刪除對象下的屬性，不能刪除變量和參數！)

 原型鏈

事實上，js里完全依靠"原型鏈"(prototype chain)模式來實現繼承。

上面說完原型對象。下面要扒一扒__proto__、prototype、constructor

__proto__：事實上就是原型鏈指針！！

prototype：上面說到這個是指向原型對象的

constructor：每一個原型對象都包含一個指向構造函數的指針，就是constructor

繼承實現方式：

 為了實現繼承，__proto__會指向上一層的原型對象，而上一層的結構依然類似，那么就利用__proto__一直指向Object的原型對象上！Object.prototype.__proto__ = null;表示到達最頂端。如此形成了原型鏈繼承。

下面有個圖解非常經典，我自己也手畫了一遍去理解，真的非常有效~

大致總結一下就是：

Object是作為眾多new出來的實例的基類   function Object(){ [ native code ] }

Function是作為眾多function出來的函數的基類    function Function(){ [ native code ] }

 

構造函數的__proto__(包括Function.prototype和Object.prototype)都指向Function.prototype

原型對象的__proto__都指向Object.prototype

Object.prototype.__proto__指向null

 

 

 

今兒老爹生日~下午給老爹做cake~晚上繼續總結js相關的面試題和閉包~