JS原型prototype和__proto__用法實例分析
本文實例講述了JS原型prototype和__proto__用法。分享給大家供大家參考,具體如下:
先來看一個實例
function Foo() {}var foo = new Foo();console.log(foo.prototype);// undefinedconsole.log(foo.__proto__ === Foo.prototype);// trueconsole.log(Foo.__proto__); [Function]
Foo.__proto__結果如下:
console.log(Foo.prototype);// [object Object]
Foo.prototype結果如下:
console.log(Foo.prototype.prototype);// undefined
實例說明了:
1、 foo 是 Foo 的一個實例,不是一個函數,所以沒有prototype;
Foo是Function的一個實例,而Function是一個函數,他的實例Foo也是一個函數,所以他們都有prototype。此外Object Array RegExp等也是函數。Math就僅僅是一個new Object() ,不是函數。
2、構造函數的prototype,默認情況下就是一個new Object()還額外添加了一個constructor屬性。所以說默認是沒有prototype只有__proto__的。
除了Object.prototype這個對象,其他所有的對象都會有__proto__屬性,之后函數才會有prototype屬性。
在創建對象的時候會自動創建一個__proto__屬性,指向它構造函數的prototype,當訪問這個對象的屬性的時候會順帶訪問__proto__中對應的屬性,也就是構造函數prototype這樣實現了繼承。
只有創建函數的時候才會創建一個prototype屬性,目的就是為了完成上面的繼承方式。
總結:
<1>不管是普通對象還是函數對象,它們都有一個隱含屬性”__proto__ “,而這屬性就是我們通常說的原型(屬性),它其實就是一個Object類型的對象。
<2>對于函數對象,它們還會多一個prototype的屬性,它和以它為構造函數創建的普通對象的”__proto__ “屬性等同,即'new XXXt().__proto__ ===XXX.prototype'為true,即對象XXX中都有__proto__屬性就是一個指針,指向XXX構造函數中的prototype屬性。
摘錄網上
一個圖(橙色箭頭是初始的關系,綠色是執行 var Fish = new Fu... 創建,藍色是執行f1= new Fish()創建。)
這樣f1 就可以通過__proto__ 訪問 Fish.prototype中的屬性(當然這是程序執行的時候自動查找的)。Fish就可以訪問 Function.prototype定義的屬性。所有對象都可以訪問Object.prototype 中的屬性。
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具:http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。
更多關于JavaScript相關內容感興趣的讀者可查看本站專題:《javascript面向對象入門教程》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
相關文章: