时间戳

首页 > 解决方案 > 如果一个类扩展了 Object，Babel 真的不需要调用 super() 是真的吗？

javascript - 如果一个类扩展了 Object，Babel 真的不需要调用 super() 是真的吗？

问题描述

我注意到使用 Babel，如果我转译

class Rectangle {
  a = 1;
}

使用 stage-0，则生成的代码有一个构造函数，但没有调用super()

但是如果代码改成：

class Rectangle extends Object {
  a = 1;
}

那么转译的代码是：

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

class Rectangle extends Object {
  constructor(...args) {
    super(...args);

    _defineProperty(this, "a", 1);
  }

}

原代码的版本 1 和 2 是不是真的一样？（所有类都扩展 Object）。那么如果版本 1 不调用super()，看起来 Object 的构造函数什么也没做，那么版本 2 也没有理由调用它吗？

标签： javascriptbabeljs

解决方案

原代码的版本 1 和 2 是不是真的一样？（所有类都扩展 Object）。

不，不完全是。让我们比较一下：

class Base {
}

和

class Sub extends Object {
}

确实，两者都Base.prototype和Sub.prototype用作Object.prototype它们的原型，但这并不能使它们相同。两个区别：

  1. Base（构造函数）Object用作其原型；Sub使用Function.prototype.
  2. Base当您通过调用它时将创建new对象；Sub不会，它希望超类构造函数 ( Object) 这样做。这意味着它必须调用它。（构造函数被标记以表明它们是基构造函数还是子类构造函数，并且new操作符的处理会根据。）

演示 #1（使用 ES2015+ JavaScript 引擎）：

class Base {
}

class Sub extends Object {
}

// Both `prototype` properties inherit from `Object.prototype`
console.log(Object.getPrototypeOf(Base.prototype) === Object.prototype);

console.log(Object.getPrototypeOf(Sub.prototype) === Object.prototype);

// But the constructors themselves inherit from different things
console.log(Object.getPrototypeOf(Base) === Function.prototype);

console.log(Object.getPrototypeOf(Sub) === Object);

所以如果版本 1 不调用super()，看起来 的构造函数Object没有做任何事情，那么版本 2 也没有理由调用它吗？

它必须调用它。这无法在本机 JavaScript (ES2015+) 中编译：

class Example extends Object {
    constructor() {
        this.foo = "bar";
    }
}
console.log(new Example().foo);

如果您有extends，则必须调用super才能创建新对象。

答案顶部的MySub可以编译，因为它没有显式构造函数，因此它获得了默认的子类构造函数 ( constructor(...args) { super(...args); })。但是Example失败了，因为它有一个显式的构造函数但没有进行super调用。

推荐阅读