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

時間 2019-12-06

原文原文鏈接

1、前言

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

2、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);
};

一、原型鏈繼承 編程

核心: 將父類的實例做爲子類的原型數組

//定義動物貓
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.很是純粹的繼承關係，實例是子類的實例，也是父類的實例； app

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

3.簡單，易於實現；函數

缺點: 性能

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

2.沒法實現多繼承；

3.建立子類時，沒法向父類構造函數傳參；

4.來自原型對象的屬性是全部實例所共享；

二、構造繼承

核心：使用父類的構造函數來加強子類實例，等因而複製父類的實例屬性給子類（沒用到原型）

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. 沒法實現函數複用，每一個子類都有父類實例函數的副本，影響性能；

三、實例繼承

核心：爲父類實例添加新特性，做爲子類實例返回

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.沒法實現多繼承；

四、拷貝繼承

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 訪問到）；

五、組合繼承

核心：經過調用父類構造，繼承父類的屬性並保留傳參的優勢，而後經過將父類實例做爲子類原型，實現函數複用

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. 調用了兩次父類構造函數，生成了兩份實例（子類實例將子類原型上的那份屏蔽了）；

六、寄生組合繼承

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

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.實現較爲複雜；

3、實現子類調用父類方法的解決方案

上述的幾種繼承方式，如要實現子類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), 也就是必須得在子類中使用父類對象，這種以硬編碼方式的調用，雖然能解決問題，但確不是特別優雅。

4、優化後的子類調用父類方法的實現方式

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

父類:

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.**的用法調用，而不須要在子類中出現父類名稱的硬編碼，但也存在缺點，不可以實現多繼承。