（5）強大的原型和原型鏈 · 深入理解JavaScript系列

## 前言 JavaScript 不包含傳統的類繼承模型，而是使用 prototypal 原型模型。雖然這經常被當作是 JavaScript 的缺點被提及，其實基于原型的繼承模型比傳統的類繼承還要強大。實現傳統的類繼承模型是很簡單，但是實現 JavaScript 中的原型繼承則要困難的多。由于 JavaScript 是唯一一個被廣泛使用的基于原型繼承的語言，所以理解兩種繼承模式的差異是需要一定時間的，今天我們就來了解一下原型和原型鏈。 ## 原型 10年前，我剛學習JavaScript的時候，一般都是用如下方式來寫代碼： ~~~ var decimalDigits = 2, tax = 5; function add(x, y) { return x + y; } function subtract(x, y) { return x - y; } //alert(add(1, 3)); ~~~ 通過執行各個function來得到結果，學習了原型之后，我們可以使用如下方式來**美化**一下代碼。 ### 原型使用方式1：在使用原型之前，我們需要先將代碼做一下小修改： ~~~ var Calculator = function (decimalDigits, tax) { this.decimalDigits = decimalDigits; this.tax = tax; }; ~~~ 然后，通過給Calculator對象的prototype屬性賦值**對象字面量**來設定Calculator對象的原型。 ~~~ Calculator.prototype = { add: function (x, y) { return x + y; }, subtract: function (x, y) { return x - y; } }; //alert((new Calculator()).add(1, 3)); ~~~ 這樣，我們就可以new Calculator對象以后，就可以調用add方法來計算結果了。 ### 原型使用方式2：第二種方式是，在賦值原型prototype的時候使用function立即執行的表達式來賦值，即如下格式： ~~~ Calculator.prototype = function () { } (); ~~~ 它的好處在前面的帖子里已經知道了，就是可以封裝私有的function，通過return的形式暴露出簡單的使用名稱，以達到public/private的效果，修改后的代碼如下： ~~~ Calculator.prototype = function () { add = function (x, y) { return x + y; }, subtract = function (x, y) { return x - y; } return { add: add, subtract: subtract } } (); //alert((new Calculator()).add(11, 3)); ~~~ 同樣的方式，我們可以new Calculator對象以后調用add方法來計算結果了。 ## 再來一點 ### 分步聲明：上述使用原型的時候，有一個限制就是一次性設置了原型對象，我們再來說一下如何分來設置原型的每個屬性吧。 ~~~ var BaseCalculator = function () { //為每個實例都聲明一個小數位數 this.decimalDigits = 2; }; //使用原型給BaseCalculator擴展2個對象方法 BaseCalculator.prototype.add = function (x, y) { return x + y; }; BaseCalculator.prototype.subtract = function (x, y) { return x - y; }; ~~~ 首先，聲明了一個BaseCalculator對象，構造函數里會初始化一個小數位數的屬性decimalDigits，然后通過原型屬性設置2個function，分別是add(x,y)和subtract(x,y)，當然你也可以使用前面提到的2種方式的任何一種，我們的主要目的是看如何將BaseCalculator對象設置到真正的Calculator的原型上。 ~~~ var BaseCalculator = function() { this.decimalDigits = 2; }; BaseCalculator.prototype = { add: function(x, y) { return x + y; }, subtract: function(x, y) { return x - y; } }; ~~~ 創建完上述代碼以后，我們來開始： ~~~ var Calculator = function () { //為每個實例都聲明一個稅收數字 this.tax = 5; }; Calculator.prototype = new BaseCalculator(); ~~~ 我們可以看到Calculator的原型是指向到BaseCalculator的一個實例上，目的是讓Calculator集成它的add(x,y)和subtract(x,y)這2個function，還有一點要說的是，由于它的原型是BaseCalculator的一個實例，所以不管你創建多少個Calculator對象實例，他們的原型指向的都是同一個實例。 ~~~ var calc = new Calculator(); alert(calc.add(1, 1)); //BaseCalculator 里聲明的decimalDigits屬性，在 Calculator里是可以訪問到的 alert(calc.decimalDigits); ~~~ 上面的代碼，運行以后，我們可以看到因為Calculator的原型是指向BaseCalculator的實例上的，所以可以訪問他的decimalDigits屬性值，那如果我不想讓Calculator訪問BaseCalculator的構造函數里聲明的屬性值，那怎么辦呢？這么辦： ~~~ var Calculator = function () { this.tax= 5; }; Calculator.prototype = BaseCalculator.prototype; ~~~ 通過將BaseCalculator的原型賦給Calculator的原型，這樣你在Calculator的實例上就訪問不到那個decimalDigits值了，如果你訪問如下代碼，那將會提升出錯。 ~~~ var calc = new Calculator(); alert(calc.add(1, 1)); alert(calc.decimalDigits); ~~~ ### 重寫原型：在使用第三方JS類庫的時候，往往有時候他們定義的原型方法是不能滿足我們的需要，但是又離不開這個類庫，所以這時候我們就需要重寫他們的原型中的一個或者多個屬性或function，我們可以通過繼續聲明的同樣的add代碼的形式來達到覆蓋重寫前面的add功能，代碼如下： ~~~ //覆蓋前面Calculator的add() function Calculator.prototype.add = function (x, y) { return x + y + this.tax; }; var calc = new Calculator(); alert(calc.add(1, 1)); ~~~ 這樣，我們計算得出的結果就比原來多出了一個tax的值，但是有一點需要注意：那就是重寫的代碼需要放在最后，這樣才能覆蓋前面的代碼。 ## 原型鏈在講原型鏈之前，我們先上一段代碼： ~~~ function Foo() { this.value = 42; } Foo.prototype = { method: function() {} }; function Bar() {} // 設置Bar的prototype屬性為Foo的實例對象 Bar.prototype = new Foo(); Bar.prototype.foo = 'Hello World'; // 修正Bar.prototype.constructor為Bar本身 Bar.prototype.constructor = Bar; var test = new Bar() // 創建Bar的一個新實例 // 原型鏈 test [Bar的實例] Bar.prototype [Foo的實例] { foo: 'Hello World' } Foo.prototype {method: ...}; Object.prototype {toString: ... /* etc. */}; ~~~ 上面的例子中，test 對象從 Bar.prototype 和 Foo.prototype 繼承下來；因此，它能訪問 Foo 的原型方法 method。同時，它也能夠訪問那個定義在原型上的 Foo 實例屬性 value。需要注意的是 new Bar() 不會創造出一個新的 Foo 實例，而是重復使用它原型上的那個實例；因此，所有的 Bar 實例都會共享相同的 value 屬性。 ### 屬性查找：當查找一個對象的屬性時，JavaScript 會向上遍歷原型鏈，直到找到給定名稱的屬性為止，到查找到達原型鏈的頂部 - 也就是 Object.prototype - 但是仍然沒有找到指定的屬性，就會返回 undefined，我們來看一個例子： ~~~ function foo() { this.add = function (x, y) { return x + y; } } foo.prototype.add = function (x, y) { return x + y + 10; } Object.prototype.subtract = function (x, y) { return x - y; } var f = new foo(); alert(f.add(1, 2)); //結果是3，而不是13 alert(f.subtract(1, 2)); //結果是-1 ~~~ 通過代碼運行，我們發現subtract是安裝我們所說的向上查找來得到結果的，但是add方式有點小不同，這也是我想強調的，就是屬性在查找的時候是先查找自身的屬性，如果沒有再查找原型，再沒有，再往上走，一直插到Object的原型上，所以在某種層面上說，用 for in語句遍歷屬性的時候，效率也是個問題。還有一點我們需要注意的是，我們可以賦值任何類型的對象到原型上，但是不能賦值原子類型的值，比如如下代碼是無效的： ~~~ function Foo() {} Foo.prototype = 1; // 無效 ~~~ ### hasOwnProperty函數： hasOwnProperty是Object.prototype的一個方法，它可是個好東西，他能判斷一個對象是否包含自定義屬性而不是原型鏈上的屬性，因為hasOwnProperty 是 JavaScript 中唯一一個處理屬性但是不查找原型鏈的函數。 ~~~ // 修改Object.prototype Object.prototype.bar = 1; var foo = {goo: undefined}; foo.bar; // 1 'bar' in foo; // true foo.hasOwnProperty('bar'); // false foo.hasOwnProperty('goo'); // true ~~~ 只有 hasOwnProperty 可以給出正確和期望的結果，這在遍歷對象的屬性時會很有用。沒有其它方法可以用來排除原型鏈上的屬性，而不是定義在對象自身上的屬性。但有個惡心的地方是：JavaScript 不會保護 hasOwnProperty 被非法占用，因此如果一個對象碰巧存在這個屬性，就需要使用外部的 hasOwnProperty 函數來獲取正確的結果。 ~~~ var foo = { hasOwnProperty: function() { return false; }, bar: 'Here be dragons' }; foo.hasOwnProperty('bar'); // 總是返回 false // 使用{}對象的 hasOwnProperty，并將其上下為設置為foo {}.hasOwnProperty.call(foo, 'bar'); // true ~~~ 當檢查對象上某個屬性是否存在時，hasOwnProperty 是唯一可用的方法。同時在使用 for in loop 遍歷對象時，推薦總是使用 hasOwnProperty 方法，這將會避免原型對象擴展帶來的干擾，我們來看一下例子： ~~~ // 修改 Object.prototype Object.prototype.bar = 1; var foo = {moo: 2}; for(var i in foo) { console.log(i); // 輸出兩個屬性：bar 和 moo } ~~~ 我們沒辦法改變for in語句的行為，所以想過濾結果就只能使用hasOwnProperty 方法，代碼如下： ~~~ // foo 變量是上例中的 for(var i in foo) { if (foo.hasOwnProperty(i)) { console.log(i); } } ~~~ 這個版本的代碼是唯一正確的寫法。由于我們使用了 hasOwnProperty，所以這次只輸出 moo。如果不使用 hasOwnProperty，則這段代碼在原生對象原型（比如 Object.prototype）被擴展時可能會出錯。總結：推薦使用 hasOwnProperty，不要對代碼運行的環境做任何假設，不要假設原生對象是否已經被擴展了。 ## 總結原型極大地豐富了我們的開發代碼，但是在平時使用的過程中一定要注意上述提到的一些注意事項。參考內容：[http://bonsaiden.github.com/JavaScript-Garden/zh/](http://bonsaiden.github.com/JavaScript-Garden/zh/)