技术博客：彻底掌握 JS 原型链，用最全面直观的视角进入 JS 高级编程

在 JavaScript 中，原型链是一个重要的概念，它决定了对象之间的继承关系和属性查找顺序。理解原型链对于理解 JavaScript 的高级特性，如继承、原型委托等至关重要。本文将从原型链的基本概念讲起，深入分析原型链的工作原理，并通过实例演示如何使用原型链实现面向对象编程。

原型链的基本概念

在 JavaScript 中，每个对象都有一个原型对象，这个原型对象又可以拥有自己的原型对象，如此循环往复，直到原型对象为 null。对象的原型对象可以通过 proto 属性访问。

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

const person = new Person('John');

console.log(person.__proto__ === Person.prototype); // true

在上面的示例中，person 对象的原型对象是 Person.prototype，它包含了所有 Person 对象共享的属性和方法。

原型链的工作原理

当访问对象的属性或方法时，JavaScript 会沿着原型链向上查找，直到找到该属性或方法。如果在当前对象中没有找到，则会继续在原型对象中查找，以此类推，直到找到该属性或方法或到达原型链的末端。

const person = new Person('John');

console.log(person.name); // John

在上面的示例中，当访问 person.name 属性时，JavaScript 会首先在 person 对象中查找，由于 person 对象中存在 name 属性，因此直接返回该属性的值。

原型链的继承机制

在 JavaScript 中，原型链可以实现对象的继承。子对象可以继承父对象的原型对象，从而获得父对象的所有属性和方法。

function Parent() {
  this.name = 'John';
}

function Child() {
  this.__proto__ = new Parent();
}

const child = new Child();

console.log(child.name); // John

在上面的示例中，Child 函数的原型对象是 Parent 函数的实例，因此 child 对象可以继承 Parent 对象的 name 属性。

原型链的面向对象编程

原型链可以用于实现面向对象编程。在 JavaScript 中，类实际上只是一个语法糖，它本质上也是一个函数，只不过提供了更加简洁的语法。

class Person {
  constructor(name) {
    this.name = name;
  }
}

const person = new Person('John');

console.log(person.name); // John

在上面的示例中，Person 类定义了一个构造函数，该构造函数接收一个 name 参数并将其存储在 this.name 属性中。当使用 new 操作符创建 Person 对象时，JavaScript 会调用构造函数并创建一个新的对象，该对象将继承 Person 类的原型对象。

总结

原型链是 JavaScript 中一个重要的概念，它决定了对象之间的继承关系和属性查找顺序。理解原型链对于理解 JavaScript 的高级特性，如继承、原型委托等至关重要。本文从原型链的基本概念讲起，深入分析了原型链的工作原理，并通过实例演示了如何使用原型链实现面向对象编程。