现代 JavaScript 教程原型与原型链为什么它是 JS 最难懂也最关键的概念【免费下载链接】zh.javascript.info现代 JavaScript 教程The Modern JavaScript Tutorial以最新的 ECMAScript 规范为基准通过简单但足够详细的内容为你讲解从基础到高阶的 JavaScript 相关知识。项目地址: https://gitcode.com/gh_mirrors/zh/zh.javascript.info在现代 JavaScript 教程中原型Prototype与原型链是每个开发者都绕不开的核心概念。它解释了为什么一个对象能继承另一个对象的方法也是理解 class、this 绑定、继承机制的基石。本文面向初学者用最少、最直观的方式讲清楚原型是什么、原型链如何工作、以及它在真实代码中为什么关键。 为什么原型这么难懂很多初学者的困惑来自一个误解JavaScript 是基于原型的语言而不是基于类的语言。其他语言里A 继承 B意味着把 B 的代码复制给 A而在 JavaScript 中继承意味着建立一条查找路径——A 找不到某属性时会顺着路径去 B 里找。国际空间站的组装过程恰好是这个思想的绝佳类比每个舱段模块只负责自己的部分需要供电或通信时就顺着连接结构去相邻模块查找。 原型是什么一个隐藏属性 [[Prototype]]在 JavaScript 中每个对象都有一个特殊的隐藏属性[[Prototype]]规范命名它要么为null要么指向另一个对象——这个对象就叫原型。核心规则只有一条当你读取对象上不存在的属性时JavaScript 会自动去它的原型中查找。一个经典示例动物与兔子let animal { eats: true }; let rabbit { jumps: true, __proto__: animal }; alert(rabbit.eats); // true —— 来自原型 animal alert(rabbit.jumps); // true —— 兔子自己的属性rabbit.__proto__就是[[Prototype]]的历史遗留访问器现代代码更推荐Object.getPrototypeOf/Object.setPrototypeOf。⛓️ 原型链可以很长的一条查找路径原型可以层层嵌套形成原型链Prototype Chain。查找属性时引擎从对象自身开始逐级向上直到找到或触及nulllet animal { eats: true, walk() { alert(Animal walk); } }; let rabbit { jumps: true, __proto__: animal }; let longEar { earLength: 10, __proto__: rabbit }; longEar.walk(); // Animal walk来自 animal alert(longEar.jumps); // true来自 rabbit查找顺序longEar → rabbit → animal → Object.prototype → null。链有两个限制不能形成闭环赋值时若成环会抛出错误一个对象只能有一个[[Prototype]]不存在多继承。✍️ 关键陷阱写入不走原型只有读取才走这是新手最容易踩的坑读取缺失属性 → 去原型找写入/删除属性 → 永远直接作用于对象本身不会碰原型。rabbit.walk function() { alert(Bounce-bounce!); }; // 现在 rabbit 有了自己的 walk彻底遮蔽了原型上的方法还有一个高频疑问继承来的方法里this指向谁答案this永远是点号前面的对象与方法是自己定义的还是继承来的无关。方法被共享但对象状态是各自独立的——rabbit.sleep()修改的是rabbit.isSleeping原型的animal不受影响。 构造函数与 F.prototype原型的另一张面孔使用new F()创建对象时F.prototype会被用作新对象的[[Prototype]]function Rabbit(name) { this.name name; } Rabbit.prototype { eats: true }; let rabbit new Rabbit(White); alert(rabbit.eats); // true来自 Rabbit.prototype每个函数默认都有一个prototype属性且自带constructor指回函数本身// 默认Rabbit.prototype { constructor: Rabbit } alert(rabbit.constructor Rabbit); // true经由原型链继承这让你可以照着现有对象再造一个同类new rabbit.constructor(Black)。 原生对象也在用原型链Array、Date、String这些内建对象同样遵循原型继承。例如你从未写过concat但它藏在Array.prototype里所以任何数组都能调用——这就是原生原型的威力。现代 class 语法正是这套机制的糖衣class Child extends Parent底层做的依然是把子类的[[Prototype]]指向父类。️ 动手验证在浏览器控制台调试原型链理论不如实践。打开浏览器开发者工具直接在控制台验证原型链试试这几行你会对原型链所见即所得let animal { eats: true }; let rabbit { jumps: true, __proto__: animal }; Object.getPrototypeOf(rabbit) animal; // true rabbit.hasOwnProperty(jumps); // true rabbit.hasOwnProperty(eats); // false继承来的Safari 用户需要在偏好设置的高级中勾选 Show Develop menu in menu bar 才能打开控制台 延伸学习官方教程章节导航想系统吃透这块内容可以按顺序阅读本仓库的原型章节位于 1-js/08-prototypes/原型继承入门01-prototype-inheritance/article.md构造函数与 F.prototype02-function-prototype/article.md原生原型03-native-prototypes/article.md原型方法与 hasOwnProperty04-prototype-methods/article.md章节总目录index.md学完原型后建议衔接 09-classes/ 章节你会惊讶地发现 class 语法不过是原型链的优雅包装。 总结一张表记住原型与原型链要点说明什么是原型对象隐藏的[[Prototype]]指向另一个对象或null什么时候用到读取缺失属性时沿原型链向上查找写入会不会走原型不会写操作直接作用于对象本身this指向谁点号前的对象与继承无关方法共享吗方法共享状态各自独立遍历谁for..in含继承属性Object.keys只含自有属性原型与原型链是 JavaScript 最难懂却也最关键的概念之一——一旦理解查找路径这个心智模型class、this 绑定、继承甚至instanceof都会瞬间通透。【免费下载链接】zh.javascript.info现代 JavaScript 教程The Modern JavaScript Tutorial以最新的 ECMAScript 规范为基准通过简单但足够详细的内容为你讲解从基础到高阶的 JavaScript 相关知识。项目地址: https://gitcode.com/gh_mirrors/zh/zh.javascript.info创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考