開篇

之前對js中的原型鏈和原型對象有所了解，每當(dāng)別人問我什么是原型鏈和原型對象時(shí)，我總是用很官方（其實(shí)自己不懂）的解釋去描述。有一句話說的好：如果你不能把一個(gè)很復(fù)雜的東西用最簡單的話語描述出來，那就說明你沒有真正的理解。最近正在讀《Javascript高級程序設(shè)計(jì)》，書中對原型對象和原型鏈的描述讓我受益匪淺，下面僅用一個(gè)對比性的例子來說明。



我們經(jīng)常會(huì)這么寫

    function Person () {

        this.name = 'John';

    }

    var person = new Person();

    Person.prototype.say = function() {

        console.log('Hello,' + this.name);

    };

    person.say();//Hello,John

1

2

3

4

5

6

7

8

上述代碼非常簡單，Person原型對象定義了公共的say方法，雖然此舉在構(gòu)造實(shí)例之后出現(xiàn)，但因?yàn)樵头椒ㄔ谡{(diào)用之前已經(jīng)聲明，因此之后的每個(gè)實(shí)例將都擁有該方法。從這個(gè)簡單的例子里，我們可以得出：



原型對象的用途是為每個(gè)實(shí)例對象存儲(chǔ)共享的方法和屬性，它僅僅是一個(gè)普通對象而已。并且所有的實(shí)例是共享同一個(gè)原型對象，因此有別于實(shí)例方法或?qū)傩?，原型對象僅有一份。



所以就會(huì)有如下等式成立：



    person.say == new Person().say

1

可能我們也會(huì)這么寫

    function Person () {

        this.name = 'John';

    }

    var person = new Person();

    Person.prototype = {

        say: function() {

            console.log('Hello,' + this.name);

        }

    };

    person.say();//person.say is not a function

1

2

3

4

5

6

7

8

9

10

很不幸，person.say方法沒有找到，所以報(bào)錯(cuò)了。其實(shí)這樣寫的初衷是好的：因?yàn)槿绻朐谠蛯ο笊咸砑痈嗟膶傩院头椒ǎ覀儾坏貌幻看味家獙懸恍蠵erson.prototype,還不如提煉成一個(gè)Object來的直接。但是此例子巧就巧在構(gòu)造實(shí)例對象操作是在添加原型方法之前，這樣就會(huì)造成一個(gè)問題： 

當(dāng)var person = new Person()時(shí)，Person.prototype為：Person {} (當(dāng)然了，內(nèi)部還有constructor屬性),即Person.prototype指向一個(gè)空的對象{}。而對于實(shí)例person而言，其內(nèi)部有一個(gè)原型鏈指針proto,該指針指向了Person.prototype指向的對象，即{}。接下來重置了Person的原型對象，使其指向了另外一個(gè)對象,即



 Object {say: function}

1

這時(shí)person.proto的指向還是沒有變，它指向的{}對象里面是沒有say方法的，因?yàn)榇藞?bào)錯(cuò)。



從這個(gè)現(xiàn)象我們可以得出：



在js中，對象在調(diào)用一個(gè)方法時(shí)會(huì)首先在自身里尋找是否有該方法，若沒有，則去原型鏈上去尋找，依次層層遞進(jìn)，這里的原型鏈就是實(shí)例對象的proto屬性。



若想讓上述例子成功運(yùn)行，最簡單有效的方法就是交換構(gòu)造對象和重置原型對象的順序，即：



    function Person () {

        this.name = 'John';

    }

    Person.prototype = {

        say: function() {

            console.log('Hello,' + this.name);

        }

    };

    var person = new Person();

    person.say();//person.say is not a function

1

2

3

4

5

6

7

8

9

10

一張圖讓你秒懂原型鏈

 



其實(shí)，只需要明白原型對象的結(jié)構(gòu)即可：



    Function.prototype = {

        constructor : Function,

        proto : parent prototype,

        some prototype properties: ...

    };

1

2

3

4

5

總結(jié)：

函數(shù)的原型對象constructor默認(rèn)指向函數(shù)本身，原型對象除了有原型屬性外，為了實(shí)現(xiàn)繼承，還有一個(gè)原型鏈指針proto，該指針指向上一層的原型對象，而上一層的原型對象的結(jié)構(gòu)依然類似，這樣利用proto一直指向Object的原型對象上，而Object的原型對象用Object.prototype.proto = null表示原型鏈的最頂端，如此變形成了javascript的原型鏈繼承，同時(shí)也解釋了為什么所有的javascript對象都具有Object的基本方法。



Blog同步