[js高手之路]一步步圖解javascript的原型(prototype)對象,原型鏈

我們接着上文繼續,我們通過原型方式,解決了多個實例的方法共享問題,接下來,我們就來搞清楚原型(prototype),原型鏈的來龍去脈.

function CreateObj(uName) {
            this.userName = uName;
        }
        CreateObj.prototype.showUserName = function(){
            return this.userName;
        }
        var obj1 = new CreateObj('ghostwu');
        var obj2 = new CreateObj('衛莊');


wKioL1mkwZmB7rjKAAAxQYndpx0891.png-wh_50

1,每個函數都有一個原型屬性(prototype) , 這個屬性是一個指針,指向構造函數的原型對象( CreateObj.prototype), 如上圖中的第1根綠色的線

2,在默認情況下,所有原型對象都會自動獲得一個constructor屬性,該屬性的作用上文已經解釋過,該屬性包含一個指向prototype屬性所在的函數,如上圖的第2根綠色的線

3,所有的實例( 通過構造函數new出來的, 原型對象[ 如CreateObj.prototype, 上圖我還沒有畫出來]等 )都包含一個隱式原型(__proto__),該指針指向實例的構造函數的原型對象,

如上圖中的第3根線和第4根線. obj1的構造函數是CreateObj, CreateObj的原型對象是CreateObj.prototype, obj2同理,所以:

obj1.__proto__ === CreateObj.prototype //true

obj2.__proto__ === CreateObj.prototype //true

4,寫在構造函數中, 爲this賦值的屬性和方法, 在畫圖的過程中,把他們畫在對象上面,如userName這個是給對象賦值的屬性,所以在obj1和obj2這兩個對象上都會存在一個屬性userName

5,寫在原型對象上的方法或者屬性,應該把他們畫在原型對象上,如

CreateObj.prototype.showUserName = function(){

return this.userName;

}

showUserName這個方法就要畫在圖中CreateObj.prototype上面

6,當一個對象訪問屬性和方法的時候,他的訪問規則叫(就近原則), 規則如下:

當實例上面,存在屬性或者方法時,直接用實例上面的,

如果實例上面不存在屬性和方法,就會沿着實例的__proto__指針指向的原型對象繼續往上查找,如果找不到,值就是undefined.

console.log( obj1.showUserName() ); //ghostwu

console.log( obj2.showUserName() ); //衛莊

在obj1,obj2上面是不存在showUserName這個方法的,所以會順着__proto__查找到CreateObj.prototype原型對象上的showUserName方法

如果,把CreateObj.prototype原型對象上的showUserName註釋掉,那麼obj1.showUserName和obj2.showUserName就會報錯

// CreateObj.prototype.showUserName = function(){

// return this.userName;

// }

function CreateObj(uName) {
            this.userName = uName;
            this.showUserName = function(){
                return '100';
            }
        }
        CreateObj.prototype.showUserName = function(){
            return this.userName;
        }
        var obj1 = new CreateObj('ghostwu');
        var obj2 = new CreateObj('衛莊');
        console.log( obj1.showUserName() ); //100
        console.log( obj2.showUserName() ); //100


如果在構造函數中爲this添加一個showUserName方法, 那麼obj1和obj2就會直接調用this上面的,因爲這兩個方法會被畫在圖中的實例上,所以:

console.log( obj1.showUserName === obj2.showUserName ); //false

現在,你應該能明白,把屬性和方法寫在構造函數的原型對象(prototype)上之後,能實現多個實例屬性和方法的共享的原理了吧

 

什麼是原型鏈?

在前面,我有說過,所有的實例(包括原型對象)都有一個隱式原型__proto__,那麼CreateObj.prototype這個原型對象,他的__proto__指向誰呢?

function CreateObj(uName) {
            this.userName = uName;
            this.showUserName = function () {
                return '100';
            }
        }
        CreateObj.prototype.showUserName = function () {
            return this.userName;
        }
        console.log( CreateObj.prototype.__proto__ ); //指向Object.prototype
        console.log( CreateObj.prototype.__proto__ === Object.prototype ); //true


wKiom1mkweTwja-LAABc9C1uMik371.png-wh_50

CreateObj.prototype.__proto__指向的是Object.prototype, 通過 全等運算符 (===) 測試之後爲true

Object.prototype.__proto__ 指向的是NULL

這就是原型鏈,通過隱式原型把一些構造函數層層的串起來,通過上面這個圖,就知道,爲什麼自定義的對象能調用toString, valueOf,等方法了吧?


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章