徹底搞懂js裡的__proto__和prototype到底有什麼區別?

Nick發表於2018-08-15

1.在JS裡,萬物皆物件。方法(Function)是物件,方法的原型(Function.prototype)是物件。因此,它們都會具有物件共有的特點。即:物件具有屬性proto,可稱為隱式原型,一個物件的隱式原型指向構造該物件的建構函式的原型,這也保證了例項能夠訪問在建構函式原型中定義的屬性和方法。
2.方法(Function)方法這個特殊的物件,除了和其他物件一樣有上述proto屬性之外,還有自己特有的屬性——原型屬性(prototype),這個屬性是一個指標,指向一個物件,這個物件的用途就是包含所有例項共享的屬性和方法(我們把這個物件叫做原型物件)。原型物件也有一個屬性,叫做constructor,這個屬性包含了一個指標,指回原建構函式。
1.1
首先宣告一個物件和一個函式,console.log一下物件和函式的proto
var A = function () {};
var B ={};

console.log(A.__proto__)
console.log(B.__proto__)
控制檯輸出結果如下圖所示:
圖片描述

剛才不是說函式是物件嗎?它們的proto為啥不一樣?往下看,彆著急。
var A = function () {};
var B ={};
console.log(A.__proto__.__proto__)
console.log(B.__proto__)
console.log結果如下:
圖片描述

是不是一樣了,,確實有點懵逼啊。。重點 隱式原型指向構造該物件的建構函式的原型。因為function是特殊的物件,A.proto就指向了構造該函式的一個函式(隨意起個名字 C),C的proto就指向了和B物件一樣的proto。。我自己都懵逼了。
1.2一個物件和一個函式,console.log一下物件和函式的prototype
var A = function () {};
var B ={};
console.log(A.prototype)
console.log(B.prototype)
console.log結果如下:
圖片描述

物件並不具有prototype屬性,只有函式才有prototype屬性。這就證明宣告2的說法是正確的。
總結:
js裡所有的物件都有proto屬性(物件,函式),指向構造該物件的建構函式的原型。
只有函式function才具有prototype屬性。這個屬性是一個指標,指向一個物件,這個物件的用途就是包含所有例項共享的屬性和方法(我們把這個物件叫做原型物件)。原型物件也有一個屬性,叫做constructor,這個屬性包含了一個指標,指回原建構函式。

相關文章