JS 探索之二：继承的艺术

前端

2024-02-02 14:41:15

在 JS 中，继承是对象之间共享属性和行为的强大机制，是构建大型、可维护代码库的基石。在这个 JS 探索的第二部分中，我们将深入剖析 JS 继承的迷人世界，揭开其隐藏的奥秘和最佳实践。

SEO 关键词

揭开 JS 继承的面纱

在 JS 中，继承主要通过一种独特的机制来实现——原型继承。每个 JS 对象都包含一个名为“原型”的内部属性，它指向另一个对象，该对象包含要继承的属性和方法。通过这种方式，子对象可以访问和使用父对象的属性和方法，从而实现继承。

继承方式大比拼

JS 提供了多种继承方式，每种方式都有其独特的优势和应用场景：

方式一：调整类型原型的 proto

// 子类型
const Child = {};

// 继承 Parent 原型
Child.__proto__ = Parent.prototype;

这种方法直接修改子类型原型的 proto 属性，指向父类型的原型。优点在于简单易行，但需要注意的是，它可能会影响父类型原型上的其他子类型。

方式二：Object.setPrototypeOf 和 Object.create

// 使用 Object.setPrototypeOf
Object.setPrototypeOf(Child, Parent.prototype);

// 使用 Object.create
const Child = Object.create(Parent.prototype);

这两种方法类似于第一种方式，但提供了更显式的控制。Object.setPrototypeOf 直接修改子类型的 proto 属性，而 Object.create 创建一个新对象，并设置其原型为指定的对象。

方式三：自定义 createObject

// 自定义 createObject 函数
const createObject = (proto) => {
  return { __proto__: proto };
};

// 使用自定义 createObject
const Child = createObject(Parent.prototype);

这种方法提供了更大的灵活性，允许你创建自定义继承行为。通过修改 createObject 函数，你可以控制继承的各个方面。

继承的实践之道

在选择继承方式时，需要考虑以下因素：

代码可维护性： 选择最容易理解和维护的方法。
性能： 某些方法（如修改 proto）可能比其他方法（如 Object.create）具有更好的性能。
兼容性： 确保所选方法与你使用的 JS 版本和环境兼容。

实例演绎

让我们通过一个实际示例来演示 JS 继承：

// 父类型 Person
class Person {
  constructor(name) {
    this.name = name;
  }

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

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

  study() {
    console.log(`I'm studying ${this.major}.`);
  }
}

// 创建 Student 对象
const student = new Student('John Doe', 'Computer Science');

// 访问父类型属性和方法
student.greet(); // 输出：Hello, my name is John Doe!

// 访问子类型属性和方法
student.study(); // 输出：I'm studying Computer Science.