JS精粹：直击原型链继承和构造函数继承的“毛病”

前端

2023-09-25 13:30:06

原型链继承与构造函数继承：JavaScript中的继承机制

引言

面向对象编程（OOP）是一种强大的范式，它使我们能够创建可重用且易于维护的代码。在JavaScript中，我们可以使用原型链继承和构造函数继承这两种方式来实现继承。让我们深入研究这两种方法，了解它们的优点、缺点以及在不同情况下的适用性。

原型链继承

原型链继承是一种简单有效的继承机制。它通过将子对象的原型属性指向父对象的原型对象来实现继承。这意味着子对象可以访问父对象的所有属性和方法。

原型链继承的优点：

简单性： 原型链继承易于理解和实施。
性能： 由于不需要创建新的构造函数，原型链继承通常比构造函数继承更快。
代码冗余： 原型链继承可以减少代码冗余，因为它不需要在子类中复制父类的方法。

原型链继承的缺点：

私有方法访问： 子对象无法访问父对象的私有属性和方法。

示例：

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

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

function Child() {
  this.age = 10;
}

// Child继承了Parent的原型
Child.prototype = Object.create(Parent.prototype);

const child = new Child();
child.greet(); // Hello, my name is undefined

在上面的示例中，Child对象继承了Parent对象的原型，获得了对greet方法的访问权。但是，child无法访问父对象的私有属性name。

构造函数继承

构造函数继承是一种更复杂的继承机制。它通过在子对象的构造函数中调用父对象的构造函数来实现继承。这意味着子对象可以访问父对象的所有属性和方法，包括私有属性和方法。

构造函数继承的优点：

私有方法访问： 子对象可以访问父对象的私有属性和方法。
定制构造函数： 构造函数继承允许我们在子类中定制构造函数，以满足特定的需求。

构造函数继承的缺点：

复杂性： 构造函数继承比原型链继承更复杂，需要创建新的构造函数。
性能： 构造函数继承比原型链继承慢，因为它需要在每个子对象创建时调用父对象的构造函数。
代码冗余： 构造函数继承可能会导致代码冗余，因为父类和子类的方法可能会重复。

示例：

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;
  }
}

const child = new Child("John", 10);
child.greet(); // Hello, my name is John

在上面的示例中，Child类继承了Parent类，获得了对greet方法和私有属性name的访问权。

比较原型链继承和构造函数继承

特征	原型链继承	构造函数继承
简单性	简单	复杂
可访问性	子对象无法访问父对象的私有属性和方法	子对象可以访问父对象的私有属性和方法
性能	更快	更慢
代码冗余	更少	更多