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

先來(lái)看一個(gè)實(shí)例

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__結(jié)果如下:

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

Foo.prototype結(jié)果如下:

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

實(shí)例說(shuō)明了：

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

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

2、構(gòu)造函數(shù)的prototype，默認(rèn)情況下就是一個(gè)new Object()還額外添加了一個(gè)constructor屬性。所以說(shuō)默認(rèn)是沒(méi)有prototype只有__proto__的。

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

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

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

總結(jié):

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

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

摘錄網(wǎng)上

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

這樣f1 就可以通過(guò)__proto__ 訪問(wèn) Fish.prototype中的屬性（當(dāng)然這是程序執(zhí)行的時(shí)候自動(dòng)查找的）。Fish就可以訪問(wèn) Function.prototype定義的屬性。所有對(duì)象都可以訪問(wèn)Object.prototype 中的屬性。

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《javascript面向?qū)ο笕腴T(mén)教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

最新評(píng)論