對象原型

基于原型的語言？

JavaScript 常被描述為一種基于原型的語言 (prototype-based language)——每個對象擁有一個原型對象，對象以其原型為模板、從原型繼承方法和屬性。原型對象也可能擁有原型，并從中繼承方法和屬性，一層一層、以此類推。這種關(guān)系常被稱為原型鏈 (prototype chain)，它解釋了為何一個對象會擁有定義在其他對象中的屬性和方法。

準(zhǔn)確地說，這些屬性和方法定義在 Object 的構(gòu)造器函數(shù)之上，而非對象實例本身。

在傳統(tǒng)的 OOP 中，首先定義"類"，此后創(chuàng)建對象實例時，類中定義的所有屬性和方法都被復(fù)制到實例中。在 JavaScript 中并不如此復(fù)制——而是在對象實例和它的構(gòu)造器之間建立一個連接(作為原型鏈中的一節(jié))，以后通過上溯原型鏈，在構(gòu)造器中找到這些屬性和方法。

以上描述很抽象；我們先看一個例子。

理解原型對象

讓我們回到 Person() 構(gòu)造器的例子。請把這個例子載入瀏覽器。如果你還沒有看完上一篇文章并寫好這個例子，也可以使用 oojs-class-further-exercises.html 中的例子(亦可參考源代碼)。

本例中我們將定義一個構(gòu)造器函數(shù):

function Person(first, last, age, gender, interests) {
  
  // 屬性與方法定義
  
};

然后創(chuàng)建一個對象實例:

var person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);

在 JavaScript 控制臺輸入 "person1."，你會看到，瀏覽器將根據(jù)這個對象的可用的成員名稱進(jìn)行自動補全:

在這個列表中，你可以看到定義在 person1 的原型對象、即 Person() 構(gòu)造器中的成員—— name、age、gender、interests、bio、greeting。同時也有一些其他成員—— watch、valueOf 等等——這些成員定義在 Person() 構(gòu)造器的原型對象、即 Object 之上。下圖展示了原型鏈的運作機(jī)制。

0px auto; width：700px;“>

那么，調(diào)用 person1 的"實際定義在 Object 上"的方法時，會發(fā)生什么？比如:

person1.valueOf()

這個方法僅僅返回了被調(diào)用對象的值。在這個例子中發(fā)生了如下過程:

• 瀏覽器首先檢查，person1 對象是否具有可用的 valueOf() 方法。
• 如果沒有，則瀏覽器檢查 person1 對象的原型對象(即 Person)是否具有可用的 valueof() 方法。
• 如果也沒有，則瀏覽器檢查 Person() 構(gòu)造器的原型對象(即 Object)是否具有可用的 valueOf() 方法。Object 具有這個方法，于是該方法被調(diào)用，

prototype 屬性:在此處定義被繼承的成員

那么，那些繼承的屬性和方法在哪兒定義呢？如果你查看 Object 參考頁，會發(fā)現(xiàn)左側(cè)列出許多屬性和方法——大大超過我們在 person1 對象中看到的繼承成員的數(shù)量。某些屬性或方法被繼承了，而另一些沒有——為什么呢？

原因在于，繼承的屬性和方法是定義在 prototype 屬性之上的(你可以稱之為子命名空間 (sub namespace) )——那些以 Object.prototype. 開頭的屬性，而非僅僅以 Object. 開頭的屬性。prototype 屬性的值是一個對象，我們希望被原型鏈下游的對象繼承的屬性和方法，都被儲存在其中。

于是 Object.prototype.watch()、Object.prototype.valueOf() 等等成員，適用于任何繼承自 Object() 的對象類型，包括使用構(gòu)造器創(chuàng)建的新的對象實例。

Object.is()、Object.keys()，以及其他不在 prototype 對象內(nèi)的成員，不會被"對象實例"或"繼承自 Object() 的對象類型"所繼承。這些方法/屬性僅能被 Object() 構(gòu)造器自身使用。

1. 你可以檢查已有的 prototype 屬性?；氐较惹暗睦樱?JavaScript 控制臺輸入:

   Person.prototype

2. 輸出并不多，畢竟我們沒有為自定義構(gòu)造器的原型定義任何成員。缺省狀態(tài)下，構(gòu)造器的 prototype 屬性初始為空白。現(xiàn)在嘗試:

   Object.prototype

你會看到 Object 的 prototype 屬性上定義了大量的方法；如前所示，繼承自 Object 的對象都可以使用這些方法。

JavaScript 中到處都是通過原型鏈繼承的例子。比如，你可以嘗試從 String、Date、Number 和 Array 全局對象的原型中尋找方法和屬性。它們都在原型上定義了一些方法，因此當(dāng)你創(chuàng)建一個字符串時:

var myString = 'This is my string.';

myString 立即具有了一些有用的方法，如 split()、indexOf()、replace() 等。

回顧 create()

我們曾經(jīng)講過如何用 Object.create() 方法創(chuàng)建新的對象實例。

1. 例如，在上個例子的 JavaScript 控制臺中輸入:

   var person2 = Object.create(person1);

2. create() 實際做的是從指定原型對象創(chuàng)建一個新的對象。這里以 person1 為原型對象創(chuàng)建了 person2 對象。在控制臺輸入:

   person2.__proto__

結(jié)果返回 person1 對象。

constructor 屬性

每個對象實例都具有 constructor 屬性，它指向創(chuàng)建該實例的構(gòu)造器函數(shù)。

1. 例如，在控制臺中嘗試下面的指令:

   person1.constructor
   person2.constructor

   都將返回 Person() 構(gòu)造器，因為該構(gòu)造器包含這些實例的原始定義。

   一個小技巧是，你可以在 constructor 屬性的末尾添加一對圓括號(括號中包含所需的參數(shù))，從而用這個構(gòu)造器創(chuàng)建另一個對象實例。畢竟構(gòu)造器是一個函數(shù)，故可以通過圓括號調(diào)用；只需在前面添加 new 關(guān)鍵字，便能將此函數(shù)作為構(gòu)造器使用。

2. 在控制臺中輸入:

   var person3 = new person1.constructor('Karen', 'Stephenson', 26, 'female', ['playing drums', 'mountain climbing']);

3. 現(xiàn)在嘗試訪問新建對象的屬性，例如:

   person3.name.first
   person3.age
   person3.bio()

正常工作。通常你不會去用這種方法創(chuàng)建新的實例；但如果你剛好因為某些原因沒有原始構(gòu)造器的引用，那么這種方法就很有用了。

此外，constructor 屬性還有其他用途。比如，想要獲得某個對象實例的構(gòu)造器的名字，可以這么用:

instanceName.constructor.name

具體地，像這樣:

person1.constructor.name

修改原型

從我們從下面這個例子來看一下如何修改構(gòu)造器的 prototype 屬性。

1. 回到 oojs-class-further-exercises.html 的例子，在本地為源代碼創(chuàng)建一個副本。在已有的 JavaScript 的末尾添加如下代碼，這段代碼將為構(gòu)造器的 prototype 屬性添加一個新的方法:

   Person.prototype.farewell = function() {
     alert(this.name.first + ' has left the building. Bye for now!');
   }

2. 保存代碼，在瀏覽器中加載頁面，然后在控制臺輸入:

   person1.farewell();

你會看到一條警告信息，其中還顯示了構(gòu)造器中定義的人名；這很有用。但更關(guān)鍵的是，整條繼承鏈動態(tài)地更新了，任何由此構(gòu)造器創(chuàng)建的對象實例都自動獲得了這個方法。

再想一想這個過程。我們的代碼中定義了構(gòu)造器，然后用這個構(gòu)造器創(chuàng)建了一個對象實例，此后向構(gòu)造器的 prototype 添加了一個新的方法:

function Person(first, last, age, gender, interests) {

  // 屬性與方法定義

};

var person1 = new Person('Tammi', 'Smith', 32, 'neutral', ['music', 'skiing', 'kickboxing']);

Person.prototype.farewell = function() {
  alert(this.name.first + ' has left the building. Bye for now!');
}

但是 farewell() 方法仍然可用于 person1 對象實例——舊有對象實例的可用功能被自動更新了。這證明了先前描述的原型鏈模型。這種繼承模型下，上游對象的方法不會復(fù)制到下游的對象實例中；下游對象本身雖然沒有定義這些方法，但瀏覽器會通過上溯原型鏈、從上游對象中找到它們。這種繼承模型提供了一個強(qiáng)大而可擴(kuò)展的功能系統(tǒng)。

你很少看到屬性定義在 prototype 屬性中，因為如此定義不夠靈活。比如，你可以添加一個屬性:

Person.prototype.fullName = 'Bob Smith';

但這不夠靈活，因為人們可能不叫這個名字。用 name.first 和 name.last 組成 fullName 會好很多:

Person.prototype.fullName = this.name.first + ' ' + this.name.last;

然而，這么做是無效的，因為本例中 this 引用全局范圍，而非函數(shù)范圍。訪問這個屬性只會得到 undefined undefined。但這個語句若放在先前定義的 prototype 的方法中則有效，因為此時語句位于函數(shù)范圍內(nèi)，從而能夠成功地轉(zhuǎn)換為對象實例范圍。你可能會在 prototype 上定義常屬性 (constant property) (指那些你永遠(yuǎn)無需改變的屬性)，但一般來說，在構(gòu)造器內(nèi)定義屬性更好。

事實上，一種極其常見的對象定義模式是，在構(gòu)造器(函數(shù)體)中定義屬性、在 prototype 屬性上定義方法。如此，構(gòu)造器只包含屬性定義，而方法則分裝在不同的代碼塊，代碼更具可讀性。例如:

// 構(gòu)造器及其屬性定義

function Test(a,b,c,d) {
  // 屬性定義
};

// 定義第一個方法

Test.prototype.x = function () { ... }

// 定義第二個方法

Test.prototype.y = function () { ... }

// 等等……

在 Piotr Zalewa 的 school plan app 樣例中可以看到這種模式。

總結(jié)

本文介紹了 JavaScript 對象原型，包括原型鏈如何允許對象之間繼承特性、prototype 屬性、如何通過它來向構(gòu)造器添加方法，以及其他有關(guān)主題。

下一篇文章中，我們將了解如何在兩個自定義的對象間實現(xiàn)功能的繼承。