文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载导读在 JavaScript 的类体系中所有对象都继承自Object.prototype是一个基础事实但当你在代码里显式写出class Rabbit extends Object时结果会和普通的class Rabbit大相径庭。本文以《Modern JavaScript Tutorial》静态属性与方法章节1-js/09-classes/03-static-properties-methods/article.md的配套习题为切入点完整解析显式继承Object时构造函数必须调用super()的底层原因、extends建立的双原型链机制以及类级静态方法与普通原型方法在继承时的差异。读完本文你将能准确判断class Rabbit extends Object与class Rabbit在构造函数、静态方法查找链上的本质区别并能在实际项目中正确使用这一语法。题目回顾显式extends Object后为什么报错题目task.md首先给出一个普通类的基线示例class Rabbit { constructor(name) { this.name name; } } let rabbit new Rabbit(Rab); // hasOwnProperty 方法来自 Object.prototype alert( rabbit.hasOwnProperty(name) ); // true在这里rabbit实例通过Object.prototype上的通用方法hasOwnProperty检查自身属性一切正常。但如果把继承关系显式写出来同一个逻辑却直接抛错class Rabbit extends Object { constructor(name) { this.name name; } } let rabbit new Rabbit(Rab); alert( rabbit.hasOwnProperty(name) ); // Error为什么仅仅多了一个extends Object代码就崩溃了这正是本文要拆解的核心问题。原因一派生类构造函数必须调用super()答案其实很直接一个继承而来的类派生类derived class的构造函数必须调用super()否则this不会被初始化。参考 1-js/09-classes/02-class-inheritance/article.md 中关于构造函数继承的详细讲解JavaScript 内部对派生构造函数有一个特殊的内部标记[[ConstructorKind]]: derived普通函数包括基类构造函数被new执行时引擎会自动创建一个空对象并赋给this而派生构造函数运行时不会自己创建这个对象它期望父类构造函数来完成这个工作。因此派生构造函数必须通过super()调用父类构造函数来创建this否则就会抛出错误。修复方式就是在给this.name赋值之前先调用super()class Rabbit extends Object { constructor(name) { super(); // 继承时必须先调用父类构造函数 this.name name; } } let rabbit new Rabbit(Rab); alert( rabbit.hasOwnProperty(name) ); // true至此代码可以正常运行。但这只是第一层差异。原因二extends建立的双原型链即使修复了构造函数class Rabbit extends Object与class Rabbit之间仍然存在一个重要差异这需要从extends语法本身说起。正如静态属性与方法章节1-js/09-classes/03-static-properties-methods/article.md所解释的extends会同时设置两条[[Prototype]]引用构造函数函数的prototype之间用于实例方法的继承Rabbit.prototype的原型指向Animal.prototype构造函数函数本身之间用于静态方法的继承Rabbit函数对象的原型指向Animal函数对象。当继承目标是内置的Object时这意味着class Rabbit extends Object {} alert( Rabbit.prototype.__proto__ Object.prototype ); // (1) true alert( Rabbit.__proto__ Object ); // (2) true即Rabbit.prototype的原型链通向Object.prototype而Rabbit这个构造函数本身的原型链直接通向Object。第二条链带来一个直接后果Rabbit可以访问Object上的静态方法class Rabbit extends Object {} // 通常我们写 Object.getOwnPropertyNames alert ( Rabbit.getOwnPropertyNames({a: 1, b: 2})); // a,b反之如果类声明中没有extends Object则Rabbit.__proto__不会指向Objectclass Rabbit {} alert( Rabbit.prototype.__proto__ Object.prototype ); // (1) true alert( Rabbit.__proto__ Object ); // (2) false (!) alert( Rabbit.__proto__ Function.prototype ); // 和普通函数一样 // 错误Rabbit 上没有这个函数 alert ( Rabbit.getOwnPropertyNames({a: 1, b: 2})); // Error注意这里第一行结果依然是true任何类包括普通class Rabbit的prototype都会通过原型链最终连接到Object.prototype所以实例方法层面的所有对象都继承自Object.prototype始终成立。差异只发生在构造函数函数对象这一层静态方法getOwnPropertyNames、keys、values等是通过构造函数自身而不是其prototype来访问的。顺带一提Function.prototype上还挂着call、bind等通用函数方法。这两条路线上它们最终都可用因为内置构造器Object自身也满足Object.__proto__ Function.prototype所以无论Rabbit.__proto__指向Object还是Function.prototype函数通用方法都能沿原型链找到。原型链示意图下图rabbit-extends-object.svg并排展示了两种情况的原型链结构左侧为普通class Rabbit右侧为class Rabbit extends Object两侧都以Function.prototype内含call、bind等通用方法为原型链终点右侧多出一条Rabbit → Object的[[Prototype]]链从图中可以直观看到两条原型链实例方法与静态方法是独立并存的这正好呼应了本文第一部分双原型链的结论。两种写法的完整差异对照综合上面的分析class Rabbit与class Rabbit extends Object的差异可以总结为下表class Rabbitclass Rabbit extends Object无需显式调用super()构造函数中需要调用super()Rabbit.__proto__ Function.prototypeRabbit.__proto__ Object第一行决定了派生构造函数的写法必须调用super()且要在使用this之前第二行决定了静态方法查找链显式extends Object后Rabbit自身能直接访问Object的静态方法如getOwnPropertyNames而普通类则不行。实战要点与建议写派生类构造函数时永远在第一条语句调用super()这是[[ConstructorKind]]: derived机制决定的硬性要求参见 1-js/09-classes/02-class-inheritance/article.md。是否需要显式extends Object取决于你是否要通过类名直接调用Object的静态方法。大多数业务代码中普通的class Rabbit已经足够实例方法层面的继承天然成立需要静态工具方法时直接写Object.getOwnPropertyNames(...)反而更清晰。静态属性与静态方法同样通过构造函数函数之间的原型链继承。即使不继承Objectclass B extends A时B.[[Prototype]] A依然成立B上未找到的静态字段会继续沿链在A中查找见 1-js/09-classes/03-static-properties-methods/article.md这是日常更常见的静态继承场景。理解这张原型链图rabbit-extends-object.svg后你就能把实例方法继承与静态方法继承两条链分开思考避免在调试原型相关问题时混淆。赞分享文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载相关推荐ECMAScript 6 入门Class 继承完全指南——extends、super 与原型链原理详解ECMAScript 6 入门Class 继承完全指南——extends、super 与原型链原理详解 导读 本文是《ECMAScript 6 入门》教程教程前端Luigi容器化部署实战Docker与Kubernetes上如何扩展大规模数据管道附GIPHY案例Luigi容器化部署实战Docker与Kubernetes上如何扩展大规模数据管道附GIPHY案例 Luigi 是 Python 生态中最成熟的数据管道调任务调度工作流自动化批处理后端Temporalite如何用3分钟搭建本地Temporal微服务开发环境Temporalite如何用3分钟搭建本地Temporal微服务开发环境 你是否曾经在开发Temporal工作流时被复杂的环境配置和依赖关系所困扰当需要上一篇Blog.Admin进阶技巧如何优化打包体积与加载速度下一篇ESP32物联网开发终极指南从零到精通的完整教程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考