剖析 JavaScript 原型链：揭秘面向对象编程的精髓

2023-11-28 20:54:00

JavaScirpt 基础之原型链

JavaScript 作为一门面向对象的语言，其对象系统与其他语言有所不同。它采用原型链机制来实现继承，这与 C++ 或 Java 中的经典继承有所区别。原型链机制允许对象继承自其他对象，从而共享属性和方法，实现代码重用和简化。

1. 理解原型链

原型链的概念可以追溯到 JavaScript 中的原型对象（prototype object）。每个对象都有一个原型对象，该对象包含了该对象共享的属性和方法。当访问一个对象的属性或方法时，JavaScript 首先会在该对象中查找，如果找不到，则会沿着原型链向上查找，直到找到该属性或方法为止。这种查找机制称为原型链查找。

// 创建一个对象
const person = {
  name: 'John Doe',
  age: 30,
};

// 访问对象属性
console.log(person.name); // 'John Doe'

// 访问原型对象属性
console.log(person.toString()); // '[object Object]'

// 原型对象
console.log(person.__proto__); // {}

在上面的示例中，person 对象的原型对象是一个空对象 {}，它包含了所有 JavaScript 对象共享的属性和方法，例如 toString() 方法。当我们访问 person.name 时，JavaScript 会首先在 person 对象中查找 name 属性，由于 person 对象中存在 name 属性，因此直接返回其值 'John Doe'。

2. 继承与委托

JavaScript 中的继承是通过原型链实现的。当一个对象被创建时，它会继承自另一个对象，称为其父对象。子对象可以访问并使用父对象的所有属性和方法，就像它们是自己的属性和方法一样。这种继承机制称为委托。

// 创建父对象
const parent = {
  name: 'John Doe',
  age: 30,
};

// 创建子对象
const child = Object.create(parent);

// 访问子对象属性
console.log(child.name); // 'John Doe'

// 访问父对象属性
console.log(child.age); // 30

// 访问原型对象属性
console.log(child.toString()); // '[object Object]'

// 原型对象
console.log(child.__proto__); // {name: 'John Doe', age: 30}

在上面的示例中，child 对象继承自 parent 对象，因此它具有与 parent 对象相同的属性和方法。当我们访问 child.name 时，JavaScript 会首先在 child 对象中查找 name 属性，由于 child 对象中不存在 name 属性，因此会沿着原型链向上查找，直到找到 parent 对象中的 name 属性，然后返回其值 'John Doe'。