无法向 Array 子类添加方法

Question

我正在尝试使用以下代码对 Array 对象进行子类化。如果您运行浏览器中的代码，它可以正常工作。但是，如果我将此代码放在 .js 文件中，并使用 <script> 标记包含该文件，则 .add() 方法未定义。

class Collection extends Array {
  constructor(data) {
    super(...data);
  }

  add(model) {
    this.push(model);
  }

}

const coll = new Collection(['item1', 'item2']);

console.log(coll);      // -> ['item1', 'item2']
console.log(coll.add);  // -> undefined

当我加载页面时，.add() 未定义。但是，当我将完全相同的代码复制粘贴到控制台时，它就起作用了。

怎么回事？

更新我还使用 Babel.js (v6.x) 进行转译，结果证明这是问题所在，正如 Fuechter 在 .

中解释的那样

Answer 1

修复：

class Collection extends Array {
  constructor(data) {
    super(...data);
    this.add = function(model) {
      this.push(model);
    }
  }
}

为什么：

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

它被删除是因为它不能正常工作，查看错误：https://phabricator.babeljs.io/T1424

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

参考：

无法向 Array 子类添加方法

cannot add method to Array subclass

javascript

class

babeljs

es6-class