当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript原型与继承全解析

JavaScript原型与继承全解析

2026-01-22 23:19:58 0浏览收藏

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

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

什么是原型和原型链在javascript中_怎样理解基于原型的继承【教程】

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

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() 本质是绑定父类构造函数并调用