由于函数没有签名,在 ECMAScript 中无法实现接口继承。ECMAScript 只支持实现继承,而且其实现继承的主要方式是依靠原型链来实现的。
原型链继承
构造函数、原型链和实例的关系:每个构造函数都有一个原型对象(prototype),每一个原型对象都包含一个指向构造函数的指针(constructor),每一个实例都包含一个指向原型对象的内部指针(__proto__)。
所有引用类型默认都继承了 Object,这个继承也是通过原型链实现的。
重点:让子类的原型等于父类的实例。
注意:
- 子类型有时需要覆盖超类型或者添加超类型的方法,在给原型添加方法的代码一定要放在替换原型之后。
- 创建子类实例时,无法向父类传参。
- 所有新实例都会共享父类实例的属性。(原型上的属性是共享的,一个实例修改了原型属性,另一个实例的原型属性也会被修改!)
- 子类的原型的 constructor 会指向子类的新原型(父类的实例)的原型(__proto__)的 constructor。
// 父类
function Person(name) {
this.name = name;
this.sum = function() {
console.log(this.name)
}
}
Person.prototype.age = 18;
// 子类
function Child() {
this.name = 'kid'
}
Child.prototype = new Person(); // 原型链继承重点
借用构造函数继承
重点:在子类构造函数内部调用父类构造函数,使用 call() 和 apply() 方法将父类构造函数引入子类构造函数。
优点:
- 解决了原型链继承的缺点
- 可以继承多个构造函数(call / apply 多个)。
- 可以向父类传参。
缺点:
- 只能继承父类构造函数的属性,没有继承父类原型的属性。
- 无法实现构造函数的复用。
// 父类
function Person(name) {
this.name = name;
this.sum = function() {
console.log(this.name)
}
}
Person.prototype.age = 18;
// 子类
function Child() {
Person.call(this, 'hhhqzh'); // 借用构造函数继承重点
this.name = 'kid';
}
组合继承(伪经典继承;原型链 + 借用构造函数)常用
将原型链基础和借用构造函数继承组合起来。
使用原型链实现对父类原型属性和方法的继承,且通过借用构造函数来实现对实例属性的继承。保即通过在原型上定义方法实现了函数的复用,又能够保证每个实例有自己的属性。
重点:结合两种继承模式的优点,传参和复用。
优点:
- 可以继承父类原型上的属性和方法,可以对父类构造函数进行传参,复用。
- 每个子类实例引入的构造函数属性是私有的,不像原型链继承一样是共享的。
缺点:
- 调用两次父类构造函数(耗内存)。
- 子类的原型的 constructor 会指向子类的新原型(父类的实例)的原型(__proto__)的 constructor。
// 父类
function Person(name) {
this.name = name;
this.sum = function() {
console.log(this.name)
}
}
Person.prototype.age = 18;
// 子类
function Child(name) {
Person.call(this, name); // 借用构造函数继承重点
}
Child.prototype = new Person(); // 原型链继承重点
let child = new Child('hhhqzh');
console.log(child.name); // hhhqzh 继承了父类构造函数的属性
console.log(child.age); // 18 继承父类原型的属性
原型式继承
借助原型可以基于已有的对象创建新对象,同时不必因此创建自定义类型。
重点:必须要有一个对象作为另一个对象的基础,用一个函数来包装一个对象,然后返回一个新对象。
特点:类似于复制一个对象,用函数包装。Object.create 利用了这个原理。
缺点:
- 所有实例都继承原型上的属性。
- 无法实现复用。(新实例的属性都是后添加的)
// 父类
function Person(name) {
this.name = name;
this.sum = function() {
console.log(this.name)
}
}
Person.prototype.age = 18;
// 先封装一个函数容器,在函数内部创建一个临时构造函数,然后将传入的对象作为这个构造函数的原型,最后返回这个构造函数的实例。
function object(obj) {
function F(){};
F.prototype = obj;
return new F();
}
let person = new Person('hhhqzh');
let child = object(person);
console.log(child.name); // hhhqzh 继承了父类函数的属性
或者使用 Object.create()
寄生式继承
创建一个仅用于封装集成过程的函数,在该函数内部(任何能返回新对象的函数,比如原型式继承)来增强对象,最后返回对象。
缺点:没用到原型,无法实现复用。
// 父类
function Person(name) {
this.name = name;
this.sum = function() {
console.log(this.name)
}
}
Person.prototype.age = 18;
// 先封装一个函数容器,在函数内部创建一个临时构造函数,然后将传入的对象作为这个构造函数的原型,最后返回这个构造函数的实例。
function object(obj) {
function F();
F.prototype = obj;
return new F();
}
// 创建一个封装继承过程的函数,该函数在内部以某种方式增强对象。
function creeateAnother(original){
let clone = object(original); // 继承过程
clone.name = 'ppptyp';
clone.sayHi = function() {
console.log("hi");
}
return clone;
}
let person = new Person('hhhqzh');
let child = creeateAnother(person);
child.sayHi(); // hi
console.log(child.name); // ppptyp
寄生组合式继承(常用)
即通过借用构造函数来继承属性,又通过原型链的混成形式来继承方法。本质上是使用寄生式继承来继承父类型的原型(父类的原型等于一个实例),然后再将这个实例指定给子类型的原型。
优点:修复了组合继承的问题(调用两次构造函数)
// 父类
function Person(name) {
this.name = name;
this.sum = function() {
console.log(this.name)
}
}
Person.prototype.age = 18;
// 子类
function Child(name) {
Person.call(this, name); // 借用构造函数继承
}
// 原型式继承
function object(obj) {
function F();
F.prototype = obj;
return new F();
}
// 寄生
function creeateAnother(Child, Person){
let prototype = object(Person.prototype); // 继承过程
prototype.constructor = Child;
Child.prototype = prototype;
}
// Child.prototype = new Person(); // 原型链继承
creeateAnother(Child, Person); // 替换原型链继承
let child = new Child('hhhqzh');
console.log(child.name); // hhhqzh 继承了父类构造函数的属性
console.log(child.age); // 18 继承父类原型的属性