JS 函式的原型關係

首先，我們建立了乙個user函式，和user的例項化物件。

function user() {}
let hd = new user();
console.dir(user);
console.log(hd);

然後我們分別列印user和hd，分別看看他們兩之間的原型關係。

首先我們先來看看user這個函式，我們可以看到有prototype(原型物件)和__proto__(物件原型)兩個屬性，證明了user這個函式在不同的情況扮演著不同的作用。這就好比我們在生活中，在公司的時候我們是員工，回到家我們是父母的孩子。當函式扮演著建構函式的時候，他的父級就為prototype，當函式作為物件呼叫的時候，他的父級就為__proto__指向的建構函式的原型物件。或者我們可以理解為，__proto__是服務於我們函式物件的，而prototype一般是服務於函式例項化的物件。

讓我們再來看看hd的列印結果。

此時我們可以畫一幅關係圖幫助我們理解。

console.log(user.prototype === hd.__proto__)  //true

我們可以通過列印也能證明上述圖表是成立的。

因此我們知道，每乙個物件都會有乙個屬性__proto__指向建構函式的prototype原型物件，之所以我們物件可以使用建構函式prototype原型物件的屬性和方法，就是因為物件又__proto__原型的存在。__proto__物件原型的意義就在於為物件的查詢機制提供乙個方向，或者說一條路線，但是它是乙個非標準屬性，因此實際開發中，不可以使用這個屬性，它只是內部指向原型物件prototype。

當我們明白了這三者的關係之後，我們繼續看一下user的原型物件中的__proto__物件原型指的又是什麼呢？

我們給object的原型物件新增乙個show方法，然後再列印user函式看看。

從列印結果中可以得出結論，user函式中的prototype(原型物件)與__proto__(物件原型)的指向相同，且都指向與object的原型物件。

console.log(user.prototype.__proto__ === user.__proto__.__proto__) //true

最後我們通過列印object的原型物件的物件原型指向是null

console.log(object.prototype.__proto__) //null

因此我們總結得出下圖。

最下面的倒三角就是我們剛剛的user與hd物件關係圖。

tips：我們用字面量的形式宣告變數可以理解為用建構函式宣告變數的簡寫，因此他們的物件原型都指向建構函式的原型物件。

let hd = {}; //new object
console.log(hd.__proto__ === object.prototype);  //true
let str = ''; // new string
console.log(str.__proto__ === string.prototype);  //true
let arr = ; //new array
console.log(arr.__proto__ === array.prototype);  //true
let bool = true;
console.log(bool.__proto__ === boolean.prototype);  //true

JS 函式的原型關係

JS 判斷原型關係

js中函式例項原型屬性建構函式的關係

原型建構函式例項原型鏈的關係

JS 函式的原型關係

JS 判斷原型關係

js中函式 例項 原型屬性 建構函式的關係

原型 建構函式 例項 原型鏈的關係

相關推薦

js中函式例項原型屬性建構函式的關係

原型建構函式例項原型鏈的關係