挖掘JS继承的本质，领略语言精妙设计

2023-10-21 00:59:35

面试中，面试官可能会问到“JS的继承”相关问题，例如，“ES6的class继承用ES5如何实现？”。要回答好这个问题，需要从根本上理解JavaScript的继承机制，包括构造函数、原型对象和实例之间的关系。本文将带您深入了解这些概念，帮助您掌握JavaScript继承的精髓。

构造函数、原型对象和实例

在JavaScript中，构造函数是用来创建对象的函数。当您使用new调用构造函数时，就会创建一个新的对象。这个对象称为构造函数的实例。

每个构造函数都有一个原型对象，它是所有实例共享的对象。原型对象包含了构造函数的所有属性和方法。当您访问实例的属性或方法时，JavaScript会先在实例本身查找，如果找不到，就会去原型对象中查找。

ES6的class继承

ES6引入了class关键字，可以更方便地定义类和实现继承。在ES6中，您可以使用extends关键字来继承另一个类。例如：

class Parent {
  constructor(name) {
    this.name = name;
  }

  greet() {
    console.log(`Hello, my name is ${this.name}.`);
  }
}

class Child extends Parent {
  constructor(name, age) {
    super(name);
    this.age = age;
  }

  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

const child = new Child('John', 20);
child.greet(); // Hello, my name is John and I am 20 years old.

在上面的示例中，Child类继承了Parent类的属性和方法。您可以通过super关键字来访问父类的方法。

ES5的继承

在ES5中，可以使用原型链来实现继承。原型链是指一个对象可以继承另一个对象的所有属性和方法。您可以通过Object.create()方法来创建原型链。例如：

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

Parent.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name}.`);
};

function Child(name, age) {
  Parent.call(this, name);
  this.age = age;
}

Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;

Child.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};

const child = new Child('John', 20);
child.greet(); // Hello, my name is John and I am 20 years old.