像传统的 OO 语言一样“扩展”JS 数组？答案

【问题标题】："Extend"JS Array like in traditional OO languages?像传统的 OO 语言一样“扩展”JS 数组？
【发布时间】：2018-12-17 15:33:38
【问题描述】：

我正在深入研究 JavaScript。我知道可以通过修改原型来修改/增强 JavaScript 对象的行为。

出于特殊目的，我想使用 Array 并向其添加各种行为。我完全明白为我的情况更改所有数组是不好的。但它是常规的 OO 语言，我可以扩展它，添加我的功能，不要管原来的。 JS中有什么可比的吗？就像，我可以复制数组原型并将其放到另一个类中并在不影响其他数组的情况下摆弄它吗？还是有什么概念？

不是很重要，但它会很有帮助，而且肯定会帮助我更深入地了解 JS，这是我在多年使用 Java、C++ 等之后真正进入的领域。

【问题讨论】：

在 ES6 中，你可以扩展 Array，尽管如果你尝试转译到 ES5，这将不起作用。
class MyArray extends Array { … }
Javascript 是目前最容易打孔的语言之一。您可以简单地将新函数作为属性添加到任何对象。如果你把它放在原型上，该类型的所有对象都会继承它。你有没有在这方面尝试过……？

标签： javascript inheritance prototype

【解决方案1】：

您可以扩展 Array 类并将您的额外功能作为该类的方法实现。

您现在使用let y = new myArray();，而不是使用let x = [];。

class myArray extends Array {
  constructor() {
    super();
    
    console.log(typeof this.push);
    console.log(typeof this.shift);
  }
  
  logAndAdd(variable) {
    this.push(variable);
    console.log(variable);
  }
}

let y = new myArray();

y.logAndAdd('hi');

【讨论】：

【解决方案2】：

我认为您可以像使用任何其他 OO 语言一样简单地使用 ES6 extends。

这是一个扩展原生数组并添加日志方法的类的示例。唯一的问题是您必须使用 new 关键字来创建新数组。

class CustomArray extends Array {
	log() {
		console.log(this);
    }
}

var customArrayInstance = new CustomArray();

customArrayInstance.push(1,2,3,4,5);

customArrayInstance.log();

// Creating an array using the array constructor
//
new CustomArray(200).fill(null).log()

您还可以使用Symbols 以非 OOP 的方式扩展本机数组的行为。您将基本上以非浏览器破坏方式扩展本机数组的原型。

【讨论】：

【解决方案3】：

我认为看看 Javascript 迭代器及其可能性是一种选择。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols

我在 Typescript/Angular2 中使用这种方法来实现类似数组的集合，我可以在其中以类似 OO 的方式定义自定义推送/弹出/拉取操作。

【讨论】：

【解决方案4】：

是的，你可以做到这一点，在 JavaScript 中，我们将这种接口式的东西称为prototype。

Function.prototype.method = function(name, func) {
  this.prototype[name] = func;
  return this;
};

虽然就我个人而言，我通常更喜欢将“方法”设为一个独立的函数，它接受并返回一个数组。

【讨论】：