本文旨在深入解析JavaScript类在MDN文档中提及的评估顺序，澄清开发者常见的困惑。我们将重点探讨`extends null`为何会抛出`TypeError`及其解决方案，并详细阐述实例字段与构造函数在基类和派生类中的实际执行顺序，通过代码示例帮助读者建立清晰的认知。
在JavaScript中，类的评估顺序是理解其行为和避免意外结果的关键。MDN Web Docs提供了关于类评估顺序的详细说明，但其中一些表述可能导致初学者产生疑问。本文将针对这些常见困惑进行深入剖析，并提供清晰的解释和实用的代码示例。
一、extends null的特殊处理与TypeError解析
MDN关于类评估顺序的第一点指出：“如果存在extends子句，它会首先被评估。它必须评估为一个有效的构造函数或null，否则会抛出TypeError。”
然而，当我们尝试以下代码时：
立即学习“Java免费学习笔记（深入）”；
class bar extends null {}// TypeError: Super constructor null of bar is not a constructor
这似乎与MDN的描述相悖，因为null被明确允许。那么，为什么会抛出TypeError呢？
核心原因：super()调用机制
问题不在于extends null本身在语法上是否被允许，而在于派生类构造函数中super()的调用机制。在JavaScript中，如果一个类扩展了另一个类（包括null），其构造函数中必须调用super()。super()的职责是调用父类的构造函数，并初始化this绑定。
当一个类扩展了null时，实际上并没有一个“父类构造函数”可以被super()调用来初始化this。super()期望从其调用的“父构造函数”那里获得一个对象来作为派生类的this。由于null不是一个函数，无法被调用，也无法返回一个对象，因此在尝试执行super()时，JavaScript引擎会抛出TypeError，提示null不是一个构造函数。
MDN的补充说明与解决方案
MDN的“Extending null”章节对此有进一步的解释：extends null旨在允许轻松创建不继承自Object.prototype的对象。然而，由于super()在构造函数中如何被调用的未决决策，实际上无法使用任何不返回对象的构造函数实现来构造这样的类。
要成功创建一个扩展null的类，我们需要在构造函数中手动创建并返回一个对象，从而绕过super()隐式初始化this的机制：
class NullClass extends null { constructor() { // 使用 new.target.prototype 确保派生类拥有正确的原型链 return Object.create(new.target.prototype); }}const proto = Object.getPrototypeOf;const instance = new NullClass();console.log(proto(instance)); // NullClass.prototypeconsole.log(proto(proto(instance))); // null (证明不继承自 Object.prototype)
在这个工作示例中，constructor显式地返回了一个通过Object.create创建的对象。这满足了构造函数必须返回一个对象的预期，并且由于我们没有显式调用super()，也就避免了因null不是构造函数而引发的TypeError。
注意事项：
虽然extends null在特定场景下（如创建纯数据对象）有其价值，但其使用相对复杂，需要对原型链和构造函数行为有深入理解。在大多数情况下，如果需要一个不继承自Object.prototype的对象，更常见的做法是使用Object.create(null)。
二、实例字段与构造函数的执行顺序
MDN关于实例字段评估顺序的描述是：“对于每个实例字段（公共或私有），其初始化表达式被保存。该初始化器在实例创建期间评估，在构造函数开始时（对于基类）或在super()调用返回之前（对于派生类）。”
CodeSquire
AI代码编写助手，把你的想法变成代码
103 查看详情
这部分描述，特别是关于派生类的部分，有时会引起混淆。让我们通过一个具体的例子来详细解析其实际执行顺序。
考虑以下类结构：
class F { x = (() => { console.log("1. F: 实例字段 x 初始化"); return 1; })(); constructor() { console.log("2. F: 构造函数体执行"); this.y = 10; }}class P extends F { j = (() => { console.log("3. P: 实例字段 j 初始化"); return 2; })(); constructor() { console.log("4. P: 构造函数开始，即将调用 super()"); super(); // 调用父类构造函数 console.log("5. P: super() 调用返回，P 的构造函数体继续"); this.k = 20; }}let p = new P();
当我们运行new P()时，实际的输出顺序和评估流程如下：
new P()：派生类P的构造函数开始执行。
输出: 4. P: 构造函数开始，即将调用 super()
P的构造函数中调用super()。
控制权转移到基类F的构造函数。
基类F的实例字段初始化。
在F的构造函数体执行之前，F的所有实例字段（如x）会被初始化。输出: 1. F: 实例字段 x 初始化
基类F的构造函数体执行。
输出: 2. F: 构造函数体执行this.y = 10 被执行。
基类F的构造函数执行完毕，super()调用返回。
此时，基类部分的对象已经完全构建完成，this在派生类P中变得可用。输出: 5. P: super() 调用返回，P 的构造函数体继续
派生类P的实例字段初始化。
在P的构造函数体剩余部分执行之前，P的所有实例字段（如j）会被初始化。这对应MDN描述的“在super()调用返回之前”——更准确的理解是，在super()返回且基类部分初始化完成后，但派生类自身的构造函数体代码执行之前。输出: 3. P: 实例字段 j 初始化
派生类P的构造函数体剩余部分执行。
this.k = 20 被执行。
最终输出顺序：
4. P: 构造函数开始，即将调用 super()1. F: 实例字段 x 初始化2. F: 构造函数体执行5. P: super() 调用返回，P 的构造函数体继续3. P: 实例字段 j 初始化
总结与关键点：
基类（Base Class）： 实例字段在构造函数体开始执行之前被初始化。派生类（Derived Class）：派生类构造函数开始。调用super()。基类实例字段被初始化。基类构造函数体执行。super()返回，this在派生类中可用。派生类实例字段被初始化。派生类构造函数体剩余部分执行。
理解这个精确的评估顺序对于编写健壮的JavaScript类至关重要，特别是在处理继承和字段依赖时。它确保了基类在派生类之前完全初始化，并且实例字段在构造函数逻辑开始处理它们之前就已就绪。
以上就是深入理解JavaScript类评估顺序：MDN解析与实践的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/867946.html
微信扫一扫 
支付宝扫一扫 
