揭秘 JS 原型链：JavaScript 程序员必备知识

前端

2024-01-18 06:28:00

JavaScript 原型链详解

JavaScript 原型链是一套机制，它允许对象访问和继承其他对象的属性和方法。这对于构建可重用代码和组织复杂对象非常有用。

常见概念

构造函数

构造函数是一种特殊的函数，用于创建新对象。构造函数的名称通常以大写字母开头，例如 Function()、Object() 或 Array()。

构造函数扩展

构造函数扩展是指在构造函数中添加新的属性或方法。这可以通过使用 prototype 属性来实现。例如，以下代码将 greet() 方法添加到 Person 构造函数中：

function Person() {
  this.name = "John Doe";
}

Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name}.`);
};

现在，所有通过 Person 构造函数创建的对象都可以访问 greet() 方法。例如：

const person1 = new Person();
person1.greet(); // Output: Hello, my name is John Doe.

原型规则和示例

每个对象都有一个 __proto__ 属性，该属性指向其原型对象。
原型对象也具有一个 __proto__ 属性，依此类推，直到达到原型链的顶部。
顶部对象是 Object.prototype，它是所有对象的最终原型。

以下示例演示了原型链是如何工作的：

const person = {
  name: "John Doe",
};

const student = Object.create(person);
student.age = 20;

const graduate = Object.create(student);
graduate.degree = "Computer Science";

console.log(graduate.name); // Output: John Doe
console.log(graduate.age); // Output: 20
console.log(graduate.degree); // Output: Computer Science