JS中的四大继承方案：一文读懂子类如何继承父类属性和方法

前端

2023-05-09 22:44:05

JavaScript中的继承：深入解析四种继承方案

引言

在JavaScript中，继承是一种将父类的属性和方法传递给子类的强大机制。掌握继承技术对于创建可重用且可维护的代码至关重要。在本文中，我们将深入探讨JavaScript中的四大继承方案：原型继承、构造函数继承、组合继承和ES6类继承。

原型继承

原型继承是最简单、最常用的继承方案。它通过将子类的原型指向父类的实例来实现继承。这样，子类就可以访问父类的属性和方法。

优点：

易于理解和实现
不需要修改父类的构造函数

缺点：

子类无法访问父类的私有属性和方法

示例：

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

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

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

// 设置Student的原型为Person
Student.prototype = new Person();

// 创建一个Student实例
const student = new Student("John", "Computer Science");

// 访问父类的方法
student.greet(); // 输出："Hello, my name is John"

构造函数继承

构造函数继承通过在子类的构造函数中调用父类的构造函数来实现继承。这样，子类可以访问父类的属性和方法，但子类自己的属性和方法不会被父类继承。

优点：

子类可以访问父类的私有属性和方法

缺点：

代码冗余
必须手动将父类的属性和方法复制到子类的构造函数中

示例：

function Person(name) {
  this.name = name;
  this._secret = "I'm a secret"; // 私有属性
}

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

function Student(name, major) {
  // 调用父类的构造函数
  Person.call(this, name);

  this.major = major;
}

// 设置Student的原型为Person
Student.prototype = Object.create(Person.prototype);

// 创建一个Student实例
const student = new Student("Jane", "Business");

// 访问父类的私有属性（仅子类可见）
console.log(student._secret); // 输出："I'm a secret"

// 访问父类的方法
student.greet(); // 输出："Hello, my name is Jane"

组合继承

组合继承结合了原型继承和构造函数继承的优点。它通过在子类的构造函数中调用父类的构造函数来实现继承，同时还将父类的原型指向子类的原型。这样，子类可以访问父类的属性和方法，子类自己的属性和方法也会被父类继承。

优点：

既可以访问父类的私有属性和方法，又不需要代码冗余

缺点：

实现起来比较复杂

示例：

function Person(name) {
  this.name = name;
  this._secret = "I'm a secret"; // 私有属性
}

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

function Student(name, major) {
  // 调用父类的构造函数
  Person.call(this, name);

  this.major = major;
}

// 设置Student的原型为Person的原型实例
Student.prototype = Object.create(Person.prototype);

// 将父类的构造函数指向Student的构造函数
Student.prototype.constructor = Student;

// 创建一个Student实例
const student = new Student("Mary", "Education");

// 访问父类的私有属性（仅子类可见）
console.log(student._secret); // 输出："I'm a secret"

// 访问父类的方法
student.greet(); // 输出："Hello, my name is Mary"

ES6 类继承

ES6中引入了新的类继承语法，使JavaScript的继承机制更加接近其他面向对象编程语言。在ES6中，使用extends可以定义子类，子类会自动继承父类的属性和方法。

优点：

语法简洁
与其他面向对象编程语言类似

缺点：

只适用于ES6及以上的环境

示例：

class Person {
  constructor(name) {
    this.name = name;
    this._secret = "I'm a secret"; // 私有属性
  }

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

class Student extends Person {
  constructor(name, major) {
    super(name); // 调用父类的构造函数
    this.major = major;
  }
}

// 创建一个Student实例
const student = new Student("Tom", "Engineering");

// 访问父类的私有属性（仅子类可见）
console.log(student._secret); // 输出："I'm a secret"

// 访问父类的方法
student.greet(); // 输出："Hello, my name is Tom"