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

【问题标题】：Extending built-in natives in ES6 with Babel使用 Babel 扩展 ES6 中的内置原生
【发布时间】：2016-02-23 07:01:42
【问题描述】：

我正在使用 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

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

谢谢！

【问题讨论】：

这可能是 Babel 和/或浏览器的限制，因为尚不支持扩展原生类，也无法真正模拟。
菲利克斯感谢您的澄清

标签： javascript ecmascript-6 babeljs

【解决方案1】：

Babel 不支持扩展原生类。它在 5.2.17 版本中被删除（参见this commit）

由于无法正常工作而被删除，请参阅错误：https://phabricator.babeljs.io/T1424

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

【讨论】：

感谢 Sulthan，这是来自 babel 的错误，希望下一次 babel 的更新可以解决这个问题。再次感谢
查看我对 Babel 6 建议方法的回答。

【解决方案2】：

默认情况下，Babel 无法处理扩展的内置类型。在 Babel 6 上，您现在可以使用 https://www.npmjs.com/package/babel-plugin-transform-builtin-extend 来执行此操作

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

请记住，这在旧环境（如旧 IE）上可能是一个问题，因此是否应该扩展内置类型取决于您是否关心这一点。

【讨论】：

【解决方案3】：

虽然我不明白你为什么会收到错误（我无法重现它），但你不会得到你想要从 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的问题？这看起来更像是一种解决方法。
“在你的例子中，this[0] 指的是first() 函数的this。” 这是什么意思？ “所以你的情况下的 this[0] 应该根本没有定义。” 为什么不呢？ OP 清楚地用三个元素初始化数组。
@AvraamMavridis 不幸的是，它根本不清楚。
我无法真正重现错误，如果其他人可以提供更好的解释，您可以“不批准”答案。