JavaScript原型链详解与应用方法

JavaScript的原型链是其继承机制与属性查找逻辑的底层核心，每个对象通过内部[[Prototype]]链接向上追溯至null，形成一条动态的属性搜索路径；它既可通过构造函数、Object.create()或ES6 class语法自然构建，又需借助hasOwnProperty()、in操作符等精准区分自有与继承属性，同时警惕修改内置原型、共享引用类型等常见陷阱——掌握它，才能真正理解JavaScript“看似魔法”的行为本质。

原型链是 JavaScript 中实现对象继承和属性查找的核心机制。简单说，每个对象都有一个内部属性 [[Prototype]]（可通过 __proto__ 访问，或更推荐用 Object.getPrototypeOf()），它指向另一个对象——这个被指向的对象就是它的“原型”。当访问一个对象的属性时，如果该对象自身没有这个属性，JS 引擎会沿着这条 [[Prototype]] 链向上查找，直到找到该属性，或到达链的末端（即 null）为止。

原型链是怎么形成的？

大多数对象的原型链起始于构造函数的 prototype 属性：

• 用 new Foo() 创建实例时，实例的 [[Prototype]] 自动指向 Foo.prototype；
• Foo.prototype 默认是一个普通对象，它的 [[Prototype]] 指向 Object.prototype；
• Object.prototype 的 [[Prototype]] 是 null，链在此终止。

例如：const arr = [1, 2]; → arr.__proto__ === Array.prototype → Array.prototype.__proto__ === Object.prototype → Object.prototype.__proto__ === null。

如何手动设置或利用原型链？

常见方式有三种：

• 构造函数 + prototype：在 Constructor.prototype 上添加方法，让所有实例共享；
• Object.create()：直接以指定对象为原型创建新对象，比如 const child = Object.create(parent)；
• class 语法（ES6+）：本质仍是基于原型链，extends 会让子类的 prototype.__proto__ 指向父类的 prototype。

怎么判断属性来自哪里？

区分“自有属性”和“继承属性”很关键：

• obj.hasOwnProperty('key') → 只检查对象自身（不查原型链）；
• 'key' in obj → 查整个原型链；
• Object.prototype.isPrototypeOf(obj) → 判断某个对象是否在 obj 的原型链上。

例如：{}.hasOwnProperty('toString') 是 false，但 'toString' in {} 是 true，因为它是从 Object.prototype 继承来的。

需要注意的坑

原型链虽灵活，但也容易出错：

• 修改内置原型（如 Array.prototype）会影响所有数组，尽量避免；
• 给原型添加引用类型属性（如数组、对象）会导致所有实例共享，应放在构造函数内初始化；
• 箭头函数没有自己的 this 和 prototype，不能用作构造函数。

基本上就这些。理解原型链不是为了死记结构，而是为了看清 JS “属性查找”和“继承”的真实路径——它不复杂，但容易忽略。

今天关于《JavaScript原型链详解与应用方法》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！