JS 原型链：揭开 JavaScript 隐藏的机制

在 JavaScript 的世界中，"对象" 无处不在。从 DOM 元素到用户定义的对象，它们构成了应用程序的基础。然而，在幕后，有一个强大的机制称为 "prototype chain " 在发挥作用，它控制着对象的行为和属性的访问。

函数对象的显式 Prototype 属性

每个 JavaScript 函数对象都拥有一个名为 prototype 的显式属性，它指向一个对象。这个对象被称为函数的 "prototype "。prototype 属性允许向函数创建的对象添加属性和方法。

例如：

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

// 向 Person.prototype 添加一个 sayHello 方法
Person.prototype.sayHello = function() {
  console.log("Hello, my name is " + this.name);
};

现在，使用 Person 函数创建的对象将可以访问 sayHello 方法，即使它没有在构造函数中定义：

const person1 = new Person("John");
person1.sayHello(); // 输出: "Hello, my name is John"

实例对象的隐式 proto 属性

每个 JavaScript 实例对象都包含一个隐式属性 __proto__，它指向函数的 prototype 属性。这个属性允许实例对象访问函数的 prototype 上定义的属性和方法。

举个例子：

console.log(person1.__proto__ === Person.prototype); // 输出: true

HTML 中的对象创建过程

在 HTML 中，当我们使用 document.createElement 创建一个元素时，JavaScript 会自动为该元素创建 __proto__ 指向 HTMLElement 函数的 prototype。

const element = document.createElement("div");
console.log(element.__proto__ === HTMLElement.prototype); // 输出: true

属性访问

当访问一个对象的属性时，JavaScript 会首先在该对象中查找该属性。如果找不到，它会沿着 __proto__ 链向上查找，直到找到该属性或达到 Object.prototype，这是所有 JavaScript 原型的根。

总结

JavaScript 原型链是一个强大的机制，它允许对象访问其他对象定义的属性和方法。通过理解 prototype 和 proto 属性，你可以深入了解 JavaScript 中对象的行为和属性访问的内部机制。这对于创建更灵活、可维护和可扩展的应用程序至关重要。