1. 程式人生 > >Js中__proto__和prototype的區別和關係

Js中__proto__和prototype的區別和關係

在知乎上看到了一篇寫得還挺好的文章,能夠很好的說明這兩者之間的關係,之前一直也有關注這方面的知識,但是如果重新複習一遍的話,時間久了之後就會忘記,所以前端還是需要經常複習,經常使用,經常理解。

首先,要明確幾個點:

1.在JS裡,萬物都是物件,方法(Function)是物件,方法的原型(Function.prototype)也是物件。

它們之間都會具有物件共有的特點。

即:物件具有屬性__proto__,可稱為隱式原型,一個物件的隱式原型指向構造該物件的建構函式的原型,這也保證了例項能夠訪問在建構函式原型中定義的屬性和方法。

2.方法(Function)

方法這個特殊的物件,除了和其他物件一樣有上述__proto__屬性之外,還有自己特有的屬性——原型屬性(prototype),這個屬性是一個指標,指向一個物件,這個物件的用途就是包含所有例項共享的屬性和方法。(我們把這個物件稱為原型物件)。原型物件也有一個屬性,叫做constructor,這個屬性包含了一個指標,指回原建構函式。

我們知道了這些以後,來看這幅圖:

preview

1.建構函式Foo()

建構函式的原型屬性Foo.prototype指向了原型物件,在原型物件裡有共有的方法,所有建構函式宣告的例項(f1,f2)都可以共享這個方法。

2.原型物件Foo.proptotype

Foo.prototype儲存著例項共享的方法,有一個指標指回constructor指回建構函式。

3.例項

f1和f2是Foo這個物件的兩個例項,這兩個物件也有屬性__proto__,指向建構函式的原型物件,這樣子就可以像上面1所說的訪問原型物件的所有方法。

另外:

建構函式Foo()除了是方法,也是物件啊,它也有__proto__屬性,指向誰呢?

指向它的建構函式的原型物件。函式的建構函式不就是Function嘛,因此這裡的__proto__指向了Function.prototype.

其實除了Foo(),Function(),Object()也是一樣的道理。

原型物件也是物件,它的__proto__屬性,又指向誰呢?

同理,指向它的建構函式的原型物件。這裡的Object.prototype,最後,Object.prototype的__proto__屬性指向null.

總結:

1.物件有屬性__proto__,指向該物件的建構函式的原型物件。

2.方法除了有屬性_proto__,還有屬性prototype,prototype指向該方法的原型物件