直击 JavaScript 原型与原型链的精髓，深度剖析对象继承机制

2023-12-28 09:43:34

JavaScript 中的原型是什么？

在 JavaScript 中，每个对象都有一个原型对象，原型对象包含了该对象的所有属性和方法。当访问一个对象的属性或方法时，JavaScript 会先在该对象中查找，如果找不到，则会沿着原型链向上查找，直到找到该属性或方法。

原型对象可以通过 Object.getPrototypeOf() 方法获取。例如：

const obj = {
  name: "John Doe",
  age: 30
};

const prototype = Object.getPrototypeOf(obj);

console.log(prototype); // {__proto__: null}

JavaScript 中的原型链是什么？

原型链是 JavaScript 中对象继承的基础。每个对象都有一个原型对象，而原型对象又可能有自己的原型对象，如此递归地形成了一条链，这条链就叫做原型链。

当访问一个对象的属性或方法时，JavaScript 会先在该对象中查找，如果找不到，则会沿着原型链向上查找，直到找到该属性或方法。这种机制可以让我们轻松地实现对象继承，无需像其他语言那样显式地使用继承。

对象继承的实现

在 JavaScript 中，对象继承可以通过两种方式实现：基于原型的继承和基于类的继承。

基于原型的继承

基于原型的继承是 JavaScript 中最常见的继承方式。在这种继承方式下，子对象通过原型链继承父对象的属性和方法。例如：

const parentObj = {
  name: "John Doe",
  age: 30
};

const childObj = Object.create(parentObj);

console.log(childObj.name); // John Doe
console.log(childObj.age); // 30

在上面的代码中，childObj 是 parentObj 的子对象，childObj 通过原型链继承了 parentObj 的 name 和 age 属性。

基于类的继承

基于类的继承是 JavaScript 中另一种常见的继承方式。在这种继承方式下，子类通过 extends 关键字继承父类的属性和方法。例如：

class ParentClass {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

class ChildClass extends ParentClass {
  constructor(name, age, school) {
    super(name, age);
    this.school = school;
  }

  goToSchool() {
    console.log(`I am going to ${this.school}.`);
  }
}

const parent = new ParentClass("John Doe", 30);
const child = new ChildClass("Jane Doe", 25, "Harvard University");

parent.greet(); // Hello, my name is John Doe and I am 30 years old.
child.greet(); // Hello, my name is Jane Doe and I am 25 years old.
child.goToSchool(); // I am going to Harvard University.