揭秘JS实现继承的秘技

2023-10-17 09:44:45

我们将在本文中探索JS实现继承的不同方式，包括原型链继承和class继承，以及两种方式的主要差异。我们还将展示如何通过代码示例手写原型链继承方式，以便您更深入地了解JS继承的工作原理。

在JS中，继承是指将一个对象的属性和方法传递给另一个对象。这样，新对象就可以访问和使用父对象的所有属性和方法。继承在JS中非常有用，因为它允许我们创建新的对象，而无需从头开始编写所有代码。

JS实现继承的方式

在JS中，有两种实现继承的方式：原型链继承和class继承。

原型链继承

原型链继承是JS中实现继承的最基本的方式。在这种方法中，子对象通过其原型对象访问父对象的所有属性和方法。原型对象是一个特殊的对象，它包含了子对象的所有属性和方法。当子对象访问一个属性或方法时，JS引擎会首先在子对象的原型对象中查找。如果在子对象的原型对象中找不到，JS引擎就会继续在子对象的原型对象的原型对象中查找，依此类推，直到找到该属性或方法。

原型链继承有一个很大的优点，那就是它非常简单。它只需要一个原型对象和一个子对象就可以实现继承。但是，原型链继承也有一个很大的缺点，那就是它很容易导致代码混乱。当您使用原型链继承时，您需要不断地追踪对象及其原型对象的关系，这可能会让您的代码变得非常难以阅读和维护。

class继承

class继承是JS中实现继承的另一种方式。这种方法在ES6中引入，它与原型链继承非常相似，但它更加简洁和易于理解。在class继承中，子类通过extends继承父类的属性和方法。

class继承的一个很大的优点是，它非常简洁和易于理解。您只需要编写一个class语句就可以实现继承。此外，class继承还避免了原型链继承中容易导致代码混乱的问题。在class继承中，您只需要关注子类和父类的关系，而无需追踪对象及其原型对象的关系。

原型链继承手写代码示例

// 定义父对象
const Person = {
  name: 'John Doe',
  age: 30,
  greet: function() {
    console.log('Hello, my name is ' + this.name + ' and I am ' + this.age + ' years old.');
  }
};

// 定义子对象
const Student = {
  __proto__: Person,
  major: 'Computer Science',
  study: function() {
    console.log('I am studying ' + this.major + '.');
  }
};

// 创建子对象实例
const student = Object.create(Student);

// 调用子对象的方法
student.greet(); // Hello, my name is John Doe and I am 30 years old.
student.study(); // I am studying Computer Science.