原型链是什么？详解JS原型链原理

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《原型链是什么？JavaScript原型链工作原理详解》，聊聊，希望可以帮助到正在努力赚钱的你。

原型链是JavaScript中对象间隐式委托查找的规则，通过[[Prototype]]或__proto__向上逐层查找属性，直至null；它非数据结构，仅用于读取与调用，赋值始终作用于对象自身。

原型链不是 JavaScript 里的“链表”或“数据结构”，它是一套对象间隐式委托查找的规则——当你访问一个对象上不存在的属性时，JavaScript 引擎会顺着 __proto__（或内部的 [[Prototype]]）一层层向上找，直到找到该属性，或到达 null 为止。

为什么访问 obj.toString() 不报错？

因为几乎所有对象最终都连到 Object.prototype，而 toString 就定义在那里。即使你写的是 const obj = { a: 1 }，它内部仍通过 __proto__ 指向 Object.prototype，所以能“借到”方法。

• obj.__proto__ === Object.prototype → true
• Object.prototype.__proto__ → null（终点）
• 这个查找过程就是“原型链查找”，不是预计算的链，而是运行时动态触发的

new 和构造函数如何影响原型链？

用 new Foo() 创建实例时，实例的 __proto__ 会被自动设为 Foo.prototype。注意：Foo.prototype 是函数对象身上的一个普通属性，它默认是个对象，且其 constructor 指回 Foo，但它本身也有自己的 __proto__（通常指向 Object.prototype）。

function Person(name) {
  this.name = name;
}
Person.prototype.sayHi = function() { return `Hi, ${this.name}` };

const p = new Person('Alice');
// p.__proto__ === Person.prototype → true
// Person.prototype.__proto__ === Object.prototype → true
// p.sayHi() → "Hi, Alice"

箭头函数、class 和 Object.create(null) 的特殊性

它们不遵循“默认挂到 Object.prototype”的路径：

• 箭头函数没有自己的 this，也没有 prototype 属性（typeof (() => {}).prototype 是 'undefined'）
• class 声明的构造函数有 prototype，但类体内的方法定义在 MyClass.prototype 上，和函数声明一致；不过 static 方法挂在类本身，不进原型链
• Object.create(null) 创建的对象没有 __proto__（即 [[Prototype]] === null），因此完全不继承任何方法：调用 obj.toString() 会直接报 TypeError

别误把 prototype 和 __proto__ 当成一对对称概念

prototype 只存在于函数对象上，是供 new 时赋给实例 __proto__ 用的“模板”；而 __proto__ 存在于所有对象（包括函数）上，指向它的“上游原型”。现代代码应优先用 Object.getPrototypeOf(obj) 读取、Object.setPrototypeOf(obj, proto) 修改，避免直接操作 __proto__（非标准且性能差）。

最易忽略的一点：原型链只用于**属性读取和方法调用**，赋值 obj.x = 1 永远写在 obj 自身，不会修改原型上的同名属性——这是隐式屏蔽（shadowing），不是覆盖。

理论要掌握，实操不能落！以上关于《原型链是什么？详解JS原型链原理》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！