Javascript原型链与属性查找详解

积累知识，胜过积蓄金银！毕竟在文章开发的过程中，会遇到各种各样的问题，往往都是一些细节知识点还没有掌握好而导致的，因此基础知识点的积累是很重要的。下面本文《Javascript原型链与属性查找解析》，就带大家讲解一下知识点，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

JavaScript原型链是对象属性查找的核心机制：从自身开始，沿__proto__逐级向上搜索至null；prototype是函数的属性，指向实例的原型；__proto__是实例的内部原型引用；constructor指向构造函数。

JavaScript 中的原型链是对象查找属性的核心机制。当你访问一个对象的属性时，如果该对象自身没有这个属性，JS 引擎会沿着它的 __proto__（即内部原型）向上查找，直到找到该属性，或到达原型链末端（null）为止。

原型链是怎么形成的

每个对象都有一个内部属性 [[Prototype]]（可通过 __proto__ 访问），它指向该对象的原型对象。函数对象还有 prototype 属性，用于指定其“实例”的原型。

例如：

• function Person() {} 定义后，Person.prototype 是一个对象，其 constructor 指向 Person；
• const p = new Person() 创建实例后，p.__proto__ === Person.prototype；
• Person.prototype.__proto__ === Object.prototype，因为函数的 prototype 默认继承自 Object；
• Object.prototype.__proto__ === null，这是原型链的终点。

属性查找过程：从自身到 null

当读取 obj.prop 时，引擎按以下顺序搜索：

• 先检查 obj 自身是否有 prop（自有属性）；
• 如果没有，就去 obj.__proto__ 上找；
• 还没找到，继续查 obj.__proto__.__proto__；
• 如此逐级向上，直到某个原型对象有该属性，或抵达 null（此时返回 undefined）。

注意：只在读取（get）和 in 操作符中走原型链；for...in 会遍历自身 + 可枚举的原型属性；hasOwnProperty 只检测自身属性。

区分 prototype、__proto__ 和 constructor

这三个概念常被混淆，但作用不同：

• Function.prototype：函数对象才有的属性，是所有该函数创建的实例的原型对象；
• obj.__proto__：实例对象的内部原型引用，等价于 Object.getPrototypeOf(obj)；
• Constructor.prototype === obj.__proto__ 是常规关系，但不是绝对相等（比如用 Object.create(null) 创建的对象，其 __proto__ 为 null，没有构造函数）。

现代写法与注意事项

ES6 引入了 Object.getPrototypeOf() 和 Object.setPrototypeOf()，推荐代替直接操作 __proto__（后者是非标准且影响性能）。

• 获取原型：Object.getPrototypeOf(obj)；
• 设置原型（慎用）：Object.setPrototypeOf(obj, proto)；
• 创建带指定原型的对象：Object.create(proto)；
• 检查属性是否在原型上：!(obj.hasOwnProperty('prop')) && 'prop' in obj。

不复杂但容易忽略。

终于介绍完啦！小伙伴们，这篇关于《Javascript原型链与属性查找详解》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！