你不知道的javascript之JS原型對象和原型鏈

開篇

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

我們經常會這麼寫

    function Person () {
        this.name = 'John';
    }
    var person = new Person();
    Person.prototype.say = function() {
        console.log('Hello,' + this.name);
    };
    person.say();//Hello,John

上述代碼非常簡單,Person原型對象定義了公共的say方法,雖然此舉在構造實例之後出現,但因爲原型方法在調用之前已經聲明,因此之後的每個實例將都擁有該方法。從這個簡單的例子裏,我們可以得出:
原型對象的用途是爲每個實例對象存儲共享的方法和屬性,它僅僅是一個普通對象而已。並且所有的實例是共享同一個原型對象,因此有別於實例方法或屬性,原型對象僅有一份。所有就會有如下等式成立:

 person.say == new Person().say

可能我們也會這麼寫

    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

很不幸,person.say方法沒有找到,所以報錯了。其實這樣寫的初衷是好的:因爲如果想在原型對象上添加更多的屬性和方法,我們不得不每次都要寫一行Person.prototype,還不如提煉成一個Object來的直接。但是此例子巧就巧在構造實例對象操作是在添加原型方法之前,這樣就會造成一個問題:
當var person = new Person()時,Person.prototype爲:Person {}(當然了,內部還有constructor屬性),即Person.prototype指向一個空的對象{}。而對於實例person而言,其內部有一個原型鏈指針proto,該指針指向了Person.prototype指向的對象,即{}。接下來重置了Person的原型對象,使其指向了另外一個對象,即
Object {say: function},
這時person.proto的指向還是沒有變,它指向的{}對象裏面是沒有say方法的,因爲報錯。
從這個現象我們可以得出:
在js中,對象在調用一個方法時會首先在自身裏尋找是否有該方法,若沒有,則去原型鏈上去尋找,依次層層遞進,這裏的原型鏈就是實例對象的_proto_屬性。

若想讓上述例子成功運行,最簡單有效的方法就是交換構造對象和重置原型對象的順序,即:

    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

一張圖讓你秒懂原型鏈

這裏寫圖片描述
其實,只需要明白原型對象的結構即可:

    Function.prototype = {
        constructor : Function,
        __proto__ : parent prototype,
        some prototype properties: ...
    };

總結:函數的原型對象constructor默認指向函數本身,原型對象除了有原型屬性外,爲了實現繼承,還有一個原型鏈指針_proto_,該指針指向上一層的原型對象,而上一層的原型對象的結構依然類似,這樣利用_proto_一直指向Object的原型對象上,而Object的原型對象用Object._proto_ = null表示原型鏈的最頂端,如此變形成了javascript的原型鏈繼承,同時也解釋了爲什麼所有的javascript對象都具有Object的基本方法。

發佈了41 篇原創文章 · 獲贊 80 · 訪問量 19萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章