重新認識原型和原型鏈三

wade3po發表於2019-03-14

知道了顯式原型prototype和隱式原型__proto__,我們就能很好的知道原型鏈是什麼東西了。

說原型鏈之前再理幾個概念:

例項隱式原型__proto__指向建立例項的建構函式的顯示原型prototype。

例項可以通過__proto__呼叫在__proto__下的所有屬性和方法。

所以,原型鏈就這樣出來了:

function User() {
    
}User.prototype.userEat = 'userEat';
function Person() {}
Person.prototype = new User();
Person.prototype.personEat = 'personEat';
function People(){}
People.prototype = new Person();
People.prototype.peopleEat = 'peopleEat';
var people = new People();
console.log(people.userEat);
console.log(people.personEat);
console.log(people.peopleEat);
console.log(people.__proto__);
複製程式碼

重新認識原型和原型鏈三

這邊用到了構造繼承,但是隱式原型確實是可以層層訪問。

再看看這個:

function User() {}
console.log(User.__proto__ === Function.prototype);
console.log(Function.prototype.__proto__ === Object.prototype);
console.log(User.__proto__.__proto__ === Object.prototype);
複製程式碼

輸出的都是true,因為User是函式物件,所以User的隱式原型__proto__指向Function的顯示原型prototype,而函式也繼承於物件,所以Function的隱式原型__proto__指向Object的顯示原型prototype。

所以原型鏈就是這麼簡單,例項物件通過隱式原型__proto__可以獲取建構函式的所有屬性和方法,又因為這些建構函式的繼承性,例項物件會一層一層向上查詢,這些層級連結起來就是原型鏈。最終原型鏈的盡頭是null。

console.log(people.__proto__.__proto__.__proto__.__proto__.__proto__);
console.log(Object.prototype.__proto__);
複製程式碼

得到的結果是null。

歡迎關注Coding個人筆記公眾號

相關文章