javascript_原型链的工作原理

原型链是JavaScript实现继承和属性查找的核心机制，当访问对象属性时，若自身不存在，则沿[[Prototype]]链向上查找直至null；每个函数有prototype指向原型对象，对象通过__proto__（推荐用Object.getPrototypeOf）指向其构造函数的prototype，从而形成链式结构；例如p → Person.prototype → Object.prototype → null；属性查找基于此链进行，修改原型可动态扩展功能，如为Array.prototype添加myPush则所有数组可用；instanceof通过检查构造函数的prototype是否在对象原型链上来判断类型。

JavaScript 的原型链是实现对象继承和属性查找的核心机制。当访问一个对象的属性时，JavaScript 引擎会先在该对象自身查找，如果找不到，就会沿着原型链向上查找，直到找到属性或到达原型链末端（null）为止。

原型与 prototype 属性

每个函数在创建时都会自动生成一个 prototype 属性，这个属性指向一个对象，称为“原型对象”。这个原型对象默认包含一个 constructor 属性，指向原函数。

而每个对象（除部分特殊情况外）都有一个内部属性 [[Prototype]]，可以通过 __proto__ 访问（现代开发中推荐使用 Object.getPrototypeOf()）。这个 [[Prototype]] 指向其构造函数的 prototype 对象。

当你用构造函数创建一个新对象时，这个对象的 [[Prototype]] 就会链接到构造函数的 prototype。

立即学习“Java免费学习笔记（深入）”；

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

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

const p = new Person("Alice");
p.sayHello(); // 输出: Hello, Alice

这里 p 自身没有 sayHello 方法，但 JavaScript 会在 Person.prototype 中找到它。

原型链的形成

原型链的本质是一连串通过 [[Prototype]] 连接的对象。当一个属性在当前对象找不到时，就会去它的原型上找，如果原型上也没有，就继续查找原型的原型，直到某一步的原型为 null 为止。

所有普通对象的最终原型通常是 Object.prototype，而它的 [[Prototype]] 是 null，标志着链的结束。

• p → Person.prototype → Object.prototype → null
• 数组实例：arr → Array.prototype → Object.prototype → null
• 函数：fn → Function.prototype → Object.prototype → null

属性查找与继承

JavaScript 的继承基于原型链实现。子对象能访问父对象原型上的方法和属性，这就是“原型继承”。

Figma

Figma 是一款基于云端的 UI 设计工具，可以在线进行产品原型、设计、评审、交付等工作。

148

查看详情

可以通过修改原型来动态扩展已有对象的功能。

Array.prototype.myPush = function(val) {
  this[this.length] = val;
  return this.length;
};

所有数组都可以使用 myPush 方法，因为它们的原型链都指向 Array.prototype。

注意：给原型添加属性会影响所有继承该原型的对象，需谨慎操作。

instanceof 与原型链

instanceof 运算符就是通过原型链判断对象是否由某个构造函数创建的。

p instanceof Person 实际是检查 Person.prototype 是否出现在 p 的原型链上。

如果在链中找到匹配的 prototype，返回 true，否则 false。

基本上就这些。原型链让 JavaScript 实现了灵活的对象继承机制，理解它有助于掌握对象行为和属性查找逻辑。不复杂但容易忽略细节。

以上就是javascript_原型链的工作原理的详细内容，更多请关注php中文网其它相关文章！