一、前言
最近在項目中，前端框架使用JavaScript面向對象編程，遇到了諸多問題，其中最典型的問題就是子類調用父類（super class）同名方法，也就是如C#中子類中調用父類函數base.**。以下摘錄了園友幻天芒對JavaScript實現繼承的幾種方式 的具體介紹以作備忘。
二、JavaScript實現繼承的幾種方式
既然要實現繼承，那么我們首先得有一個基類，代碼如下:
-
// 定義一個動物類
-
function Animal(name) {
-
// 屬性
-
this.name = name || 'Animal';
-
// 實例方法
-
this.sleep = function () {
-
console.log(this.name + '正在睡覺！');
-
}
-
}
-
// 原型方法
-
Animal.prototype.eat = function (food) {
-
console.log(this.name + '正在吃：' + food);
-
};
1、原型鏈繼承
核心: 將父類的實例作為子類的原型
-
//定義動物貓
-
function Cat() {
-
}
-
Cat.prototype = new Animal();
-
Cat.prototype.name = 'cat';
-
-
// Test Code
-
var cat = new Cat();
-
console.log(cat.name); //cat
-
cat.eat('fish'); //cat正在吃:fish
-
cat.sleep(); //cat正在睡覺
-
console.log(cat instanceof Animal); //true
-
console.log(cat instanceof Cat); //true
特點:
1.非常純粹的繼承關系，實例是子類的實例，也是父類的實例；
2.父類新增原型方法/原型屬性，子類都能訪問到；
3.簡單，易於實現；
缺點:
1.要想為子類新增屬性和方法，必須要在new Animal()這樣的語句之后執行，不能放到構造器中
2.無法實現多繼承；
3.創建子類時，無法向父類構造函數傳參；
4.來自原型對象的屬性是所有實例所共享；
2、構造繼承
核心：使用父類的構造函數來增強子類實例，等於是復制父類的實例屬性給子類（沒用到原型）
-
function Cat(name) {
-
Animal.call(this);
-
this.name = name || 'Tom';
-
}
-
-
// Test Code
-
var cat = new Cat();
-
console.log(cat.name);
-
console.log(cat.sleep());
-
console.log(cat instanceof Animal); // false
-
console.log(cat instanceof Cat); // true
特點:
1. 解決了1中，子類實例共享父類引用屬性的問題；
2. 創建子類實例時，可以向父類傳遞參數；
3. 可以實現多繼承（call多個父類對象）；
缺點:
1. 實例並不是父類的實例，只是子類的實例；
2. 只能繼承父類的實例屬性和方法，不能繼承原型屬性/方法；
3. 無法實現函數復用，每個子類都有父類實例函數的副本，影響性能；
3、實例繼承
核心：為父類實例添加新特性，作為子類實例返回
-
function Cat(name) {
-
var instance = new Animal();
-
instance.name = name || 'Tom';
-
return instance;
-
}
-
-
// Test Code
-
var cat = new Cat();
-
console.log(cat.name);
-
console.log(cat.sleep());
-
console.log(cat instanceof Animal); // true
-
console.log(cat instanceof Cat); // false
特點:
1. 不限制調用方式，不管是new 子類()還是子類(),返回的對象具有相同的效果；
缺點:
2.無法實現多繼承；
4、拷貝繼承
-
function Cat(name) {
-
var animal = new Animal();
-
for (var p in animal) {
-
Cat.prototype[p] = animal[p];
-
}
-
Cat.prototype.name = name || 'Tom';
-
}
-
-
// Test Code
-
var cat = new Cat();
-
console.log(cat.name);
-
console.log(cat.sleep());
-
console.log(cat instanceof Animal); // false
-
console.log(cat instanceof Cat); // true
特點:
1. 支持多繼承；
缺點:
1. 效率較低，內存占用高（因為要拷貝父類的屬性）；
2. 無法獲取父類不可枚舉的方法（不可枚舉方法，不能使用for in 訪問到）；
5、組合繼承
核心：通過調用父類構造，繼承父類的屬性並保留傳參的優點，然后通過將父類實例作為子類原型，實現函數復用
-
function Cat(name) {
-
Animal.call(this);
-
this.name = name || 'Tom';
-
}
-
Cat.prototype = new Animal();
-
Cat.prototype.constructor = Cat;
-
-
// Test Code
-
var cat = new Cat();
-
console.log(cat.name);
-
console.log(cat.sleep());
-
console.log(cat instanceof Animal); // true
-
console.log(cat instanceof Cat); // true
特點:
1.彌補了方式2的缺陷，可以繼承實例屬性/方法，也可以繼承原型屬性/方法；
2.既是子類的實例，也是父類的實例；
3.不存在引用屬性共享問題；
4.可傳參；
5.函數可復用；
缺點:
1. 調用了兩次父類構造函數，生成了兩份實例（子類實例將子類原型上的那份屏蔽了）；
6、寄生組合繼承
核心：通過寄生方式，砍掉父類的實例屬性，這樣，在調用兩次父類的構造的時候，就不會初始化兩次實例方法/屬性，避免的組合繼承的缺點
-
function Cat(name){
-
Animal.call(this);
-
this.name = name || 'Tom';
-
}
-
(function(){
-
// 創建一個沒有實例方法的類
-
var Super = function(){};
-
Super.prototype = Animal.prototype;
-
//將實例作為子類的原型
-
Cat.prototype = new Super();
-
Cat.prototype.constructor = Cat; // 需要修復下構造函數
-
})();
-
-
// Test Code
-
var cat = new Cat();
-
console.log(cat.name);
-
console.log(cat.sleep());
-
console.log(cat instanceof Animal); // true
-
console.log(cat instanceof Cat); //true
特點:
1. 堪稱完美；
缺點:
1.實現較為復雜；
三、實現子類調用父類方法的解決方案
上述的幾種繼承方式，如要實現子類Cat，在eat方法中調用父類Animal的eat方法，該如何實現呢？ 以寄生組合繼承為例:
-
// 定義一個動物類
-
function Animal(name) {
-
// 屬性
-
this.name = name || 'Animal';
-
// 實例方法
-
this.sleep = function () {
-
console.log(this.name + '正在睡覺！');
-
}
-
}
-
// 原型方法
-
Animal.prototype.eat = function (food) {
-
console.log("Father." + this.name + '正在吃：' + food);
-
};
-
function Cat(name) {
-
Animal.call(this);
-
this.name = name || 'Tom';
-
}
-
(function () {
-
// 創建一個沒有實例方法的類
-
var Super = function () { };
-
Super.prototype = Animal.prototype;
-
//將實例作為子類的原型
-
Cat.prototype = new Super();
-
Cat.prototype.constructor = Cat; // 需要修復下構造函數
-
Cat.prototype.eat = function (food) {
-
console.log("SubClass." + this.name + '正在吃：' + food);
-
Super.prototype.eat.apply(this, Array.prototype.slice.apply(arguments));
-
};
-
})();
-
-
// Test Code
-
var cat = new Cat();
-
console.log(cat.name);
-
cat.eat('fish'); //cat正在吃:fish
-
console.log(cat instanceof Animal); // true
-
console.log(cat instanceof Cat); //true
測試結果:
其中的關鍵代碼在於:
我們看到，子類要想調用父類的方法，必須使用父類原型方法的apply(Super.prototype.eat.apply), 也就是必須得在子類中使用父類對象，這種以硬編碼方式的調用，雖然能解決問題，但確不是特別優雅。
四、優化后的子類調用父類方法的實現方式
以上的繼承方式，都不能實現子類調用父類方法， 在重寫子類原型函數后，會將繼承父類函數給覆蓋。先來看實例:
父類:
-
var Animal = Class.extend({
-
construct: function (name) {
-
arguments.callee.father.construct.call(this);
-
this.name = name || "Animal";
-
},
-
eat: function (food) {
-
console.log("Father." + this.name + '正在吃：' + food);
-
},
-
sleep: function () {
-
console.log("Father." + this.name + '正在睡覺！');
-
}
-
});
子類:
-
var Cat = Animal.extend({
-
construct: function () {
-
arguments.callee.father.construct.call(this,"Cat");
-
},
-
eat: function (food) {
-
console.log("SubClass." + this.name + '正在吃：' + food);
-
arguments.callee.father.eat.call(this, food);
-
},
-
sleep: function () {
-
console.log("SubClass." + this.name + '正在睡覺！');
-
arguments.callee.father.sleep.call(this);
-
}
-
});
測試代碼:
-
// Test Code
-
var cat = new Cat();
-
console.log(cat.name);
-
console.log(cat.eat('fish'));
-
console.log(cat.sleep());
-
console.log(cat instanceof Animal); // true
-
console.log(cat instanceof Cat); //true
輸出結果:
在實例中，我們看到cat實例對象，在eat函數中，既調用了Cat類的eat函數，也調用了Animal類的eat函數，實現了我們想要達到的效果。實現該種繼承的關鍵點在於Class基類中的處理，為子類每個function對象，都添加了father屬性，指向父類的原型（prototype）
優化的設計，它使用了JavaScript中一點鮮為人知的特性：callee。
在任何方法執行過程中，你可以查看那些通過"arguments"數組傳入的參數，這是眾所周知的，但很少有人知道"arguments"數組包含一個名為"callee"的屬性，它作為一個引用指向了當前正在被執行的function，而后通過"father"便可以方便的獲得當前被執行function所在類的父類。這是非常重要的，因為它是獲得此引用的唯一途徑（通過"this"對象獲得的function引用總是指向被子類重載的function，而后者並非全是正在被執行的function）。
這種實現方式類似於C#中base.**的用法調用，而不需要在子類中出現父類名稱的硬編碼，但也存在缺點，不能夠實現多繼承。
五、總結
附錄一、Class基類
-
//定義最頂級類,用於js繼承基類
-
function Class() { }
-
Class.prototype.construct = function () { };
-
Class.extend = function (def) {
-
var subClass = function () {
-
if (arguments[0] !== Class) { this.construct.apply(this, arguments); }
-
};
-
-
var proto = new this(Class);
-
-
var superClass = this.prototype;
-
for (var n in def) {
-
var item = def[n];
-
if (item instanceof Function) item.father = superClass;
-
proto[n] = item;
-
}
-
subClass.prototype = proto;
-
-
//賦給這個新的子類同樣的靜態extend方法
-
subClass.extend = this.extend;
-
return subClass;
-
};
附錄二、寄生組合繼承實現多繼承，並實現子類調用父類方法案例
-
// 定義一個房間類
-
function Room() {
-
// 屬性
-
this.name = name || 'Zoom';
-
}
-
// 原型方法
-
Room.prototype.open = function () {
-
console.log("Father." + this.name + '正在開門');
-
};
-
-
-
// 定義一個動物類
-
function Animal(name) {
-
// 屬性
-
this.name = name || 'Animal';
-
// 實例方法
-
this.sleep = function () {
-
console.log(this.name + '正在睡覺！');
-
}
-
}
-
// 原型方法
-
Animal.prototype.eat = function (food) {
-
console.log("Father." + this.name + '正在吃：' + food);
-
};
-
function Cat(name) {
-
Animal.call(this);
-
Room.call(this);
-
this.name = name || 'Tom';
-
}
-
// Cat類
-
(function () {
-
Cat.prototype.constructor = Cat;
-
-
Cat.prototype.eat = function (food) {
-
console.log("SubClass." + this.name + '正在吃：' + food);
-
Animal.prototype.eat.apply(this, Array.prototype.slice.apply(arguments));
-
};
-
-
Cat.prototype.open = function () {
-
console.log("SubClass." + this.name + '正在開門');
-
Room.prototype.open.apply(this, Array.prototype.slice.apply(arguments));
-
};
-
})();
-
-
// Test Code
-
var cat = new Cat();
-
console.log(cat.name);
-
cat.open();
-
cat.eat('fish'); //cat正在吃:fish
-
console.log(cat instanceof Animal); // false
-
console.log(cat instanceof Cat); //true
測試結果：
附錄三、參考文章