当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript原型链是什么及原理详解

JavaScript原型链是什么及原理详解

2026-05-09 08:30:37 0浏览收藏

JavaScript原型链并非传统意义上的数据结构，而是一套运行时动态触发的隐式委托查找机制：当访问对象上不存在的属性或方法时，引擎会沿着[[Prototype]]（或__proto__）逐级向上搜索，直至Object.prototype或null为止；它决定了对象如何“借”到继承的方法（如toString），却严格区分读取与赋值——所有赋值操作都作用于对象自身，造成属性屏蔽而非覆盖；new操作符、构造函数、class、箭头函数及Object.create(null)等各自以不同方式影响原型链的起点和长度，而现代开发中应使用Object.getPrototypeOf等标准API替代直接操作__proto__，以确保代码健壮性与可维护性。

什么是原型链_它在javascript中如何工作

原型链不是 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），不是覆盖。

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