前端面试 - 手写实现继承的技巧与实战

2023-10-27 09:09:42

在前端开发中，继承是一种重要的技术，用于创建新对象，这些新对象继承了父对象的属性和方法。尽管 JavaScript 提供了内置的 extends 来实现继承，但深入了解其底层原理对于掌握前端开发至关重要。本文将深入探讨如何通过手动编写代码来实现继承，并提供详细的代码示例和说明，让您在前端面试中脱颖而出。

理解继承的概念

继承是一种创建新对象（称为子对象）的方法，该对象从另一个现有对象（称为父对象）继承属性和方法。子对象可以访问父对象的数据和行为，同时还可以定义自己的独特属性和方法。

在 JavaScript 中，继承通常使用 extends 关键字来实现。但是，手动编写继承代码可以加深您对底层机制的理解，并提高您在处理复杂继承场景时的灵活性。

手写继承的 3 种方法

1. Object.create() 方法

Object.create() 方法创建一个新对象，该对象使用指定的现有对象作为原型。这意味着子对象将继承父对象的属性和方法，但子对象本身不会修改父对象。

const parent = {
  name: 'John',
  age: 30
};

const child = Object.create(parent);
console.log(child.name); // 输出: John

2. Object.assign() 方法

Object.assign() 方法将一个或多个源对象的属性复制到目标对象。使用此方法，您可以将父对象的所有属性复制到子对象中，从而实现继承。

const parent = {
  name: 'John',
  age: 30
};

const child = {};
Object.assign(child, parent);
console.log(child.name); // 输出: John

3. Function.prototype 方法

Function.prototype.call()、Function.prototype.apply() 和 Function.prototype.bind() 方法允许您调用函数并指定 this 关键字的值。利用这些方法，您可以模拟继承，其中父对象的方法在子对象中被调用。

const parent = {
  name: 'John',
  age: 30,
  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

const child = {
  name: 'Jane',
  age: 25
};

parent.greet.call(child); // 输出: Hello, my name is Jane