使用 Babel 扩展 ES6 中的内置原生

IT技术 javascript ecmascript-6 babeljs
2021-02-03 16:18:31

我正在使用 Babel 通过内置的原生数组扩展我的类

class NewArray extends Array {
  first() {
    return this[0];
  }
}

var a = new NewArray(1, 2, 3);
console.log(a.length); // 3
console.log(a); // [ 1, 2, 3 ]
console.log(a.first()); // trigger error

在 a.first() 中,我收到此错误:

console.log(a.first());
              ^ 

TypeError: a.first is not a function

我应该做更多的事情来扩展内置的原生吗?

谢谢!

3个回答

Babel 不支持扩展原生类。它已在 5.2.17 版中删除(请参阅此提交

被删除是因为它无法正常工作,请参阅错误:https : //phabricator.babeljs.io/T1424

不太可能添加它,因为它不是可以模拟的功能。我们将不得不等待浏览器的原生支持(有些已经在实验模式下支持它)。这也意味着它目前在不同浏览器中的行为会有所不同。

谢谢 Sulthan,这是 babel 的一个错误,希望下一个 babel 的更新他们可以解决这个问题。再次感谢
2021-03-26 16:18:31
有关 Babel 6 的建议方法,请参阅我的回答。
2021-03-28 16:18:31

Babel 默认无法处理扩展的内置类型。在巴贝尔6,你现在可以做到这一点https://www.npmjs.com/package/babel-plugin-transform-b​​uiltin-extend

"plugins": [
    ["transform-builtin-extend", {
        globals: ["Array"]
    }]
]

请记住,这在较旧的 IE 等较旧的环境中可能是一个问题,因此您是否应该扩展内置类型取决于您是否关心这一点。

虽然我不明白为什么会出现错误(我无法重现它),但您不会从 first() 函数中得到您想要的结果。

你可以做的是:

   class NewArray extends Array {
      constructor(){
        super();
        this.first = function(){ return this[0]; }
      }
    }

    var a = new NewArray();
    a.push(10);
    console.log(a.first()); // 10
你能解释一下吗?OP 的代码有什么问题?是 ES6 的问题还是 babel 的问题?这看起来更像是一种解决方法。
2021-03-14 16:18:31
“在this[0]你的情况是指this的的first()功能。” 这意味着什么?“所以在你的情况下 this[0] 应该根本没有定义。” 为什么不?OP 清楚地用三个元素初始化数组。
2021-03-26 16:18:31
我无法真正重现该错误,如果其他人可以提供更好的解释,您可以“取消批准”答案。
2021-04-08 16:18:31
@AvraamMavridis 不幸的是,它根本不清楚。
2021-04-10 16:18:31