JS原型prototype和proto用法實例分析

ZhouAndrew 2022-09-04 發(fā)布于江蘇

展開全文

本文實例講述了JS原型prototype和__proto__用法。分享給大家供大家參考，具體如下：

先來看一個實例

function Foo() {

}

var foo = new Foo();

console.log(foo.prototype);// undefined

console.log(foo.__proto__ === Foo.prototype);// true

console.log(Foo.__proto__); [Function]

Foo.__proto__結果如下:

1	`console.log(Foo.prototype);// [object Object]`

Foo.prototype結果如下:

1	`console.log(Foo.prototype.prototype);// undefined`

實例說明了：

1、 foo 是 Foo 的一個實例，不是一個函數(shù)，所以沒有prototype；

Foo是Function的一個實例，而Function是一個函數(shù)，他的實例Foo也是一個函數(shù)，所以他們都有prototype。此外Object Array RegExp等也是函數(shù)。Math就僅僅是一個new Object() ,不是函數(shù)。

2、構造函數(shù)的prototype，默認情況下就是一個new Object()還額外添加了一個constructor屬性。所以說默認是沒有prototype只有__proto__的。

除了Object.prototype這個對象，其他所有的對象都會有__proto__屬性，之后函數(shù)才會有prototype屬性。

在創(chuàng)建對象的時候會自動創(chuàng)建一個__proto__屬性，指向它構造函數(shù)的prototype,當訪問這個對象的屬性的時候會順帶訪問__proto__中對應的屬性，也就是構造函數(shù)prototype這樣實現(xiàn)了繼承。

只有創(chuàng)建函數(shù)的時候才會創(chuàng)建一個prototype屬性，目的就是為了完成上面的繼承方式。

總結:

<1>不管是普通對象還是函數(shù)對象，它們都有一個隱含屬性”__proto__ “，而這屬性就是我們通常說的原型(屬性)，它其實就是一個Object類型的對象。

<2>對于函數(shù)對象，它們還會多一個prototype的屬性，它和以它為構造函數(shù)創(chuàng)建的普通對象的”__proto__ “屬性等同,即"new XXXt().__proto__ ===XXX.prototype"為true，即對象XXX中都有__proto__屬性就是一個指針，指向XXX構造函數(shù)中的prototype屬性。

摘錄網(wǎng)上

一個圖（橙色箭頭是初始的關系，綠色是執(zhí)行 var Fish = new Fu... 創(chuàng)建，藍色是執(zhí)行f1= new Fish()創(chuàng)建。）