乐趣区

关于es6:ES5ES6-如何实现继承

残缺高频题库仓库地址:https://github.com/hzfe/aweso…

残缺高频题库浏览地址:https://febook.hzfe.org/

相干问题

  • 对于 ES5 和 ES6 的继承问题
  • 原型链概念

答复关键点

原型链继承 构造函数继承 ES6 类继承

继承是指子类型具备父类型的属性和行为,使代码得以复用,做到设计上的拆散。JavaScript 中的继承次要通过原型链和构造函数来实现。常见的继承办法有:ES6 中 class 的继承、原型链继承、寄生组合式继承等。

知识点深刻

1. 原型链

原型链的实质是拓展原型搜寻机制。每个实例对象都有一个公有属性 \_\_proto\_\_。该属性指向它的构造函数的原型对象 prototype。该原型对象的 \_\_proto\_\_ 也能够指向其余构造函数的 prototype。顺次层层向上,直到一个对象的 \_\_proto\_\_ 指向 null。依据定义,null 没有原型,并作为这个原型链中的最初一个环节。

当试图拜访一个对象的属性时,它不仅仅在该对象上搜查,还会搜查该对象的原型,以及该对象的原型的原型,顺次层层向上搜寻,直到找到一个名字匹配的属性或直到这个链表完结(Object.prototype.__proto__ === null)。

2. 原型链继承

原型链继承的思维:一个援用类型继承另一个援用类型的属性和办法

function SuperType() {this.b = [1, 2, 3];
}

function SubType() {}

SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType;

var sub1 = new SubType();
var sub2 = new SubType();

// 这里对援用类型的数据进行操作
sub1.b.push(4);

console.log(sub1.b); // [1,2,3,4]
console.log(sub2.b); // [1,2,3,4]
console.log(sub1 instanceof SuperType); // true

长处:

  1. 父类新增原型办法 / 原型属性,子类都能拜访到。
  2. 简略、易于实现。

毛病:

  1. 无奈实现多继承。
  2. 因为原型中的援用值被共享,导致实例上的批改会间接影响到原型。
  3. 创立子类实例时,无奈向父类构造函数传参。

3. 构造函数继承

构造函数继承的思维:子类型构造函数中调用父类的构造函数,使所有须要继承的属性都定义在实例对象上

function SuperType(name) {
  this.name = name;
  this.b = [1, 2, 3];
}

SuperType.prototype.say = function () {console.log("HZFE");
};

function SubType(name) {SuperType.call(this, name);
}

var sub1 = new SubType();
var sub2 = new SubType();

// 传递参数
var sub3 = new SubType("Hzfe");

sub1.say(); // 应用构造函数继承并没有拜访到原型链,say 办法不能调用

console.log(sub3.name); // Hzfe

sub1.b.push(4);

// 解决了原型链继承中子类实例共享父类援用属性的问题
console.log(sub1.b); // [1,2,3,4]
console.log(sub2.b); // [1,2,3]
console.log(sub1 instanceof SuperType); // false

长处:

  1. 解决了原型链继承中子类实例共享父类援用属性的问题。
  2. 能够在子类型构造函数中向父类构造函数传递参数。
  3. 能够实现多继承(call 多个父类对象)。

毛病:

  1. 实例并不是父类的实例,只是子类的实例。
  2. 只能继承父类的实例属性和办法,不能继承原型属性和办法。
  3. 无奈实现函数复用,每个子类都有父类实例函数的正本,影响性能。

4. 组合继承(伪经典继承)

组合继承的思维:应用原型链实现对原型属性和办法的继承,借用构造函数实现对实例属性的继承

function SuperType(name) {
  this.name = name;
  this.a = "HZFE";
  this.b = [1, 2, 3, 4];
}

SuperType.prototype.say = function () {console.log("HZFE");
};

function SubType(name) {SuperType.call(this, name); // 第二次调用 SuperType
}

SubType.prototype = new SuperType(); // 第一次调用 SuperType
SubType.prototype.constructor = SubType;

长处:

  1. 能够继承实例属性 / 办法,也能够继承原型属性 / 办法。
  2. 不存在援用属性共享问题。
  3. 可传参
  4. 函数可复用

毛病:

  1. 调用了两次父类构造函数(耗内存),生成了两份实例。

5. 寄生组合式继承

寄生组合式继承的思维:借用构造函数来继承属性,应用混合式原型链继承办法

// 在函数外部,第一步创立父类原型的一个正本,第二部是为创立的正本增加 constructor 属性,// 从而补救因重写而失去的默认的 constructor 属性。最初一步,将新创建的对象(即正本)赋值给予类型的原型。function inheritPrototype(subType, superType) {var prototype = Object.create(superType.prototype); // 创建对象
  prototype.constructor = subType; // 加强对象
  subType.prototype = prototype; // 指定对象
}

function SuperType(name) {this.name = name;}

SuperType.prototype.sayName = function () {console.log(this.name);
};

function SubType(name, num) {SuperType.call(this, name);
  this.num = num;
}

inheritPrototype(SubType, SuperType);

SubType.prototype.sayNum = function () {console.log(this.num);
};

长处:

  1. 只调用了一次 SuperType 构造函数,防止了在 SubType.prototype 上创立不必要的属性。
  2. 可能失常应用 instanceof 和 isPrototypeOf()。

毛病:

  1. 实现较为简单

6. ES6 中 class 的继承

ES6 中引入了 class 关键字,class 能够通过 extends 关键字实现继承,还能够通过 static 关键字定义类的静态方法,这比 ES5 的通过批改原型链实现继承,要清晰和不便很多。须要留神的是:class 关键字只是原型的语法糖,JavaScript 继承依然是基于原型实现的。

class Pet {constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  showName() {console.log("调用父类的办法");
    console.log(this.name, this.age);
  }
}

// 定义一个子类
class Dog extends Pet {constructor(name, age, color) {super(name, age); // 通过 super 调用父类的构造方法
    this.color = color;
  }

  showName() {console.log("调用子类的办法");
    console.log(this.name, this.age, this.color);
  }
}

长处:

  1. 清晰不便

毛病:

  1. 不是所有的浏览器都反对 class。

参考资料

  1. JS 实现继承的几种形式
  2. 阮一峰 ES6 入门之 class 的继承
  3. 《JavaScript 高级程序设计》
  4. 《你不晓得的 JavaScript》
退出移动版