认识继承：前端开发中的组合法宝

2023-11-18 05:11:56

在前端开发中，继承是将对象的功能或特性传递给另一个对象的方法。这样，新对象不仅拥有自己的特性，还继承了父对象的所有特性，使代码更容易管理和重用。

1. 原型链继承

原型链继承是JavaScript中实现继承的最基本方法。当创建一个新对象时，该对象会继承其原型对象的所有属性和方法。原型对象又具有自己的原型对象，如此反复，形成一条原型链。

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

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

function Student(name, major) {
  Person.call(this, name);
  this.major = major;
}

Student.prototype = Object.create(Person.prototype);

const student = new Student('John', 'Computer Science');
student.greet(); // Hello, my name is John

在这种情况下，Person是Student的父类，Student是Person的子类。Student对象继承了Person对象的所有属性和方法，并且可以访问和使用它们。

2. 组合继承

组合继承结合了原型链继承和构造函数继承的优点。它使用原型链来继承父类的属性和方法，同时使用构造函数来传递子类特有的属性和方法。

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

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

function Student(name, major) {
  Person.call(this, name);
  this.major = major;
}

Student.prototype = new Person();

const student = new Student('John', 'Computer Science');
student.greet(); // Hello, my name is John

这种情况下，Student对象的prototype属性指向了一个新的Person对象。这样，Student对象继承了Person对象的所有属性和方法，同时还拥有自己的major属性。

3. ES6 class继承

ES6中引入了class，为JavaScript提供了更简洁的语法来定义类和继承关系。

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

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

class Student extends Person {
  constructor(name, major) {
    super(name);
    this.major = major;
  }
}

const student = new Student('John', 'Computer Science');
student.greet(); // Hello, my name is John

这种情况下，Student类继承了Person类的所有属性和方法，并且可以访问和使用它们。

4. 比较

方法	优点	缺点
原型链继承	简单易懂	难以管理继承关系
组合继承	灵活且强大	语法复杂，难以理解
ES6 class继承	简洁易读	仅适用于ES6及以上版本