走进继承王国：探索JavaScript中的继承奥秘

前端

2023-10-30 19:50:42

JavaScript 继承：踏入面向对象编程世界的指南

对象：基础构建模块

在 JavaScript 中，对象是包含数据和操作的数据集合。数据存储在属性中，而操作通过称为方法的函数执行。对象常用于表示现实世界中的实体，如人、动物或车辆。

原型：蓝图和继承桥梁

原型是一个特殊的对象，它为其他对象提供一个蓝图。当创建一个新对象时，JavaScript 会创建该对象的实例，并将该实例的原型设置为构造函数的 prototype 属性。这允许实例访问构造函数的属性和方法。

构造函数：创建新对象的方法

构造函数是一个特殊函数，用于创建新对象。构造函数的名称通常以大写字母开头，并且它不使用 return 语句显式返回一个值。相反，它在内部创建一个新对象，并将该对象作为隐式返回值。

面向对象编程：一种思维方式

面向对象编程 (OOP) 是一种组织和设计代码的思想，它将数据和操作封装在对象中。OOP 的优点在于它可以提高代码的可重用性和可维护性。

JavaScript 中的继承方式

在 JavaScript 中，有两种主要的继承方式：

原型继承： 原型继承是 JavaScript 中最早的继承方式。它通过修改对象的原型来实现继承。
类继承： 类继承是 ES6 中引入的继承方式。它使用 class 来定义类，并且支持 extends 来实现继承。

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;

const student = new Student('John Doe', 'Computer Science');

student.greet(); // Output: "Hello, my name is John Doe"

在这个示例中，Person 构造函数创建了一个具有 name 属性和 greet 方法的对象。Student 构造函数创建了一个具有 name 和 major 属性以及 greet 方法的对象。Student.prototype 被设置为 Person.prototype 的一个新实例，这允许 Student 对象访问 Person 对象的属性和方法。

类继承：

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 Doe', 'Computer Science');

student.greet(); // Output: "Hello, my name is John Doe"