JavaScript原型与继承全解析

从现在开始，我们要努力学习啦！今天我给大家带来《JavaScript原型与继承详解》，感兴趣的朋友请继续看下去吧！下文中的内容我们主要会涉及到等等知识点，如果在阅读本文过程中有遇到不清楚的地方，欢迎留言呀！我们一起讨论，一起学习！

JavaScript中没有类继承，只有基于原型链的对象继承；prototype是函数的原型模板，__proto__是对象的原型引用，二者通过构造关系关联，共同构成属性查找的原型链。

JavaScript 中没有类继承，只有对象通过 __proto__（或 Object.getPrototypeOf()）链接到另一个对象，从而共享属性和方法——这就是原型链工作的本质。

什么是 prototype 和 __proto__？

prototype 是函数对象独有的属性，它是一个普通对象，用于为将来通过该函数（作为构造器）创建的实例提供共享属性和方法；__proto__ 是每个对象都有的内部属性（已不推荐直接访问），指向其构造器的 prototype 对象。

• function Foo() {} 创建后，Foo.prototype 自动被创建，它的 constructor 指回 Foo
• const f = new Foo() 时，f.__proto__ === Foo.prototype 为 true
• __proto__ 是对象的“原型引用”，prototype 是函数的“原型模板”——二者不是同一概念，但有明确指向关系
• 现代代码应避免直接读写 __proto__，改用 Object.getPrototypeOf(obj) 和 Object.setPrototypeOf(obj, proto)

原型链是怎么形成的？

当访问一个对象的属性时，JS 引擎会先在对象自身查找；没找到就沿 __proto__ 向上查找，直到找到或到达 null（即 Object.prototype.__proto__ === null）为止。这一连串的 __proto__ 连接就是原型链。

• {}.__proto__ === Object.prototype，Object.prototype.__proto__ === null，所以空对象的原型链长度为 1
• new Date().__proto__.__proto__ === Object.prototype，因为 Date.prototype.__proto__ === Object.prototype
• 原型链越长，属性查找越慢；避免在链深层频繁读取属性（如循环中反复访问 arr.constructor.prototype）
• hasOwnProperty 是 Object.prototype 上的方法，所有对象都能用，正是靠原型链继承来的

基于原型的继承怎么手动实现？

不用 class 或 extends，也能用 Object.create() 或设置 __proto__ 实现继承，但要注意构造函数调用和 constructor 指向。

• 推荐方式：Child.prototype = Object.create(Parent.prototype)，再补上 Child.prototype.constructor = Child
• 错误写法：Child.prototype = Parent.prototype —— 这会让父子共用同一个原型对象，修改会互相影响
• 若用 Object.setPrototypeOf(child, Parent.prototype)，只改变单个实例的原型，不适用于批量实例化
• ES6 的 class 只是语法糖，底层仍是基于 prototype 和 __proto__ 的链接，super() 本质是绑定父类构造函数并调用

真正容易被忽略的是：每个函数都有 prototype，但只有被 new 调用时，它的 prototype 才成为实例的原型；而箭头函数没有 prototype 属性，也不能被 new 调用。

以上就是《JavaScript原型与继承全解析》的详细内容，更多关于的资料请关注golang学习网公众号！