JavaScript原型链与继承属性解析

今天golang学习网给大家带来了《掌握JavaScript原型链，理解继承对属性的影响》，其中涉及到的知识点包括等等，无论你是小白还是老手，都适合看一看哦~有好的建议也欢迎大家在评论留言，若是看完有所收获，也希望大家能多多点赞支持呀！一起加油学习~

原型链靠运行时属性查找规则驱动：读取属性时先查自身，再沿[[Prototype]]逐级向上查找直至null；prototype是函数特有属性，用于设置new实例的[[Prototype]]，而[[Prototype]]才是实际继承载体。

原型链是怎么跑起来的

JavaScript 中每个对象都有一个内部属性 [[Prototype]]，它指向另一个对象（即“原型”），而那个对象也可能有自己的 [[Prototype]]，如此逐级向上，直到为 null —— 这就是原型链。不是靠语法糖或关键字驱动，而是靠运行时属性查找规则：当读取一个对象的属性时，引擎会先查自身，再顺着 __proto__（或 Object.getPrototypeOf()）一层层往上找，直到找到或链断。

常见误解是把 prototype 属性和 [[Prototype]] 混为一谈：prototype 是函数对象才有的属性，仅用于设置“将来用 new 创建的实例”的 [[Prototype]]；而 [[Prototype]] 才是所有对象实际继承关系的载体。

实操建议：

• 用 Object.getPrototypeOf(obj) 查对象的真实原型，比直接访问 obj.__proto__ 更规范、更兼容
• 用 obj.constructor 判断构造函数不可靠——它只是原型上的一个可被覆盖的属性，不是绑定关系
• 修改 Function.prototype 或 Object.prototype 会影响全局，慎用；尤其不要在生产环境往 Object.prototype 上加属性

new 和 Object.create() 的原型链接差异

new Foo() 和 Object.create(Foo.prototype) 都能创建以 Foo.prototype 为原型的对象，但它们的初始化逻辑和隐式连接点不同。

new 会执行构造函数，并把新对象的 [[Prototype]] 设为 Foo.prototype；Object.create() 不调用任何函数，只做原型链接，适合纯委托场景（比如实现 mixin 或轻量级继承）。

容易踩的坑：

• Object.create(null) 创建的是“无原型”对象，它没有 toString、hasOwnProperty 等方法，for...in 也不会遍历任何继承属性
• 如果用 class 定义构造器，其 prototype 默认不可枚举、不可写、不可配置，直接赋值 MyClass.prototype = {...} 会静默失败
• new 出来的实例，其 constructor 指向构造函数；但用 Object.create() 创建的对象，constructor 指向的是原型链上第一个有该属性的对象（通常是 Object），需手动修复

属性遮蔽（Shadowing）怎么影响读写行为

当子对象自身拥有某个属性，即使原型链上也存在同名属性，读写都会优先作用于自身——这就是遮蔽。它让继承看起来像“复制”，其实只是查找顺序的短路。

关键点在于：读操作走原型链，写操作默认只写自身（除非属性是 setter 且显式委托）。这意味着 obj.prop = value 永远不会修改原型上的 prop，哪怕它是个可写数据属性。

示例说明：

const parent = { count: 1 };
const child = Object.create(parent);
console.log(child.count); // 1 ← 从 parent 读取
child.count = 2;
console.log(child.count); // 2 ← 写入自身，遮蔽了 parent.count
console.log(parent.count); // 1 ← parent 未变

常见误判场景：

• 用 for...in 遍历时，遮蔽属性会出现在结果中，但原型上被遮蔽的同名属性不会出现
• hasOwnProperty() 只检查自身属性，不查原型链；要判断是否“真正继承”，得用 Object.prototype.hasOwnProperty.call(obj, 'key')
• 使用 Object.assign() 合并对象时，它只拷贝自身可枚举属性，不会触发原型链上的 getter/setter

ES6 class 语法背后的原型链没变

class 是语法糖，编译后仍是基于 prototype 和 [[Prototype]] 的机制。它没引入新的继承模型，只是约束了写法、禁用了某些危险操作（比如在类体中给 prototype 重新赋值）。

值得注意的细节：

• 类声明会自动设 constructor 属性，且该属性不可枚举、不可配置；但你可以通过 Object.defineProperty() 显式改写（不推荐）
• super() 在子类构造器中必须调用，否则无法访问 this——本质是确保子实例的 [[Prototype]] 正确链接到父类 prototype
• 静态方法（static）其实是定义在类函数对象本身上的，不是其 prototype 上的，所以不会被实例继承，但会被子类函数继承（因为子类函数的 [[Prototype]] 指向父类函数）

原型链机制本身没变，变的只是我们组织它的习惯和约束。越想绕过它去“模拟类”，越容易掉进遮蔽、丢失 constructor、误判 instanceof 的坑里。

好了，本文到此结束，带大家了解了《JavaScript原型链与继承属性解析》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！