關于繼承可以樸素的理解為，通過繼承，子類可以復用父類的方法，以達到代碼重用。JavaScript 可用多種方式模擬繼承，本文先舉例介紹各種方法，后對比分析優缺點。
在 JavaScript 中，構造函數也和普通的函數一樣，可以被賦值和調用，對象冒充通過此原理來模擬繼承。
Function ClassA(name)
{
this.name = name;
this.sayHello = function(){
alert("Hello, " + this.name);
}
}
Function ClassB(name，time)
{
this.newMethod = ClassA;
this.newMethod(name);
delete this.newMethod;
this.time = time;
this.sayGoodbye = function(){
alert("Goodbye " + this.name + ",it's " + this.time + " now !");
}
}
var objA = new ClassA("Tom");
var objB = new ClassB("Jerry","11:30am");
objA.sayHello(); // output is : "Hello,Tom"
objB.sayHello(); // output is : "Hello,Jerry"
objB.sayGoodbye();// output is : "Goodbye Jerry, it ’ s 11:30am now!"
|
如清單 1 所示，將 ClassA 的構造函數賦值為 ClassB 的一個普通方法，然后調用它，由于此時 this 指向的是 ClassB 的實例，那么 ClassB 的實例就會收到 ClassA 構造函數中定義的屬性和方法，從而達到了繼承的效果。
需要注意的是，應及時刪除臨時引用（this.newMethod），以防止 ClassB 更改 ClassA 類對象的引用。因為對臨時引用（this.newMethod）的更改，也會導致 ClassA 的結構變化。并且 ClassB 的所有新屬性和新方法，應該在刪除臨時引用后定義，否則，可能會覆蓋父類的相關屬性和方法。
認識到對象冒充的本質后，可以采用 JavaScript 中的 call 或者 apply 函數達到同樣的效果，如清單 2 代碼所示。其原理也是在調用 ClassA 的構造函數時，將 this 指向 ClassB 的實例。
Function ClassB(name,time)
{
ClassA.call(this，name); // 或者 ClassA.apply(this,[name]);
this.time = time;
this.sayGoodbye = function(){
alert("Goodbye " + this.name + ",it's " + this.time + " now !");
}
}
|
JavaScript 中的每個對象都包含一個原型對象（prototype），指向對某個對象的引用，而由于原型對象本身也是對象，則也會包含對它的原型的引用，由此構成一條原型鏈。原型鏈終止于內建 Object 類的原型。當要讀取某個對象的屬性或方法時，JavaScript 首先在該對象中查找，若沒有找到，便在該對象的原型中繼續查找，若仍未找到，便順著原型鏈繼續在原型的原型中查找，直到查找到或到達原型鏈的盡頭。這樣的系統被稱為原型繼承。而基于原型的繼承，則是指利用了 prototype 或者說以某種方式覆蓋了 prototype，從而達到屬性及方法復用的目的。如下所示：
Function ClassA()
{
this.name = "";
this.sayHello = function(){
alert("Hello, " + this.name);
}
}
Function ClassB(){};
ClassB.prototype = new ClassA();
var objB = new ClassB();
objB.name = "Jerry";
objB.sayHello(); //output: "Hello,Jerry";
|
示例代碼中將 ClassB 的 prototype 指向 ClassA 的實例，其原型鏈如圖 1 所示，這樣 ClassB 便擁有了 ClassA 所有的屬性和方法，可以自由的賦值和調用。
對象冒充和基于原型的方式都可以讓子類復用父類的代碼以模擬繼承，但這兩種方法均各有利弊。
利用對象冒充，可以方便的實現多繼承，只需要對所有需要繼承的父類重復進行賦值流程便可。但這樣卻有著有明顯的性能缺陷，因為在利用對象冒充模擬繼承時，每個實例都會擁有一份父類成員變量和方法的副本，而成員方法只是一段對變量操作的可執行文本區域而已，這段區域不用為每個實例復制一份，所有的實例均可共享，這就造成了對內存資源的極度浪費。并且對象冒充也無法繼承 prototype 域的變量和方法。
而基于原型的繼承則可以使子類擁有一條完整的原型鏈，并且所有子類實例的原型都指向同一引用，相對于對象冒充，可極大的節省內存開銷。但基于原型繼承的缺陷也相當明顯，就是父類的構造函數不能有參數，因為對子類 prototype 域的修改需在聲明子類對象之后才能進行，而用子類構造函數的參數去初始化父類構造函數的屬性是無法實現的。
因此可以結合二者的優點，采用混合的方式模擬繼承，即用對象冒充的方式給屬性賦值，用原型鏈的方式繼承方法，示例代碼如下：
Function ClassA(name){
this.name = name;
}
ClassA.prototype.sayHello = function(){
alert("Hello, " + this.name);
}
Function ClassB(name，time){
ClassA.call(this, name);
this.time = time;
}
ClassB.prototype = new ClassA();
ClassB.prototype.sayGoodbye = function(){
alert("Goodbye " + this.name + ",it's " + this.time + " now !");
}
var objA = new ClassA("Tom");
var objB = new ClassB("Jerry","11:30am");
objA. sayHello();// output is: "Hello, Tom"
objB.sayHello(); // output is: "Hello, Jerry"
objB.sayGoodbye();//output is: "Goodbye Jerry,it ’ s 11:30am now !"
|
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
