跟我學(xué)習(xí)javascript的prototype,getPrototypeOf和__proto__
一、深入理解prototype, getPrototypeOf和_ proto _
prototype,getPropertyOf和 _ proto _ 是三個(gè)用來訪問prototype的方法。它們的命名方式很類似因此很容易帶來困惑。
它們的使用方式如下:
- C.prototype: 一般用來為一個(gè)類型建立它的原型繼承對(duì)象。比如C.prototype = xxx,這樣就會(huì)讓使用new C()得到的對(duì)象的原型對(duì)象為xxx。當(dāng)然使用obj.prototype也能夠得到obj的原型對(duì)象。
- getPropertyOf: Object.getPropertyOf(obj)是ES5中用來得到obj對(duì)象的原型對(duì)象的標(biāo)準(zhǔn)方法。
- _ proto _: obj._ proto _是一個(gè)非標(biāo)準(zhǔn)的用來得到obj對(duì)象的原型對(duì)象的方法。
為了充分了解獲取原型的各種方式,以下是一個(gè)例子:
function User(name, passwordHash) {
this.name = name;
this.passwordHash = passwordHash;
}
User.prototype.toString = function() {
return "[User " + this.name + "]";
};
User.prototype.checkPassword = function(password) {
return hash(password) === this.passwordHash;
};
var u = new User("sfalken", "0ef33ae791068ec64b502d6cb0191387");
User函數(shù)擁有一個(gè)默認(rèn)的prototype屬性,該屬性的值是一個(gè)空對(duì)象。在以上的例子中,向prototype對(duì)象添加了兩個(gè)方法,分別是toString和checkPassword。當(dāng)調(diào)用User構(gòu)造函數(shù)得到一個(gè)新的對(duì)象u時(shí),它的原型對(duì)象會(huì)被自動(dòng)賦值到User.prototype對(duì)象。即u.prototype === User.prototype會(huì)返回true。
User函數(shù),User.prototype,對(duì)象u之間的關(guān)系可以表示如下:

上圖中的箭頭表示的是繼承關(guān)系。當(dāng)訪問u對(duì)象的某些屬性時(shí),會(huì)首先嘗試讀取u對(duì)象上的屬性,如果u對(duì)象上并沒有這個(gè)屬性,就會(huì)查找其原型對(duì)象。
比如當(dāng)調(diào)用u.checkPassword()時(shí),因?yàn)閏heckPassword定義在其原型對(duì)象上,所以在u對(duì)象上找不到該屬性,就在u的原型上查找,查找順序是u-> u.prototype(User.prototype)。
前面提到過,getPrototypeOf方法是ES5中用來得到某個(gè)對(duì)象的原型對(duì)象的標(biāo)準(zhǔn)方法。因此:
Object.getPrototypeOf(u) === User.prototype; // true
在一些環(huán)境中,同時(shí)提供了一個(gè)非標(biāo)準(zhǔn)的_ proto _ 屬性用來得到某個(gè)對(duì)象的原型對(duì)象。當(dāng)環(huán)境不提供ES5的標(biāo)準(zhǔn)方法getPrototypeOf方法時(shí),可以暫時(shí)使用該屬性作為替代??梢允褂孟旅娴拇a測(cè)試環(huán)境中是否支持_ proto _:
u.__ proto __ === User.prototype; // true
所以在JavaScript中,類的概念是由構(gòu)造函數(shù)(User)和用于實(shí)例間共享方法的原型對(duì)象(User.prototype)共同完成的。構(gòu)造函數(shù)中負(fù)責(zé)構(gòu)造每個(gè)對(duì)象特有的屬性,比如上述例子中的name和password屬性。而其原型對(duì)象中負(fù)責(zé)存放所有對(duì)象共有的屬性,比如上述例子中的checkPassword和toString方法。就像下面這張圖表示的那樣:

二、獲取對(duì)象優(yōu)先使用Object.getPrototypeOf,而不是_ proto _
在ES5中引入了Object.getPrototypeOf作為獲取對(duì)象原型對(duì)象的標(biāo)準(zhǔn)API。但是在很多執(zhí)行環(huán)境中,也提供了一個(gè)特殊的_ proto _屬性來達(dá)到同樣的目的。
因?yàn)椴⒉皇撬械沫h(huán)境都提供了這個(gè)_ proto _屬性,且每個(gè)環(huán)境的實(shí)現(xiàn)方式各不相同,因此一些結(jié)果可能不一致,例如,對(duì)于擁有null原型的對(duì)象:
// 在某些環(huán)境中 var empty = Object.create(null); // object with no prototype "_proto _" in empty; // false (in some environments) // 在某些環(huán)境中 var empty = Object.create(null); // object with no prototype "_proto_" in empty; // true (in some environments)
所以當(dāng)環(huán)境中支持Object.getPrototypeOf方法時(shí),優(yōu)先使用它。即使不支持,也可以為了實(shí)現(xiàn)一個(gè):
if (typeof Object.getPrototypeOf === "undefined") {
Object.getPrototypeOf = function(obj) {
var t = typeof obj;
if (!obj || (t !== "object" && t !== "function")) {
throw new TypeError("not an object");
}
return obj._proto_;
};
}
上述代碼首先會(huì)對(duì)當(dāng)前環(huán)境進(jìn)行檢查,如果已經(jīng)支持了Object.getPrototypeOf,就不會(huì)再重復(fù)定義。
三、絕不要修改_ proto _
和Object.getPrototypeOf相比,_ proto _的特殊之處還體現(xiàn)在它能夠修改一個(gè)對(duì)象的原型繼承鏈。因?yàn)樗且粋€(gè)屬性,除了執(zhí)行獲取它的操作外,還能夠?qū)λM(jìn)行設(shè)置。
但是,絕不要修改_ proto _。原因如下:
- 首先,最顯而易見的原因就是便攜性。因?yàn)椴皇撬械腏avaScript執(zhí)行環(huán)境都支持這一屬性,所以使用了_ proto _ 之后,代碼就不能在那些不支持_ proto _的環(huán)境中運(yùn)行了。
- 其次,是性能上的考慮?,F(xiàn)在的JavaScript引擎的實(shí)現(xiàn)都會(huì)針對(duì)對(duì)象屬性的存取作出大量的優(yōu)化,因?yàn)檫@些操作是最常用的。當(dāng)修改了對(duì)象的_ proto _后,就相當(dāng)于修改了對(duì)象的整個(gè)繼承結(jié)構(gòu),這樣做回導(dǎo)致很多優(yōu)化都不再可用。
- 最后,最重要的原因是需要保證程序的可靠性。因?yàn)楦淖僟 proto _屬性后,對(duì)象的原型繼承鏈也許會(huì)被完全地改變。當(dāng)程序中有其他代碼依賴于原來的繼承鏈時(shí),就會(huì)出現(xiàn)不可意料的錯(cuò)誤。通常而言,原型繼承鏈需要保持穩(wěn)定。
當(dāng)需要為一個(gè)新創(chuàng)建的對(duì)象賦予一個(gè)原型對(duì)象時(shí),可以使用ES5提供的Object.create方法。對(duì)于未實(shí)現(xiàn)ES5標(biāo)準(zhǔn)的環(huán)境,可以給出來一個(gè)不依賴于_ proto _的Object.create方法的實(shí)現(xiàn)。
四、解決 _ proto _兼容問題, 讓構(gòu)造函數(shù)不再依賴new關(guān)鍵字
在將function當(dāng)做構(gòu)造函數(shù)使用時(shí),需要確保該函數(shù)是通過new關(guān)鍵字進(jìn)行調(diào)用的。
function User(name, passwordHash) {
this.name = name;
this.passwordHash = passwordHash;
}
如果在調(diào)用上述構(gòu)造函數(shù)時(shí),忘記了使用new關(guān)鍵字,那么:
var u = User("baravelli", "d8b74df393528d51cd19980ae0aa028e");
u; // undefined
this.name; // "baravelli"
this.passwordHash; // "d8b74df393528d51cd19980ae0aa028e"
可以發(fā)現(xiàn)得到的u是undefined,而this.name以及this.passwordHash則被賦了值。但是這里的this指向的則是全局對(duì)象。
如果將構(gòu)造函數(shù)聲明為依賴于strict模式:
function User(name, passwordHash) {
"use strict";
this.name = name;
this.passwordHash = passwordHash;
}
var u = User("baravelli", "d8b74df393528d51cd19980ae0aa028e");
// error: this is undefined
那么在忘記使用new關(guān)鍵字的時(shí)候,在調(diào)用this.name= name的時(shí)候會(huì)拋出TypeError錯(cuò)誤。這是因?yàn)樵趕trict模式下,this的默認(rèn)指向會(huì)被設(shè)置為undefined而不是全局對(duì)象。
那么,是否有種方法能夠保證在調(diào)用一個(gè)函數(shù)時(shí),無論使用了new關(guān)鍵字與否,該函數(shù)都能夠被當(dāng)做構(gòu)造函數(shù)呢?下面的代碼是一種實(shí)現(xiàn)方式,使用了instanceof操作:
function User(name, passwordHash) {
if (!(this instanceof User)) {
return new User(name, passwordHash);
}
this.name = name;
this.passwordHash = passwordHash;
}
var x = User("baravelli", "d8b74df393528d51cd19980ae0aa028e");
var y = new User("baravelli", "d8b74df393528d51cd19980ae0aa028e");
x instanceof User; // true
y instanceof User; // true
以上的if代碼塊就是用來處理沒有使用new進(jìn)行調(diào)用的情況的。當(dāng)沒有使用new時(shí),this的指向并不是一個(gè)User的實(shí)例,而在使用了new關(guān)鍵字時(shí),this的指向是一個(gè)User類型的實(shí)例。
另一個(gè)更加適合在ES5環(huán)境中使用的實(shí)現(xiàn)方式如下:
function User(name, passwordHash) {
var self = this instanceof User ? this : Object.create(User.prototype);
self.name = name;
self.passwordHash = passwordHash;
return self;
}
Object.create方法是ES5提供的方法,它能夠接受一個(gè)對(duì)象作為新創(chuàng)建對(duì)象的prototype。那么在非ES5環(huán)境中,就需要首先實(shí)現(xiàn)一個(gè)Object.create方法:
if (typeof Object.create === "undefined") {
Object.create = function(prototype) {
function C() { }
C.prototype = prototype;
return new C();
};
}
實(shí)際上,Object.create方法還有接受第二個(gè)參數(shù)的版本,第二個(gè)參數(shù)表示的是在新創(chuàng)建對(duì)象上賦予的一系列屬性。
當(dāng)上述的函數(shù)確實(shí)使用了new進(jìn)行調(diào)用時(shí),也能夠正確地得到返回的新建對(duì)象。這得益于構(gòu)造器覆蓋模式(Constructor Override Pattern)。該模式的含義是:使用了new關(guān)鍵字的表達(dá)式的返回值能夠被一個(gè)顯式的return覆蓋。正如以上代碼中使用了return self來顯式定義了返回值。
當(dāng)然,以上的工作在某些情況下也不是必要的。但是,當(dāng)一個(gè)函數(shù)是需要被當(dāng)做構(gòu)造函數(shù)進(jìn)行調(diào)用時(shí),必須對(duì)它進(jìn)行說明,使用文檔是一種方式,將函數(shù)的命名使用首字母大寫的方式也是一種方式(基于JavaScript語(yǔ)言的一些約定俗成)。
以上就是針對(duì)javascript的prototype,getPrototypeOf和__proto__進(jìn)行的深入學(xué)習(xí),希望對(duì)大家的學(xué)習(xí)有所幫助。
- 數(shù)據(jù)排序誰最快(javascript中的Array.prototype.sort PK 快速排序)
- 比較詳細(xì)的javascript對(duì)象的property和prototype是什么一種關(guān)系
- 不錯(cuò)的一篇關(guān)于javascript-prototype繼承
- javascript prototype的深度探索不是原型繼承那么簡(jiǎn)單
- javascript Prototype 對(duì)象擴(kuò)展
- javascript prototype原型操作筆記
- JavaScript isPrototypeOf和hasOwnProperty使用區(qū)別
- JavaScript prototype對(duì)象的屬性說明
- JavaScript中的prototype使用說明
- JavaScript為對(duì)象原型prototype添加屬性的兩種方式
- javascript中的prototype屬性使用說明(函數(shù)功能擴(kuò)展)
- JavaScript面向?qū)ο笾甈rototypes和繼承
- 深入了解javascript中的prototype與繼承
- JavaScript prototype 使用介紹
- JavaScript中的prototype.bind()方法介紹
- Javascript中Array.prototype.map()詳解
- JavaScript設(shè)計(jì)模式之原型模式(Object.create與prototype)介紹
- JavaScript通過prototype給對(duì)象定義屬性用法實(shí)例
- 跟我學(xué)習(xí)javascript的prototype使用注意事項(xiàng)
- 跟我學(xué)習(xí)javascript的prototype原型和原型鏈
相關(guān)文章
JavaScript實(shí)現(xiàn)簡(jiǎn)單拖拽效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單拖拽效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09
JavaScript返回網(wǎng)頁(yè)中錨點(diǎn)數(shù)目的方法
這篇文章主要介紹了JavaScript返回網(wǎng)頁(yè)中錨點(diǎn)數(shù)目的方法,涉及javascript使用document.anchors獲取錨點(diǎn)數(shù)目的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04
基于JavaScript實(shí)現(xiàn)驚艷的打字機(jī)效果
這篇文章主要為大家詳細(xì)介紹了如何使用JavaScript打造驚艷打字機(jī)效果,讓你的文字生動(dòng)躍動(dòng),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03
父頁(yè)面iframe中的第三方子頁(yè)面跨域交互技術(shù)—postMessage實(shí)現(xiàn)方法
web網(wǎng)站通過iframe嵌入第三方web頁(yè)面,父頁(yè)面和子頁(yè)面如果需要數(shù)據(jù)交互,顯然違反了同源策略,在HTML5標(biāo)準(zhǔn)引入的window對(duì)象下的postMessage方法,可以允許來自不同源的JavaScript腳本采用異步方式進(jìn)行有限的通信,可以實(shí)現(xiàn)跨文本檔、多窗口、跨域消息傳遞...2023-06-06
JS操作input標(biāo)簽屬性checkbox全選的實(shí)現(xiàn)代碼
這篇文章主要介紹了JS操作input標(biāo)簽屬性checkbox全選的代碼,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-03-03
js實(shí)現(xiàn)無縫循環(huán)滾動(dòng)
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)無縫循環(huán)滾動(dòng)的具體代碼,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-08-08
JavaScript監(jiān)聽文本框回車事件并過濾文本框空格的方法
這篇文章主要介紹了JavaScript監(jiān)聽文本框回車事件并過濾文本框空格的方法,涉及javascript操作文本框獲取、清空及刪除空格的技巧,需要的朋友可以參考下2015-04-04
網(wǎng)易JS面試題與Javascript詞法作用域說明
Javascript函數(shù)在定義它們的作用域里運(yùn)行,而不是在執(zhí)行它們的作用域里運(yùn)行。2010-11-11

