JavaScript中子類調用父類方法的實現
一、前言
最近在項目中,前端框架使用JavaScript面向對象編程,遇到了諸多問題,其中最典型的問題就是子類調用父類(super class)同名方法,也就是如C#中子類中調用父類函數Base.**。以下摘錄了園友幻天芒 對JavaScript實現繼承的幾種方式 的具體介紹以作備忘,但是這幾種方式,都不能實現子類調用父類方法。
二、JavaScript實現繼承的幾種方式
既然要實現繼承,那麽我們首先得有一個基類,代碼如下:
- // 定義一個動物類
- ????function Animal(name) {
- ????????// 屬性
- ????????this.name
- ????????// 實例方法
- ????????this.sleep = function () {
- ????????????console.log(this.name + ‘正在睡覺!‘);
- ????????}
- ????}
- ????// 原型方法
- ????Animal.prototype.eat = function (food) {
- ????????console.log(this.name + ‘正在吃:‘ + food);
- ????};
1、原型鏈繼承
核心: 將父類的實例作為子類的原型
- //定義動物貓
- function
- }
- 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. 實現較為復雜;
三、JavaScript中子類調用父類方法的解決方案
以上的繼承方式,都不實現子類調用父類方法, 在重寫子類原型函數後,會將繼承父類函數給覆蓋。
四、總結
附錄一、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;
- };
附錄二、參考文章
????https://blog.csdn.net/rainxie_/article/details/39991173
JavaScript中子類調用父類方法的實現