JavaScript中子類調用父類方法的實現

標籤：函數   返回   www   繼承   避免   OLE   tps   添加   round   

一、前言

最近在項目中，前端架構使用JavaScript物件導向編程，遇到了諸多問題，其中最典型的問題就是子類調用父類（super class）同名方法，也就是如C#中子類中調用父類函數Base.**。以下摘錄了園友幻天芒對JavaScript實現繼承的幾種方式 的具體介紹以作備忘，但是這幾種方式，都不能實現子類調用父類方法。

二、JavaScript實現繼承的幾種方式

既然要實現繼承，那麼我們首先得有一個基類，代碼如下:

1. // 定義一個動物類
2. ????function Animal(name) {
3. ????????// 屬性
4. ????????this.name = name || ‘Animal‘;
5. ????????// 執行個體方法
6. ????????this.sleep = function () {
7. ????????????console.log(this.name + ‘正在睡覺！‘);
8. ????????}
9. ????}
10. ????// 原型方法
11. ????Animal.prototype.eat = function (food) {
12. ????????console.log(this.name + ‘正在吃：‘ + food);
13. ????};

1、原型鏈繼承

核心: 將父類的執行個體作為子類的原型

1. //定義動物貓
2. function Cat() {
3. }
4. Cat.prototype = new Animal();
5. Cat.prototype.name = ‘cat‘;
6. ?
7. //　Test Code
8. var cat = new Cat();
9. console.log(cat.name); //cat
10. cat.eat(‘fish‘); //cat正在吃:fish
11. cat.sleep(); //cat正在睡覺
12. console.log(cat instanceof Animal); //true
13. console.log(cat instanceof Cat); //true

特點:

1.非常純粹的繼承關係，執行個體是子類的執行個體，也是父類的執行個體；

2.父類新增原型方法/原型屬性，子類都能訪問到；

3.簡單，易於實現；

缺點:

1.要想為子類新增屬性和方法，必須要在new Animal()這樣的語句之後執行，不能放到構造器中

2.無法實現多繼承；

3.建立子類時，無法向父類建構函式傳參；

4.來自原型對象的屬性是所有執行個體所共用；

2、構造繼承

核心：使用父類的建構函式來增強子類執行個體，等於是複製父類的執行個體屬性給子類（沒用到原型）

1. function Cat(name) {
2. ????Animal.call(this);
3. ????this.name = name || ‘Tom‘;
4. }
5. ?
6. // Test Code
7. var cat = new Cat();
8. console.log(cat.name);
9. console.log(cat.sleep());
10. console.log(cat instanceof Animal); // false
11. console.log(cat instanceof Cat); // true

特點:

1. 解決了1中，子類執行個體共用父類引用屬性的問題；

2. 建立子類執行個體時，可以向父類傳遞參數；

3. 可以實現多繼承（call多個父類對象）；

缺點:

1. 執行個體並不是父類的執行個體，只是子類的執行個體；

2. 只能繼承父類的執行個體屬性和方法，不能繼承原型屬性/方法；

3. 無法實現函數複用，每個子類都有父類執行個體函數的副本，影響效能；

3、執行個體繼承

核心：為父類執行個體添加新特性，作為子類執行個體返回

1. function Cat(name) {
2. ????var instance = new Animal();
3. ????instance.name = name || ‘Tom‘;
4. ????return instance;
5. }
6. ?
7. // Test Code
8. var cat = new Cat();
9. console.log(cat.name);
10. console.log(cat.sleep());
11. console.log(cat instanceof Animal); // true
12. console.log(cat instanceof Cat); // false

特點:

1. 不限制調用方式，不管是new 子類()還是子類(),返回的對象具有相同的效果；

缺點:

2.無法實現多繼承；

4、拷貝繼承

1. function Cat(name) {
2. ????var animal = new Animal();
3. ????for (var p in animal) {
4. ????????Cat.prototype[p] = animal[p];
5. ????}
6. ????Cat.prototype.name = name || ‘Tom‘;
7. }
8. ?
9. // Test Code
10. var cat = new Cat();
11. console.log(cat.name);
12. console.log(cat.sleep());
13. console.log(cat instanceof Animal); // false
14. console.log(cat instanceof Cat); // true

特點:

1. 支援多繼承；

缺點:

1. 效率較低，記憶體佔用高（因為要拷貝父類的屬性）；

2. 無法擷取父類不可枚舉的方法（不可枚舉方法，不能使用for in 訪問到）；

5、組合繼承

核心：通過調用父類構造，繼承父類的屬性並保留傳參的優點，然後通過將父類執行個體作為子類原型，實現函數複用

1. function Cat(name) {
2. ????Animal.call(this);
3. ????this.name = name || ‘Tom‘;
4. }
5. Cat.prototype = new Animal();
6. Cat.prototype.constructor = Cat;
7. ?
8. // Test Code
9. var cat = new Cat();
10. console.log(cat.name);
11. console.log(cat.sleep());
12. console.log(cat instanceof Animal); // true
13. console.log(cat instanceof Cat); // true

特點:

1.彌補了方式2的缺陷，可以繼承執行個體屬性/方法，也可以繼承原型屬性/方法；

2.既是子類的執行個體，也是父類的執行個體；

3.不存在引用屬性共用問題；

4.可傳參；

5.函數可複用；

缺點:

1. 調用了兩次父類建構函式，產生了兩份執行個體（子類執行個體將子類原型上的那份屏蔽了）；

6、寄生組合繼承

核心：通過寄生方式，砍掉父類的執行個體屬性，這樣，在調用兩次父類的構造的時候，就不會初始化兩次執行個體方法/屬性，避免的組合繼承的缺點

1. function Cat(name){
2. ????Animal.call(this);
3. ????this.name = name || ‘Tom‘;
4. }
5. (function(){
6. ????// 建立一個沒有執行個體方法的類
7. ????var Super = function(){};
8. ????Super.prototype = Animal.prototype;
9. ????//將執行個體作為子類的原型
10. ????Cat.prototype = new Super();
11. ????Cat.prototype.constructor = Cat; // 需要修複下建構函式
12. })();
13. ?
14. // Test Code
15. var cat = new Cat();
16. console.log(cat.name);
17. console.log(cat.sleep());
18. console.log(cat instanceof Animal); // true
19. console.log(cat instanceof Cat); //true

特點:

1. 堪稱完美；

缺點:

1. 實現較為複雜；

三、JavaScript中子類調用父類方法的解決方案

以上的繼承方式，都不實現子類調用父類方法， 在重寫子類原型函數後，會將繼承父類函數給覆蓋。

四、總結

附錄一、Class基類

1. //定義最頂級類,用於js繼承基類
2. function Class() { }
3. Class.prototype.construct = function () { };
4. Class.extend = function (def) {
5. ????var subClass = function () {
6. ????????if (arguments[0] !== Class) { this.construct.apply(this, arguments); }
7. ????};
8. ?
9. ????var proto = newthis(Class);
10. ?
11. ????var superClass = this.prototype;
12. ????for (var n in def) {
13. ????????var item = def[n];
14. ????????if (item instanceofFunction) item.father = superClass;
15. ????????proto[n] = item;
16. ????}
17. ????subClass.prototype = proto;
18. ?
19. ????//賦給這個新的子類同樣的靜態extend方法
20. ????subClass.extend = this.extend;
21. ????return subClass;
22. };

附錄二、參考文章

????39991173

JavaScript中子類調用父類方法的實現