JavaScript 原型链（constructor、prototype、[[prototype]]）本质和关系

2024-02-07 11:36:18

前言

JavaScript 原型链是 JavaScript 中一项重要的概念，它可以帮助我们理解 JavaScript 中的对象是如何工作的。在这篇文章中，我们将探讨 JavaScript 原型链中 constructor、prototype 和 [[prototype]] 的本质和关系，以及如何在原型链中实现继承。

原型链的本质

构造函数 constructor

构造函数是用来创建对象的函数，例如：

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

当我们使用 new 操作符调用构造函数时，就会创建一个新的对象，该对象的 prototype 属性指向构造函数的 prototype 属性，也就是说，对象的 prototype 属性指向构造函数的原型对象。

原型对象 prototype

原型对象是构造函数的属性，它是一个普通对象，通常用于存储该构造函数下所有实例的共享属性和方法。例如：

Person.prototype.sayHello = function() {
  console.log("Hello, my name is " + this.name);
};

当我们访问对象的属性或方法时，如果对象本身没有该属性或方法，那么 JavaScript 会沿着原型链向上查找，直到找到该属性或方法。

隐式原型链 [[prototype]]

每个对象都有一个隐式原型链，它是一个指向其原型对象的指针，我们可以通过 Object.getPrototypeOf() 方法获取对象的隐式原型链。例如：

const person = new Person("John");
const personPrototype = Object.getPrototypeOf(person);
console.log(personPrototype === Person.prototype); // true

原型链中的继承

在 JavaScript 中，我们可以通过原型链实现继承。例如：

function Student(name, school) {
  Person.call(this, name);
  this.school = school;
}

// 在 Student.prototype 上添加 saySchool 方法
Student.prototype.saySchool = function() {
  console.log("I study at " + this.school);
};

// 让 Student 继承 Person
Student.prototype.__proto__ = Person.prototype;