使用自定义方法扩展数组 [重复]答案

【问题标题】：Extend Array with custom method [duplicate]使用自定义方法扩展数组 [重复]
【发布时间】：2018-06-17 05:25:57
【问题描述】：

我想扩展一个Array 以便为其添加自定义方法。

这是我的尝试：

class DataArray extends Array {
  constructor() {
    super();
  }
  add(item) {
    this.push(item);
  }
}

const dataArray = new DataArray();
dataArray.add(1);

但给出错误Uncaught TypeError: dataArray.add is not a function

只有当我使用 Babel 或 Typescript 编译代码时才会出现错误。

【问题讨论】：

我在 google chrome 控制台中试过了。它工作正常。
你可以直接这样添加，如果你想保持全局对吗？ Array.prototype.add = Array.prototype.push
@ShankarShastri 是的，我刚刚意识到只有在使用 Babel 编译它（或打字稿）时才会出现错误。您可以通过运行 sn-p 看到这一点
“只有当我使用 Babel 或 Typescript 编译代码时才会出现错误。” 至少 Babel 不支持扩展内置类，因为那不是在 ES5 中也是可能的（即你不能真正复制它）。见Extending built-in natives in ES6 with Babel
@FelixKling，所以除非我编译到 ES6，否则我不能使用这个功能？

标签： javascript

【解决方案1】：

好像它不支持速记方法定义，试试箭头函数赋值：

class DataArray extends Array {
  constructor() {
    super();
  }
  add = (item) => {
    this.push(item);
  }
}

const dataArray = new DataArray();
dataArray.add(1);
console.log(dataArray);

你的版本还是可以的，它可能是这个 REPL 中的解释器版本，如果你在 jsbin 中尝试你自己的例子，它可以正常工作

【讨论】：

目前，这只是 class 中的无效语法。
那不是 ES6。公共类字段是一个提案。 foo() { ... } 是在类中定义方法的正确方式。
不，不是无效语法jsbin.com/yujurivofo/edit?js,console,output
@Ignacio 您的代码无效，不是来自 OP 的代码。
这并没有改变 Babel 不正式支持扩展内置类的事实。这是真正的问题，而不是他们如何定义方法。

【解决方案2】：

如果你想改进内置的 javascript Array，你可以使用原型。（在本例中，将方法 remove 添加到 javascript 内置 Array 类型以从 Array 中删除给定元素）：

  Array.prototype.remove = function () {
      var array   = this;
      for (var i = 0; i < arguments.length; i++) {
          for (var j = 0; j < array.length; j++) {
              if (arguments[i] === array[j]) {
                  array.splice(j, 1);
              }
          }
      }
      return array;
  };

  // Usage: [1, 2, 3].remove([1, 2]);

【讨论】：

但这不是这里的问题。