詳解JavaScript中的原型和原型鏈
原型鏈圖
原型必備知識
要了解原型就必須搞清三個屬性:__proto__
、prototype
、 constructor
。
1.__proto__、 constructor屬性是對象所獨有的;
2.prototype屬性是函數(shù)獨有的;
3.js中函數(shù)也是對象的一種,那么函數(shù)同樣也有屬性__proto__、 constructor;
原型五大規(guī)則:
1.所有引用類型(對象,數(shù)組,函數(shù))都具有對象特性,即可以自由擴展屬性
2.所有引用類型(對象,數(shù)組,函數(shù))都具有一個__proto__(隱式原型)屬性,是一個普通對象
3.所有的函數(shù)都具有prototype(顯式原型)屬性,也是一個普通對象
4.所有引用類型(對象,數(shù)組,函數(shù))__proto__值指向它構(gòu)造函數(shù)的prototype
5.當(dāng)試圖得到一個對象的屬性時,如果變量本身沒有這個屬性,則會去他的__proto__中去找
prototype屬性(顯示原型)
首先創(chuàng)建一個構(gòu)造函數(shù)
var Parent = function(){ } //定義一個函數(shù),那它只是一個普通的函數(shù) var p1 = new Parent(); //通過關(guān)鍵字new,Parent成為構(gòu)造函數(shù) //創(chuàng)建了一個Parent構(gòu)造函數(shù)的實例 p1
prototype
是函數(shù)獨有的屬性,通過這個屬性就能訪問到原型;
prototype
設(shè)計之初就是為了實現(xiàn)繼承,讓由特定函數(shù)創(chuàng)建的所有實例共享屬性和方法,也可以說是讓某一個構(gòu)造函數(shù)實例化的所有對象可以找到公共的方法和屬性。有了prototype
我們不需要為每一個實例創(chuàng)建重復(fù)的屬性方法,而是將屬性方法創(chuàng)建在構(gòu)造函數(shù)的原型對象上(prototype)。那些不需要共享的才創(chuàng)建在構(gòu)造函數(shù)中。
Parent是構(gòu)造函數(shù),Parent.prototype就是原型
Parent.prototype
上添加的屬性和方法叫做原型屬性和原型方法,該構(gòu)造函數(shù)的實例都可以訪問調(diào)用。
proto屬性(隱式原型)
__proto__屬性是對象(包括函數(shù))獨有的。
每個對象都有__proto__屬性,該屬性指向的就是該對象的原型對象。
p1.__proto__ === Parent.prototype; // true
__proto__通常稱為隱式原型,prototype通常稱為顯式原型,可以說一個對象的隱式原型指向了該對象的構(gòu)造函數(shù)的顯式原型。那么在顯式原型上定義的屬性方法,通過隱式原型傳遞給了構(gòu)造函數(shù)的實例。這樣一來實例就能很容易的訪問到構(gòu)造函數(shù)原型上的方法和屬性了。
Parent.prototype
的隱式原型指向了對象原型
Parent.prototype.__proto__ === Object.prototype; //true
這里引出原型鏈的概念,當(dāng)調(diào)用p1.toString()
的時候,先在p1對象本身尋找,沒有找到則通過p1.__proto__找到了原型對象Parent.prototype
,也沒有找到,又通過Parent.prototype.__proto__
找到了上一層原型對象Object.prototype。在這一層找到了toString方法。返回該方法供p1使用。
當(dāng)然如果找到Object.prototype上也沒找到,就在Object.prototype.__proto__
中尋找,但是Object.prototype.__proto__ === null
所以就返回undefined。這就是為什么當(dāng)訪問對象中一個不存在的屬性時,返回undefined了。
constructor屬性
既然構(gòu)造函數(shù)通過 prototype 來訪問到原型,那么原型也應(yīng)該能夠通過某種途徑訪問到構(gòu)造函數(shù),這就是 constructor。
如前面的例子p1就是一個對象,那p1的構(gòu)造函數(shù)就是Parent()。Parent的構(gòu)造函數(shù)是Function()
p1.constructor => f Parent{} Parent.construtor => f Function() { [native code] } Function.constructor => ? Function() { [native code] }
Function是所有函數(shù)的根構(gòu)造函數(shù)。
通過例子可以看到,p1的constructor
屬性指向了Parent,那么Parent就是p1的構(gòu)造函數(shù)。同樣Parent的constructor屬性指向了Function,那么Function就是Parent的構(gòu)造函數(shù),然后又驗證了Function就是根構(gòu)造函數(shù)。
總結(jié)
本篇文章就到這里了,希望能夠給你帶來幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
基于BootStrap的Metronic框架實現(xiàn)頁面鏈接收藏夾功能按鈕移動收藏記錄(使用Sortable進行拖動排序)
這篇文章主要介紹了基于BootStrap的Metronic框架實現(xiàn)頁面鏈接收藏夾功能按鈕移動收藏記錄(使用Sortable進行拖動排序)的相關(guān)資料,非常不錯,需要的朋友可以參考下2016-08-08layui table checked獲取選中數(shù)據(jù)方式
這篇文章主要介紹了layui table checked獲取選中數(shù)據(jù)方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-10-10實例學(xué)習(xí)Javascript之構(gòu)建方法、屬性
實例學(xué)習(xí)Javascript之構(gòu)建方法、屬性...2007-03-03javascript 操作Word和Excel的實現(xiàn)代碼
javascript 操作Word和Excel的實現(xiàn)代碼, 需要的朋友可以參考下。2009-10-10