繼承的實現方式

天邊的一片雲發表於2019-03-04
繼承

函式物件的繼承

寫在前邊，先建立一個父類，用於後邊的繼承。程式碼如下：

// 定義一個動物類
function Animal (name){
    //屬性
    this.name = name || 'Animal';
    //例項方法
    this.sleep = function(){
        console.log(`${this.name} is sleeping`);
    }
}
//原型方法
Animal.prototype.eat = function(food){
    console.log(`${this.name} is eating ${food}`)
}複製程式碼
  • 原型鏈繼承

核心：將父類的例項作為子類的原型

function Cat() {}
Cat.prototype = new Animal('cat');

var cat = new Cat();
console.log(cat.name); // 'cat';
console.log(cat.sleep); // 'cat is sleeping'
console.log(cat instanceof Animal); //true
console.log(cat instanceof Cat); //true複製程式碼

特點：

1.非常純粹的繼承關係，例項是子類的的例項，也是父類的例項
2.父類新增原型方法/原型屬性，子類都能訪問到
3.簡單，易於實現

缺點：

1.因為重定向了子類的原型指向，所以要為子類新增屬性和方法，必須在new Animal()這樣的語句後執行，不能放在構造器裡
2.因為只能指向一個原型，所以無法實現更多的繼承
3.來自原型物件的所有屬性都被所有例項繼承
4.建立子類例項時，無法向父類構造器傳參

  • 構造繼承

核心：使用父類的建構函式來增強子類例項，等於是複製父類的例項屬性給子類

function Cat(name){
    Animal.call(this);
    this.name = name || 'Tom';
}

var cat = new Cat('cat');
console.log(cat.name); //'cat'
console.log(cat.sleep()); //'cat is sleeping'
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;
}複製程式碼

特點：

1.不限呼叫的方式，不管是new Cat()還是Cat()，返回的物件都具有相同的效果

缺點：

1.例項時父類的例項，不是子類的例項
2.不支援多繼承

  • 拷貝繼承

核心：遍歷父類的原型屬性，在子類的原型上新增父類原型的副本

function Cat(name){
    var animal = new Animal();
    for(var p in animal){
        Cat.prototype[p] = animal[p];
    }
    Cat.prototype.name = name || 'Tom';
}

var cat = new Cat();
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;

var cat = new Cat();
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;

var cat = new Cat();
console.log(cat instanceof Animal); //true
console.log(cat instanceof Cat); //true複製程式碼

普通物件的繼承

  • Object()方法

核心：將子物件的prototype屬性指向父物件，從而將子物件和父物件連線起來

function Object(o){
    function F(){};
    F.prototype = o;
    return new F();
}

var Child = Object(Parent);複製程式碼
  • 淺拷貝

核心：將父物件的所有屬性拷貝給子物件

function extendCopy(p){
    var c = {};
    for(var i in p){
        c[i] = p[i];
    }
    return c;
}

var Child = extendCopy(Parent);複製程式碼

缺點：如果父物件的屬性型別是陣列或物件，那麼實際上，子物件獲得的只是一個記憶體地址，當子物件對該屬性進行修改，也會影響到該屬性在父物件上的值

  • 深拷貝

核心：遞迴呼叫‘淺拷貝’，將父物件的所有屬性深度拷貝給子物件，而非指標的指向關係

function deepCopy(p, c){
    var c = c || {};
    for (var i in p){
        if(typeof p[i] === 'Object'){
            c[i] = p[i].constructor === Array ? [] : {};
            deepCopy(p[i], c[i]);
        }else{
            c[i] = p[i];
        }
    }
    return c;
}

var Child = deepCopy(Parent);複製程式碼


相關文章