# 對象的繼承 面向對象編程很重要的一個方面，就是對象的繼承。A 對象通過繼承 B 對象，就能直接擁有 B 對象的所有屬性和方法。這對于代碼的復用是非常有用的。 大部分面向對象的編程語言，都是通過“類”（class）實現對象的繼承。傳統上，JavaScript 語言的繼承不通過 class，而是通過“原型對象”（prototype）實現，本章介紹 JavaScript 的原型鏈繼承。 ES6 引入了 class 語法，基于 class 的繼承不在這個教程介紹，請參閱《ES6 標準入門》一書的相關章節。 ## 原型對象概述 ### 構造函數的缺點 JavaScript 通過構造函數生成新對象，因此構造函數可以視為對象的模板。實例對象的屬性和方法，可以定義在構造函數內部。 ```javascript function Cat (name, color) { this.name = name; this.color = color; } var cat1 = new Cat('大毛', '白色'); cat1.name // '大毛' cat1.color // '白色' ``` 上面代碼中，`Cat`函數是一個構造函數，函數內部定義了`name`屬性和`color`屬性，所有實例對象（上例是`cat1`）都會生成這兩個屬性，即這兩個屬性會定義在實例對象上面。 通過構造函數為實例對象定義屬性，雖然很方便，但是有一個缺點。同一個構造函數的多個實例之間，無法共享屬性，從而造成對系統資源的浪費。 ```javascript function Cat(name, color) { this.name = name; this.color = color; this.meow = function () { console.log('喵喵'); }; } var cat1 = new Cat('大毛', '白色'); var cat2 = new Cat('二毛', '黑色'); cat1.meow === cat2.meow // false ``` 上面代碼中，`cat1`和`cat2`是同一個構造函數的兩個實例，它們都具有`meow`方法。由于`meow`方法是生成在每個實例對象上面，所以兩個實例就生成了兩次。也就是說，每新建一個實例，就會新建一個`meow`方法。這既沒有必要，又浪費系統資源，因為所有`meow`方法都是同樣的行為，完全應該共享。 這個問題的解決方法，就是 JavaScript 的原型對象（prototype）。 ### prototype 屬性的作用 JavaScript 繼承機制的設計思想就是，原型對象的所有屬性和方法，都能被實例對象共享。也就是說，如果屬性和方法定義在原型上，那么所有實例對象就能共享，不僅節省了內存，還體現了實例對象之間的聯系。 下面，先看怎么為對象指定原型。JavaScript 規定，每個函數都有一個`prototype`屬性，指向一個對象。 ```javascript function f() {} typeof f.prototype // "object" ``` 上面代碼中，函數`f`默認具有`prototype`屬性，指向一個對象。 對于普通函數來說，該屬性基本無用。但是，對于構造函數來說，生成實例的時候，該屬性會自動成為實例對象的原型。 ```javascript function Animal(name) { this.name = name; } Animal.prototype.color = 'white'; var cat1 = new Animal('大毛'); var cat2 = new Animal('二毛'); cat1.color // 'white' cat2.color // 'white' ``` 上面代碼中，構造函數`Animal`的`prototype`屬性，就是實例對象`cat1`和`cat2`的原型對象。原型對象上添加一個`color`屬性，結果，實例對象都共享了該屬性。 原型對象的屬性不是實例對象自身的屬性。只要修改原型對象，變動就立刻會體現在**所有**實例對象上。 ```javascript Animal.prototype.color = 'yellow'; cat1.color // "yellow" cat2.color // "yellow" ``` 上面代碼中，原型對象的`color`屬性的值變為`yellow`，兩個實例對象的`color`屬性立刻跟著變了。這是因為實例對象其實沒有`color`屬性，都是讀取原型對象的`color`屬性。也就是說，當實例對象本身沒有某個屬性或方法的時候，它會到原型對象去尋找該屬性或方法。這就是原型對象的特殊之處。 如果實例對象自身就有某個屬性或方法，它就不會再去原型對象尋找這個屬性或方法。 ```javascript cat1.color = 'black'; cat1.color // 'black' cat2.color // 'yellow' Animal.prototype.color // 'yellow'; ``` 上面代碼中，實例對象`cat1`的`color`屬性改為`black`，就使得它不再去原型對象讀取`color`屬性，后者的值依然為`yellow`。 總結一下，原型對象的作用，就是定義所有實例對象共享的屬性和方法。這也是它被稱為原型對象的原因，而實例對象可以視作從原型對象衍生出來的子對象。 ```javascript Animal.prototype.walk = function () { console.log(this.name + ' is walking'); }; ``` 上面代碼中，`Animal.prototype`對象上面定義了一個`walk`方法，這個方法將可以在所有`Animal`實例對象上面調用。 ### 原型鏈 JavaScript 規定，所有對象都有自己的原型對象（prototype）。一方面，任何一個對象，都可以充當其他對象的原型；另一方面，由于原型對象也是對象，所以它也有自己的原型。因此，就會形成一個“原型鏈”（prototype chain）：對象到原型，再到原型的原型…… 如果一層層地上溯，所有對象的原型最終都可以上溯到`Object.prototype`，即`Object`構造函數的`prototype`屬性。也就是說，所有對象都繼承了`Object.prototype`的屬性。這就是所有對象都有`valueOf`和`toString`方法的原因，因為這是從`Object.prototype`繼承的。 那么，`Object.prototype`對象有沒有它的原型呢？回答是`Object.prototype`的原型是`null`。`null`沒有任何屬性和方法，也沒有自己的原型。因此，原型鏈的盡頭就是`null`。 ```javascript Object.getPrototypeOf(Object.prototype) // null ``` 上面代碼表示，`Object.prototype`對象的原型是`null`，由于`null`沒有任何屬性，所以原型鏈到此為止。`Object.getPrototypeOf`方法返回參數對象的原型，具體介紹請看后文。 讀取對象的某個屬性時，JavaScript 引擎先尋找對象本身的屬性，如果找不到，就到它的原型去找，如果還是找不到，就到原型的原型去找。如果直到最頂層的`Object.prototype`還是找不到，則返回`undefined`。如果對象自身和它的原型，都定義了一個同名屬性，那么優先讀取對象自身的屬性，這叫做“覆蓋”（overriding）。 注意，一級級向上，在整個原型鏈上尋找某個屬性，對性能是有影響的。所尋找的屬性在越上層的原型對象，對性能的影響越大。如果尋找某個不存在的屬性，將會遍歷整個原型鏈。 舉例來說，如果讓構造函數的`prototype`屬性指向一個數組，就意味著實例對象可以調用數組方法。 ```javascript var MyArray = function () {}; MyArray.prototype = new Array(); MyArray.prototype.constructor = MyArray; var mine = new MyArray(); mine.push(1, 2, 3); mine.length // 3 mine instanceof Array // true ``` 上面代碼中，`mine`是構造函數`MyArray`的實例對象，由于`MyArray.prototype`指向一個數組實例，使得`mine`可以調用數組方法（這些方法定義在數組實例的`prototype`對象上面）。最后那行`instanceof`表達式，用來比較一個對象是否為某個構造函數的實例，結果就是證明`mine`為`Array`的實例，`instanceof`運算符的詳細解釋詳見后文。 上面代碼還出現了原型對象的`constructor`屬性，這個屬性的含義下一節就來解釋。 ### constructor 屬性 `prototype`對象有一個`constructor`屬性，默認指向`prototype`對象所在的構造函數。 ```javascript function P() {} P.prototype.constructor === P // true ``` 由于`constructor`屬性定義在`prototype`對象上面，意味著可以被所有實例對象繼承。 ```javascript function P() {} var p = new P(); p.constructor === P // true p.constructor === P.prototype.constructor // true p.hasOwnProperty('constructor') // false ``` 上面代碼中，`p`是構造函數`P`的實例對象，但是`p`自身沒有`constructor`屬性，該屬性其實是讀取原型鏈上面的`P.prototype.constructor`屬性。 `constructor`屬性的作用是，可以得知某個實例對象，到底是哪一個構造函數產生的。 ```javascript function F() {}; var f = new F(); f.constructor === F // true f.constructor === RegExp // false ``` 上面代碼中，`constructor`屬性確定了實例對象`f`的構造函數是`F`，而不是`RegExp`。 另一方面，有了`constructor`屬性，就可以從一個實例對象新建另一個實例。 ```javascript function Constr() {} var x = new Constr(); var y = new x.constructor(); y instanceof Constr // true ``` 上面代碼中，`x`是構造函數`Constr`的實例，可以從`x.constructor`間接調用構造函數。這使得在實例方法中，調用自身的構造函數成為可能。 ```javascript Constr.prototype.createCopy = function () { return new this.constructor(); }; ``` 上面代碼中，`createCopy`方法調用構造函數，新建另一個實例。 `constructor`屬性表示原型對象與構造函數之間的關聯關系，如果修改了原型對象，一般會同時修改`constructor`屬性，防止引用的時候出錯。 ```javascript function Person(name) { this.name = name; } Person.prototype.constructor === Person // true Person.prototype = { method: function () {} }; Person.prototype.constructor === Person // false Person.prototype.constructor === Object // true ``` 上面代碼中，構造函數`Person`的原型對象改掉了，但是沒有修改`constructor`屬性，導致這個屬性不再指向`Person`。由于`Person`的新原型是一個普通對象，而普通對象的`constructor`屬性指向`Object`構造函數，導致`Person.prototype.constructor`變成了`Object`。 所以，修改原型對象時，一般要同時修改`constructor`屬性的指向。 ```javascript // 壞的寫法 C.prototype = { method1: function (...) { ... }, // ... }; // 好的寫法 C.prototype = { constructor: C, method1: function (...) { ... }, // ... }; // 更好的寫法 C.prototype.method1 = function (...) { ... }; ``` 上面代碼中，要么將`constructor`屬性重新指向原來的構造函數，要么只在原型對象上添加方法，這樣可以保證`instanceof`運算符不會失真。 如果不能確定`constructor`屬性是什么函數，還有一個辦法：通過`name`屬性，從實例得到構造函數的名稱。 ```javascript function Foo() {} var f = new Foo(); f.constructor.name // "Foo" ``` ## instanceof 運算符 `instanceof`運算符返回一個布爾值，表示對象是否為某個構造函數的實例。 ```javascript var v = new Vehicle(); v instanceof Vehicle // true ``` 上面代碼中，對象`v`是構造函數`Vehicle`的實例，所以返回`true`。 `instanceof`運算符的左邊是實例對象，右邊是構造函數。它會檢查右邊構造函數的原型對象（prototype），是否在左邊對象的原型鏈上。因此，下面兩種寫法是等價的。 ```javascript v instanceof Vehicle // 等同于 Vehicle.prototype.isPrototypeOf(v) ``` 上面代碼中，`Vehicle`是對象`v`的構造函數，它的原型對象是`Vehicle.prototype`，`isPrototypeOf()`方法是 JavaScript 提供的原生方法，用于檢查某個對象是否為另一個對象的原型，詳細解釋見后文。 由于`instanceof`檢查整個原型鏈，因此同一個實例對象，可能會對多個構造函數都返回`true`。 ```javascript var d = new Date(); d instanceof Date // true d instanceof Object // true ``` 上面代碼中，`d`同時是`Date`和`Object`的實例，因此對這兩個構造函數都返回`true`。 由于任意對象（除了`null`）都是`Object`的實例，所以`instanceof`運算符可以判斷一個值是否為非`null`的對象。 ```javascript var obj = { foo: 123 }; obj instanceof Object // true null instanceof Object // false ``` 上面代碼中，除了`null`，其他對象的`instanceOf Object`的運算結果都是`true`。 `instanceof`的原理是檢查右邊構造函數的`prototype`屬性，是否在左邊對象的原型鏈上。有一種特殊情況，就是左邊對象的原型鏈上，只有`null`對象。這時，`instanceof`判斷會失真。 ```javascript var obj = Object.create(null); typeof obj // "object" obj instanceof Object // false ``` 上面代碼中，`Object.create(null)`返回一個新對象`obj`，它的原型是`null`（`Object.create()`的詳細介紹見后文）。右邊的構造函數`Object`的`prototype`屬性，不在左邊的原型鏈上，因此`instanceof`就認為`obj`不是`Object`的實例。這是唯一的`instanceof`運算符判斷會失真的情況（一個對象的原型是`null`）。 `instanceof`運算符的一個用處，是判斷值的類型。 ```javascript var x = [1, 2, 3]; var y = {}; x instanceof Array // true y instanceof Object // true ``` 上面代碼中，`instanceof`運算符判斷，變量`x`是數組，變量`y`是對象。 注意，`instanceof`運算符只能用于對象，不適用原始類型的值。 ```javascript var s = 'hello'; s instanceof String // false ``` 上面代碼中，字符串不是`String`對象的實例（因為字符串不是對象），所以返回`false`。 此外，對于`undefined`和`null`，`instanceof`運算符總是返回`false`。 ```javascript undefined instanceof Object // false null instanceof Object // false ``` 利用`instanceof`運算符，還可以巧妙地解決，調用構造函數時，忘了加`new`命令的問題。 ```javascript function Fubar (foo, bar) { if (this instanceof Fubar) { this._foo = foo; this._bar = bar; } else { return new Fubar(foo, bar); } } ``` 上面代碼使用`instanceof`運算符，在函數體內部判斷`this`關鍵字是否為構造函數`Fubar`的實例。如果不是，就表明忘了加`new`命令。 ## 構造函數的繼承 讓一個構造函數繼承另一個構造函數，是非常常見的需求。這可以分成兩步實現。第一步是在子類的構造函數中，調用父類的構造函數。 ```javascript function Sub(value) { Super.call(this); this.prop = value; } ``` 上面代碼中，`Sub`是子類的構造函數，`this`是子類的實例。在實例上調用父類的構造函數`Super`，就會讓子類實例具有父類實例的屬性。 第二步，是讓子類的原型指向父類的原型，這樣子類就可以繼承父類原型。 ```javascript Sub.prototype = Object.create(Super.prototype); Sub.prototype.constructor = Sub; Sub.prototype.method = '...'; ``` 上面代碼中，`Sub.prototype`是子類的原型，要將它賦值為`Object.create(Super.prototype)`，而不是直接等于`Super.prototype`。否則后面兩行對`Sub.prototype`的操作，會連父類的原型`Super.prototype`一起修改掉。 另外一種寫法是`Sub.prototype`等于一個父類實例。 ```javascript Sub.prototype = new Super(); ``` 上面這種寫法也有繼承的效果，但是子類會具有父類實例的方法。有時，這可能不是我們需要的，所以不推薦使用這種寫法。 舉例來說，下面是一個`Shape`構造函數。 ```javascript function Shape() { this.x = 0; this.y = 0; } Shape.prototype.move = function (x, y) { this.x += x; this.y += y; console.info('Shape moved.'); }; ``` 我們需要讓`Rectangle`構造函數繼承`Shape`。 ```javascript // 第一步，子類繼承父類的實例 function Rectangle() { Shape.call(this); // 調用父類構造函數 } // 另一種寫法 function Rectangle() { this.base = Shape; this.base(); } // 第二步，子類繼承父類的原型 Rectangle.prototype = Object.create(Shape.prototype); Rectangle.prototype.constructor = Rectangle; ``` 采用這樣的寫法以后，`instanceof`運算符會對子類和父類的構造函數，都返回`true`。 ```javascript var rect = new Rectangle(); rect instanceof Rectangle // true rect instanceof Shape // true ``` 上面代碼中，子類是整體繼承父類。有時只需要單個方法的繼承，這時可以采用下面的寫法。 ```javascript ClassB.prototype.print = function() { ClassA.prototype.print.call(this); // some code } ``` 上面代碼中，子類`B`的`print`方法先調用父類`A`的`print`方法，再部署自己的代碼。這就等于繼承了父類`A`的`print`方法。 ## 多重繼承 JavaScript 不提供多重繼承功能，即不允許一個對象同時繼承多個對象。但是，可以通過變通方法，實現這個功能。 ```javascript function M1() { this.hello = 'hello'; } function M2() { this.world = 'world'; } function S() { M1.call(this); M2.call(this); } // 繼承 M1 S.prototype = Object.create(M1.prototype); // 繼承鏈上加入 M2 Object.assign(S.prototype, M2.prototype); // 指定構造函數 S.prototype.constructor = S; var s = new S(); s.hello // 'hello' s.world // 'world' ``` 上面代碼中，子類`S`同時繼承了父類`M1`和`M2`。這種模式又稱為 Mixin（混入）。 ## 模塊 隨著網站逐漸變成“互聯網應用程序”，嵌入網頁的 JavaScript 代碼越來越龐大，越來越復雜。網頁越來越像桌面程序，需要一個團隊分工協作、進度管理、單元測試等等……開發者必須使用軟件工程的方法，管理網頁的業務邏輯。 JavaScript 模塊化編程，已經成為一個迫切的需求。理想情況下，開發者只需要實現核心的業務邏輯，其他都可以加載別人已經寫好的模塊。 但是，JavaScript 不是一種模塊化編程語言，ES6 才開始支持“類”和“模塊”。下面介紹傳統的做法，如何利用對象實現模塊的效果。 ### 基本的實現方法 模塊是實現特定功能的一組屬性和方法的封裝。 簡單的做法是把模塊寫成一個對象，所有的模塊成員都放到這個對象里面。 ```javascript var module1 = new Object({ 　_count : 0, 　m1 : function (){ 　　//... 　}, 　m2 : function (){ 　//... 　} }); ``` 上面的函數`m1`和`m2`，都封裝在`module1`對象里。使用的時候，就是調用這個對象的屬性。 ```javascript module1.m1(); ``` 但是，這樣的寫法會暴露所有模塊成員，內部狀態可以被外部改寫。比如，外部代碼可以直接改變內部計數器的值。 ```javascript module1._count = 5; ``` ### 封裝私有變量：構造函數的寫法 我們可以利用構造函數，封裝私有變量。 ```javascript function StringBuilder() { var buffer = []; this.add = function (str) { buffer.push(str); }; this.toString = function () { return buffer.join(''); }; } ``` 上面代碼中，`buffer`是模塊的私有變量。一旦生成實例對象，外部是無法直接訪問`buffer`的。但是，這種方法將私有變量封裝在構造函數中，導致構造函數與實例對象是一體的，總是存在于內存之中，無法在使用完成后清除。這意味著，構造函數有雙重作用，既用來塑造實例對象，又用來保存實例對象的數據，違背了構造函數與實例對象在數據上相分離的原則（即實例對象的數據，不應該保存在實例對象以外）。同時，非常耗費內存。 ```javascript function StringBuilder() { this._buffer = []; } StringBuilder.prototype = { constructor: StringBuilder, add: function (str) { this._buffer.push(str); }, toString: function () { return this._buffer.join(''); } }; ``` 這種方法將私有變量放入實例對象中，好處是看上去更自然，但是它的私有變量可以從外部讀寫，不是很安全。 ### 封裝私有變量：立即執行函數的寫法 另一種做法是使用“立即執行函數”（Immediately-Invoked Function Expression，IIFE），將相關的屬性和方法封裝在一個函數作用域里面，可以達到不暴露私有成員的目的。 ```javascript var module1 = (function () { 　var _count = 0; 　var m1 = function () { 　 //... 　}; 　var m2 = function () { 　　//... 　}; 　return { 　　m1 : m1, 　　m2 : m2 　}; })(); ``` 使用上面的寫法，外部代碼無法讀取內部的`_count`變量。 ```javascript console.info(module1._count); //undefined ``` 上面的`module1`就是 JavaScript 模塊的基本寫法。下面，再對這種寫法進行加工。 ### 模塊的放大模式 如果一個模塊很大，必須分成幾個部分，或者一個模塊需要繼承另一個模塊，這時就有必要采用“放大模式”（augmentation）。 ```javascript var module1 = (function (mod){ 　mod.m3 = function () { 　　//... 　}; 　return mod; })(module1); ``` 上面的代碼為`module1`模塊添加了一個新方法`m3()`，然后返回新的`module1`模塊。 在瀏覽器環境中，模塊的各個部分通常都是從網上獲取的，有時無法知道哪個部分會先加載。如果采用上面的寫法，第一個執行的部分有可能加載一個不存在空對象，這時就要采用"寬放大模式"（Loose augmentation）。 ```javascript var module1 = (function (mod) { 　//... 　return mod; })(window.module1 || {}); ``` 與"放大模式"相比，“寬放大模式”就是“立即執行函數”的參數可以是空對象。 ### 輸入全局變量 獨立性是模塊的重要特點，模塊內部最好不與程序的其他部分直接交互。 為了在模塊內部調用全局變量，必須顯式地將其他變量輸入模塊。 ```javascript var module1 = (function ($, YAHOO) { 　//... })(jQuery, YAHOO); ``` 上面的`module1`模塊需要使用 jQuery 庫和 YUI 庫，就把這兩個庫（其實是兩個模塊）當作參數輸入`module1`。這樣做除了保證模塊的獨立性，還使得模塊之間的依賴關系變得明顯。 立即執行函數還可以起到命名空間的作用。 ```javascript (function($, window, document) { function go(num) { } function handleEvents() { } function initialize() { } function dieCarouselDie() { } //attach to the global scope window.finalCarousel = { init : initialize, destroy : dieCarouselDie } })( jQuery, window, document ); ``` 上面代碼中，`finalCarousel`對象輸出到全局，對外暴露`init`和`destroy`接口，內部方法`go`、`handleEvents`、`initialize`、`dieCarouselDie`都是外部無法調用的。 ## 參考鏈接 - [JavaScript Modules: A Beginner’s Guide](https://medium.freecodecamp.com/javascript-modules-a-beginner-s-guide-783f7d7a5fcc), by Preethi Kasireddy