JavaScript原型继承详解与学习指南

知识点掌握了，还需要不断练习才能熟练运用。下面golang学习网给大家带来一个文章开发实战，手把手教大家学习《javascript原型继承详解与学习指南》，在实现功能的过程中也带大家重新温习相关知识点，温故而知新，回头看看说不定又有不一样的感悟！

JavaScript原型链是运行时属性查找机制，实例通过__proto__链接到构造函数prototype，最终指向Object.prototype；new操作符自动设置该链接，Object.getPrototypeOf是标准获取方式，class只是语法糖，底层仍基于原型。

JavaScript 中的原型和原型链不是抽象概念，而是实际运行时对象查找属性的机制——所有实例对象通过 __proto__ 链接到构造函数的 prototype，最终指向 Object.prototype，再往上是 null。

为什么 new Foo() 创建的对象能访问 Foo.prototype 上的方法？

因为 new 操作符会自动把新对象的 __proto__ 指向 Foo.prototype。这个链接不是拷贝，是运行时动态查找的委托关系。

常见错误现象：

• 手动修改了 Foo.prototype 之后，已创建的实例仍能访问新方法（因为查的是引用，不是快照）
• 误以为 obj.__proto__ === Foo.prototype 是“继承”，其实只是属性访问链的起点
• 给实例直接赋值同名属性（如 obj.toString = ...），会屏蔽原型上的 toString，但不影响其他实例

Object.getPrototypeOf(obj) 和 obj.__proto__ 有什么区别？

Object.getPrototypeOf(obj) 是标准、安全的获取原型方式；__proto__ 是非标准遗留属性，虽被广泛支持，但不推荐在生产代码中使用。

使用场景：

• 需要兼容旧环境且明确知道目标浏览器支持 __proto__ 时，可临时调试用
• 写库或工具函数时，必须用 Object.getPrototypeOf，否则在严格模式或某些嵌入环境（如某些小程序 JS 引擎）中会报错
• Object.setPrototypeOf(obj, proto) 是对应的标准设值方法，不要直接赋值 __proto__

为什么 typeof Array === 'function'，但 instanceof Array 返回 true？

因为 Array 是函数（构造函数），它的 prototype 被设计为具有特定内部属性（如 [[Class]] === 'Array'），而 instanceof 的判断逻辑就是沿着左操作数的 __proto__ 链，逐级比对是否等于右操作数的 prototype。

关键点：

• [] instanceof Array → [].__proto__ === Array.prototype → 成立
• Array.prototype instanceof Object → 因为 Array.prototype.__proto__ === Object.prototype
• 跨 iframe 时 instanceof 会失效（不同全局环境的 Array 构造函数不相等），此时要用 Array.isArray()

ES6 class 声明是否改变了原型链本质？

没有。class 只是语法糖，底层仍是基于原型的机制。所有 class 定义的方法都挂载在 ClassName.prototype 上，extends 也只是设置子类 prototype.__proto__ 指向父类 prototype，并确保 constructor 正确。

容易踩的坑：

• 在 class 中定义的字段（如 value = 1）是实例属性，不是原型属性，每次 new 都重新分配
• 静态方法（static method()）挂在类本身上，不进入原型链，无法被实例继承
• 子类 constructor 中必须调用 super()，否则无法访问 this——因为 super() 才真正触发父类原型链的初始化

原型链真正的复杂点不在结构，而在它和属性描述符（get/set）、hasOwnProperty、in 操作符、for...in 遍历之间的交互细节——这些地方稍不注意，就会出现“属性明明定义了却读不到”或“删不掉”的情况。

今天关于《JavaScript原型继承详解与学习指南》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！