一、深入理解prototype, getPrototypeOf和_ proto _

prototype，getPropertyOf和 _ proto _ 是三個(gè)用來(lái)訪問(wèn)prototype的方法。它們的命名方式很類(lèi)似因此很容易帶來(lái)困惑。

它們的使用方式如下：

• C.prototype: 一般用來(lái)為一個(gè)類(lèi)型建立它的原型繼承對(duì)象。比如C.prototype = xxx，這樣就會(huì)讓使用new C()得到的對(duì)象的原型對(duì)象為xxx。當(dāng)然使用obj.prototype也能夠得到obj的原型對(duì)象。
• getPropertyOf: Object.getPropertyOf(obj)是ES5中用來(lái)得到obj對(duì)象的原型對(duì)象的標(biāo)準(zhǔn)方法。
• _ proto _: obj._ proto _是一個(gè)非標(biāo)準(zhǔn)的用來(lái)得到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)訪問(wèn)u對(duì)象的某些屬性時(shí)，會(huì)首先嘗試讀取u對(duì)象上的屬性，如果u對(duì)象上并沒(méi)有這個(gè)屬性，就會(huì)查找其原型對(duì)象。

比如當(dāng)調(diào)用u.checkPassword()時(shí)，因?yàn)閏heckPassword定義在其原型對(duì)象上，所以在u對(duì)象上找不到該屬性，就在u的原型上查找，查找順序是u-> u.prototype（User.prototype）。

前面提到過(guò)，getPrototypeOf方法是ES5中用來(lái)得到某個(gè)對(duì)象的原型對(duì)象的標(biāo)準(zhǔn)方法。因此：

Object.getPrototypeOf(u) === User.prototype; // true 

在一些環(huán)境中，同時(shí)提供了一個(gè)非標(biāo)準(zhǔn)的_ proto _ 屬性用來(lái)得到某個(gè)對(duì)象的原型對(duì)象。當(dāng)環(huán)境不提供ES5的標(biāo)準(zhǔn)方法getPrototypeOf方法時(shí)，可以暫時(shí)使用該屬性作為替代。可以使用下面的代碼測(cè)試環(huán)境中是否支持_ proto _：

u.__ proto __ === User.prototype; // true 

所以在JavaScript中，類(lèi)的概念是由構(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 _屬性來(lái)達(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 _。原因如下：

• 首先，最顯而易見(jiàn)的原因就是便攜性。因?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)程序中有其他代碼依賴(lài)于原來(lái)的繼承鏈時(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)境，可以給出來(lái)一個(gè)不依賴(lài)于_ proto _的Object.create方法的實(shí)現(xiàn)。

四、解決 _ proto _兼容問(wèn)題， 讓構(gòu)造函數(shù)不再依賴(lài)new關(guān)鍵字

在將function當(dāng)做構(gòu)造函數(shù)使用時(shí)，需要確保該函數(shù)是通過(guò)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ù)聲明為依賴(lài)于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í)，無(wú)論使用了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代碼塊就是用來(lái)處理沒(méi)有使用new進(jìn)行調(diào)用的情況的。當(dāng)沒(méi)有使用new時(shí)，this的指向并不是一個(gè)User的實(shí)例，而在使用了new關(guān)鍵字時(shí)，this的指向是一個(gè)User類(lèi)型的實(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來(lái)顯式定義了返回值。

當(dāng)然，以上的工作在某些情況下也不是必要的。但是，當(dāng)一個(gè)函數(shù)是需要被當(dāng)做構(gòu)造函數(shù)進(jìn)行調(diào)用時(shí)，必須對(duì)它進(jìn)行說(shuō)明，使用文檔是一種方式，將函數(shù)的命名使用首字母大寫(xiě)的方式也是一種方式(基于JavaScript語(yǔ)言的一些約定俗成)。

以上就是針對(duì)javascript的prototype,getPrototypeOf和__proto__進(jìn)行的深入學(xué)習(xí)，希望對(duì)大家的學(xué)習(xí)有所幫助。

最新評(píng)論