JavaScript 继承：10 分钟入门

前端

2023-11-05 14:50:52

10 分钟精通 JavaScript 继承

如果你对 JavaScript 充满热情，那么掌握继承至关重要。继承是一种强大的机制，它允许你创建新的类或对象，这些类或对象从现有类或对象继承属性和方法。在本文中，我们将用 10 分钟的时间，带领你踏上 JavaScript 继承之旅。

原型链继承

原型链继承是最常见的 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);
Student.prototype.constructor = Student;

// 在子类型的原型上添加方法
Student.prototype.study = function() {
  console.log(`${this.name} is studying ${this.major}!`);
};

// 创建子类型的对象
const student = new Student('John', 'Computer Science');

// 调用继承的方法
student.greet(); // Hello, my name is John!
student.study(); // John is studying Computer Science!