JavaScript 面试要点：继承

Cellinlab

发布于 2023-05-17 08:02:25

18800

代码可运行

文章被收录于专栏：Cellinlab's BlogCellinlab's Blog

运行总次数：0

代码可运行

很多面向对象语言都支持两种继承：接口继承和实现继承。前者只继承方法签名，后者继承实际的方法。接口继承在 ECMAScript 中是不可能的，因为函数没有签名。实现继承是 ECMAScript 唯一支持的继承方式，而这主要是通过原型链实现的。

# 原型链

# 思路及实现

ECMA-262 把原型链定义为 ECMAScript 的主要继承方式。其基本思想就是通过原型继承多个引用类型的属性和方法。对属性和方法的搜索会一直持续到原型链的末端。

function SuperType () {
  this.property = true;
}

SuperType.prototype.getSuperValue = function () {
  return this.property;
};

function SubType () {
  this.subproperty = false;
}

// 继承 SuperType
SubType.prototype = new SuperType();

SubType.prototype.getSubValue = function () {
  return this.subproperty;
};

let instance = new SubType();
console.log(instance.getSuperValue()); // true
console.log(instance.getSubValue()); // false

# 默认原型

默认情况下，所有引用类型都继承自 Object，这也是通过原型链实现的。任何函数的默认原型都是一个 Object 的实例，这意味着这个实例有一个内部指针指向 Object.prototype。这也是为什么自定义类型能够继承包括 toString()、 valueOf() 在内的所有默认方法的原因。

# 原型与继承关系

原型与实例的关系可以通过两种方式来确定。

instanceof

如果一个实例的原型链中出现过相应的构造函数，则 instanceof 返回 true

console.log(instance instanceof SubType); // true
console.log(instance instanceof SuperType); // true
console.log(instance instanceof Object); // true

isPrototypeOf()

原型链中的每个原型都可以调用这个方法，只要原型链中包含这个原型，这个方法就返回 true

console.log(SubType.prototype.isPrototypeOf(instance)); // true
console.log(SuperType.prototype.isPrototypeOf(instance)); // true
console.log(Object.prototype.isPrototypeOf(instance)); // true

# 方法覆盖

子类有时候需要覆盖父类的方法，或者增加父类没有的方法。为此，这些方法必须在原型赋值之后再添加到原型上。

function SuperType () {
  this.property = true;
}

SuperType.prototype.getSuperValue = function () {
  return this.property;
};

function SubType () {
  this.subproperty = false;
}

// 继承 SuperType
SubType.prototype = new SuperType();

// 新方法
SubType.prototype.getSubValue = function () {
  return this.subproperty;
};

// 覆盖父类方法
SubType.prototype.getSuperValue = function () {
  return false;
};

let instance = new SubType();
console.log(instance.getSuperValue()); // false
console.log(instance.getSubValue()); // false

注意，以对象字面量方式创建原型方法会破坏之前的原型链，因为相当于重写了原型链。

function SuperType () {
  this.property = true;
}

SuperType.prototype.getSuperValue = function () {
  return this.property;
};

function SubType () {
  this.subproperty = false;
}

SubType.prototype = new SuperType();

// 这里使用字面量添加方法会破坏原型链
SubType.prototype = {
  getSubValue: function () {
    return this.subproperty;
  }
};

let instance = new SubType();
console.log(instance.getSuperValue());
// Uncaught TypeError: instance.getSuperValue is not a function

# 原型链的问题

原型链虽然是实现继承的强大工具，但它也有问题。

原型中包含引用值的时候，原型中包含的引用值会在所有实例间共享

所以属性通常会在构造函数中定义而不会定义在原型上的原因。

function SuperType () {
  this.colors = ['red', 'blue', 'green'];
}

function SubType () {}

SubType.prototype = new SuperType();

let instance1 = new SubType();
instance1.colors.push('black');
console.log(instance1.colors); // ['red', 'blue', 'green', 'black']

let instance2 = new SubType();
console.log(instance2.colors); // ['red', 'blue', 'green', 'black']

子类型在实例化时不能给父类型的构造函数传参

事实上，无法在不影响所有对象实例的情况下把参数传进父类的构造函数。

综上，导致原型链基本不会被单独使用。

# 盗用构造函数（经典继承）

为了解决原型包含引用值导致的继承问题，一种叫作“盗用构造函数”（ constructor stealing）的技术在开发社区流行起来（这种技术有时也称作“对象伪装”或“经典继承”）。

# 思路及实现

在子类构造函数中调用父类构造函数。实现基础是：函数就是在特定上下文中执行代码的简单对象，所以可以使用 apply() 和 call() 方法以新创建的对象为上下文来执行构造函数。

function SuperType () {
  this.colors = ['red', 'blue', 'green'];
}

function SubType () {
  // 盗用父类构造函数 实现 经典继承
  SuperType.call(this);
}

let instance1 = new SuperType();
instance1.colors.push('black');
console.log(instance1.colors); // ['red', 'blue', 'green', 'black']

let instance2 = new SubType();
console.log(instance2.colors); // ['red', 'blue', 'green']

通过使用 call()（或 apply()）方法， SuperType 构造函数在为 SubType 的实例创建的新对象的上下文中执行了。这相当于新的 SubType 对象上运行了 SuperType() 函数中的所有初始化代码。结果就是每个实例都会有自己的 colors 属性。

# 传递参数

盗用构造函数的一个优点就是可以在子类构造函数中向父类构造函数传参。

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

function SubType () {
  // 盗用父类构造函数 实现 经典继承
  SuperType.call(this, 'Nicholas'); // 为了不会覆盖，要先调用父类构造函数

  // 实例属性
  this.age = 29;
}

let instance1 = new SubType();
console.log(instance1.name); // 'Nicholas'
console.log(instance1.age); // 29

# 存在问题

盗用构造函数的主要缺点，也是使用构造函数模式自定义类型的问题：必须在构造函数中定义方法，因此函数不能重用。此外，子类也不能访问父类原型上定义的方法，因此所有类型只能使用构造函数模式。由于存在这些问题，盗用构造函数基本上也不能单独使用。

# 组合继承

组合继承（伪经典继承）综合了原型链和盗用构造函数，将两者的优点集中了起来。

# 思路及实现

使用原型链继承原型上的属性和方法，而通过盗用构造函数继承实例属性。既可以把方法定义在原型上以实现重用，又可以让每个实例都有自己的属性。

function SuperType (name) {
  this.name = name;
  this.colors = ['red', 'blue', 'green'];
}

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

function SubType (name, age) {
  // 盗用父类构造函数 实现 经典继承
  SuperType.call(this, name);

  this.age = age;
}

// 继承方法
SubType.prototype = new SuperType();

SubType.prototype.sayAge = function () {
  console.log(this.age);
};

let instance1 = new SubType('Nicholas', 29);
instance1.colors.push('black');
console.log(instance1.colors); // ['red', 'blue', 'green', 'black']
instance1.sayName(); // 'Nicholas'
instance1.sayAge(); // 29

let instance2 = new SubType('Greg', 27);
console.log(instance2.colors); // ['red', 'blue', 'green']
instance2.sayName(); // 'Greg'
instance2.sayAge(); // 27

组合继承弥补了原型链和盗用构造函数的不足，是 JavaScript 中使用最多的继承模式。而且组合继承也保留了 instanceof 操作符和 isPrototypeOf()方法识别合成对象的能力。

# 原型式继承

# 思路及实现

一种不涉及严格意义上构造函数的继承方法。其出发点是即使不自定义类型也可以通过原型实现对象之间的信息共享。

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

object() 会创建一个临时构造函数，将传入的对象赋值给这个临时构造函数的原型，然后返回一个临时构造函数的实例。本质上，object() 是对传入的对象执行了一次浅复制。

let person = {
  name: 'Nicholas',
  friends: ['Shelby', 'Court', 'Van']
};

let p1 = object(person);
p1.name = 'Greg';
p1.friends.push('Rob');

let p2 = object(person);
p2.name = 'Linda';
p2.friends.push('Barbie');

console.log(person.friends); // ['Shelby', 'Court', 'Van', 'Rob', 'Barbie']

# 适用场景

已有一个对象，想在它基础上再创建一个新对象。

原型式继承非常适合不需要单独创建构造函数，但仍然需要在对象间共享信息的场合。但要记住，属性中包含的引用值始终会在相关对象间共享，跟使用原型模式是一样的。

# Object.create()

ECMAScript 5 通过增加 Object.create() 方法将原型式继承的概念规范化了。该方法接收两个参数：作为新对象原型的对象，以及给新对象定义额外属性的对象（第二个可选）。在只有一个参数时，Object.create() 与这里的 object() 方法效果相同：

let person = {
  name: 'Nicholas',
  friends: ['Shelby', 'Court', 'Van']
};

let p1 = Object.create(person);
p1.name = 'Greg';
p1.friends.push('Rob');

let p2 = Object.create(person);
p2.name = 'Linda';
p2.friends.push('Barbie');

console.log(person.friends); // ['Shelby', 'Court', 'Van', 'Rob', 'Barbie']

Object.create() 的第二个参数与 Object.defineProperties() 的第二个参数一样：每个新增属性都通过各自的描述符来描述。以这种方式添加的属性会遮蔽原型对象上的同名属性。

# 寄生式继承

# 思路及实现

寄生式继承背后的思路类似于寄生构造函数和工厂模式：创建一个实现继承的函数，以某种方式增强对象，然后返回这个对象。

function createAnother (original) {
  // 创建新对象
  let clone = Object.create(original);

  // 增强新对象
  clone.sayHi = function () {
    console.log('Hi');
  };

  // 返回新对象
  return clone;
}

let person = {
  name: 'Nicholas',
  friends: ['Shelby', 'Court', 'Van']
};

let p1 = createAnother(person);
p1.sayHi(); // Hi

# 适用场景和缺点

寄生式继承同样适合主要关注对象，而不在乎类型和构造函数的场景。 object() 函数不是寄生式继承所必需的，任何返回新对象的函数都可以在这里使用。

通过寄生式继承给对象添加函数会导致函数难以重用，与构造函数模式类似。

# 寄生式组合继承

# 效率问题

组合继承存在效率问题。最主要的效率问题就是父类构造函数始终会被调用两次：一次在是创建子类原型时调用，另一次是在子类构造函数中调用。本质上，子类原型最终是要包含超类对象的所有实例属性，子类构造函数只要在执行时重写自己的原型就行了。

function SuperType (name) {
  this.name = name;
  this.colors = ['red', 'blue', 'green'];
}

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

function SubType (name, age) {
  SuperType.call(this, name); // 第二次调用父类构造函数

  this.age = age;
}

SubType.prototype = new SuperType(); // 第一次调用父类构造函数
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function () {
  console.log(this.age);
};

# 解决思路及实现

寄生式组合继承通过盗用构造函数继承属性，但使用混合式原型链继承方法。基本思路是不通过调用父类构造函数给子类原型赋值，而是取得父类原型的一个副本。即使用寄生式继承来继承父类原型，然后将返回的新对象赋值给子类原型。

function inheritPrototype (subType, superType) {
  let prototype = Object.create(superType.prototype); // 创建新对象
  prototype.constructor = subType; // 增强新对象
  subType.prototype = prototype; // 赋值给子类原型
}

function SuperType (name) {
  this.name = name;
  this.colors = ['red', 'blue', 'green'];
}

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

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

  this.age = age;
}

inheritPrototype(SubType, SuperType);

subType.prototype.sayAge = function () {
  console.log(this.age);
};

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021/2/19，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度