JS實(shí)現(xiàn)繼承 JavaScript

Winer 發(fā)布于2019-08-23 14:48 / 1287人閱讀

摘要：實(shí)現(xiàn)繼承定義一個(gè)父類定義一個(gè)動(dòng)物類屬性實(shí)例方法正在睡覺(jué)原型方法正在吃原型鏈繼承核心將父類的實(shí)例作為子類的原型特點(diǎn)非常純粹的繼承關(guān)系，實(shí)例是子類的實(shí)例，也是父類的實(shí)例父類新增的原型方法屬性，子類都能訪問(wèn)到簡(jiǎn)單，易于實(shí)現(xiàn)缺點(diǎn)要想為子類新增屬性和

JS實(shí)現(xiàn)繼承 JavaScript 定義一個(gè)父類：

// 定義一個(gè)動(dòng)物類
function Animal (name) {
// 屬性
this.name = name || ‘Animal’;
// 實(shí)例方法
this.sleep = function(){
console.log(this.name + ‘正在睡覺(jué)！’);
}
}
// 原型方法
Animal.prototype.eat = function(food) {
console.log(this.name + ‘正在吃：’ + food);
};

1.原型鏈繼承

核心：將父類的實(shí)例作為子類的原型

function Cat(){
}
Cat.prototype = new Animal();
Cat.prototype.name = ‘cat’;

//　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

特點(diǎn)：

非常純粹的繼承關(guān)系，實(shí)例是子類的實(shí)例，也是父類的實(shí)例

父類新增的原型方法、屬性，子類都能訪問(wèn)到

簡(jiǎn)單，易于實(shí)現(xiàn)

缺點(diǎn)：

要想為子類新增屬性和方法，必須要在new Animal()這樣的語(yǔ)句之后執(zhí)行（可以在cat構(gòu)造函數(shù)中，為Cat實(shí)例增加實(shí)例屬性）

無(wú)法實(shí)現(xiàn)多繼承

來(lái)自原型對(duì)象的引用屬性被所有實(shí)例共享

創(chuàng)建子類實(shí)例時(shí)，無(wú)法向父類構(gòu)造函數(shù)傳參

下面代碼解釋缺點(diǎn)3（注意是引用屬性）：

function Super(){
    this.val = 1;
    this.arr = [1];
}
function Sub(){
    // ...
}
Sub.prototype = new Super();    // 核心
 
var sub1 = new Sub();
var sub2 = new Sub();
sub1.val = 2;
sub1.arr.push(2);
alert(sub1.val);    // 2
alert(sub2.val);    // 1
 
alert(sub1.arr);    // 1, 2
alert(sub2.arr);    // 1, 2

2.構(gòu)造繼承

核心：使用父類的構(gòu)建函數(shù)來(lái)增強(qiáng)子類實(shí)例，等于復(fù)制父類的實(shí)例屬性給子類（沒(méi)用到原型），除了call方法，也可以用apply()

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

特點(diǎn)：

解決了1中，子類實(shí)例共享父類引用屬性的問(wèn)題

創(chuàng)建子類實(shí)例時(shí)，可以向父類傳遞參數(shù)

可以實(shí)現(xiàn)多繼承（call多個(gè)父類對(duì)象）

缺點(diǎn)：

實(shí)例并不是父類的實(shí)例，只是子類的實(shí)例

只能繼承父類的實(shí)例屬性和方法，不能繼承原型屬性和方法

無(wú)法實(shí)現(xiàn)函數(shù)復(fù)用，每個(gè)子類都有父類的實(shí)例函數(shù)的副本，影響性能

3.實(shí)例繼承

核心：為父類實(shí)例添加新特性，作為子類實(shí)例返回

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

特點(diǎn)：

不限制調(diào)用方式，不管是new 子類()還是子類()，返回的對(duì)象都具有相同的效果

缺點(diǎn)：

實(shí)例是父類的實(shí)例，不是子類的實(shí)例

不支持多繼承

4. 拷貝繼承

核心：使用for...in將父類實(shí)例中的方法賦給子類實(shí)例

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

特點(diǎn)：

支持多繼承

缺點(diǎn)：

效率較低，內(nèi)存占用高（因?yàn)橐截惛割惖膶傩裕?/p>

無(wú)法獲取父類不可枚舉的方法（for in無(wú)法訪問(wèn)不可枚舉的方法）

5.組合繼承

核心：通過(guò)調(diào)用父類構(gòu)造，繼承父類的屬性并保留傳參的優(yōu)點(diǎn)，然后通過(guò)將父類實(shí)例作為子類原型，實(shí)現(xiàn)函數(shù)復(fù)用

function Cat(name){
Animal.call(this);
this.name = name || ‘Tom’;
}
Cat.prototype = new Animal();

//組合繼承需要修復(fù)構(gòu)造函數(shù)的指向
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

特點(diǎn)：

彌補(bǔ)了方式2的缺陷，可以繼承實(shí)例屬性、方法，也可以繼承原型屬性、方法

既是子類的實(shí)例，也是父類的實(shí)例

不存在引用屬性的共享問(wèn)題

可傳參

函數(shù)可復(fù)用

缺點(diǎn)：

調(diào)用了兩次父類構(gòu)造函數(shù)，生成了兩份實(shí)例（子類實(shí)例將子類原型上的那份屏蔽了）

6.寄生組合繼承

核心：通過(guò)寄生方式，砍掉父類的實(shí)例屬性，這樣，在調(diào)用兩次父類的構(gòu)造的時(shí)候，就不會(huì)初始化兩次實(shí)例方法/屬性，避免的組合繼承的缺點(diǎn)

function Cat(name){
Animal.call(this);
this.name = name || ‘Tom’;
}
(function(){
// 創(chuàng)建一個(gè)沒(méi)有實(shí)例方法的類
var Super = function(){};
Super.prototype = Animal.prototype;
//將實(shí)例作為子類的原型
Cat.prototype = new Super();
//寄生組合繼承需要修復(fù)構(gòu)造函數(shù)的指向
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

特點(diǎn)：

堪稱完美

缺點(diǎn):

實(shí)現(xiàn)較為復(fù)雜

補(bǔ)充：es6的class實(shí)現(xiàn)繼承

class Animal {
    //構(gòu)造函數(shù)
    constructor(props) {
      this.name = props.name || "未知";
    }

    eat() {
      alert(this.name + "在吃東西...");
    }
  }

  //class繼承
  class Bird extends Animal {
    //構(gòu)造函數(shù)
    constructor(props) {
      //調(diào)用實(shí)現(xiàn)父類的構(gòu)造函數(shù)
      super(props);
      this.name = props.name || "未知";
    }

    fly() {
      alert(this.name + "在飛...");
    }
  }
  var myBird = new Bird({
    name: "鸚鵡"
  })
  myBird.eat()  // 鸚鵡在吃東西...
  myBird.fly()  // 鸚鵡在飛...