如何在调用此类的构造函数时创建 ES6 类的对象数组？答案

【问题标题】：How to create array of objects of ES6 class while calling constructor of this class?如何在调用此类的构造函数时创建 ES6 类的对象数组？
【发布时间】：2018-08-19 10:55:46
【问题描述】：

我想在调用类的构造函数时创建对象的数组或对象？我的意思是，每次我调用类构造函数时，它都会将新对象添加到数组或对象中。

f.e.

let blocks = {};

class Block(){

    constructor(X,Y,width,height){
        this.X = X;
        this.Y = Y;
        ...
        and now I would like to add this created object to "blocks"
        something like: blocks.push(and this object here)
    }
}

我怎样才能实现这样的东西？还是应该是另一个功能？

【问题讨论】：

您可以在类中添加另一个方法并在构造函数中调用此方法。

标签： javascript class oop ecmascript-6

【解决方案1】：

类似：blocks.push（以及这里的这个对象）

这正是你的做法，但blocks 应该是一个数组，而不是一个对象。所以：

let blocks = [];

然后在构造函数中：

blocks.push(this);

现场示例：

let blocks = []; // <== [], not {}

class Block {    // No ()

    constructor(X,Y,width,height){
        this.X = X;
        this.Y = Y;
        blocks.push(this);
    }
}

new Block(1, 1, 1, 1);
new Block(2, 2, 2, 2);
new Block(3, 3, 3, 3);

console.log(blocks.length); // 3

但是，请注意，这意味着对象（创建的块）将始终保留在内存中，即使它最初创建的任何内容都已完成并放手。通常，您不会让构造函数执行此类操作，而是将其留给调用者。

根据您构建此块列表的原因，您可能（或可能不）想要使用WeakSet 或WeakMap。

【讨论】：

关于 WeakSet/Maps：它们并不是真正有用的，因为无法迭代它们
OMG.. 从字面上看，我至少花了半个小时来尝试实现它。而且我没有想到简单的“这个”。非常感谢；）
@JonasWilms - 再次，这取决于用例是什么。 WeakMap 的传统用法是每个实例的私有信息，因此您不需要迭代。我从来没有真正需要过WeakSet，但我听说有它的用例。 ;-)
@WojciechJakubek - 不确定 getter/setter 与使用 WeakMap（支持或反对）有何关系。 :-)
@WojciechJakubek - 如果您的目标是在画布上绘制一个块列表，我建议不要让Block 构造函数将块添加到列表中。让调用构造函数的代码执行此操作。让该代码负责添加（并可能从中删除）列表。

【解决方案2】：

您不能使用push 方法，因为它不存在于对象上。目前您通过以下方式创建了一个对象：

let blocks = [];  // creates object with literal syntax.

push 是一种仅适用于数组的方法：

let obj = {};
let arr = [];

console.log(typeof obj.push );  // push not on obj
console.log(typeof arr.push );  // push is on array.prototype

您可以通过将对象字面量更改为数组字面量来解决它。

let blocks = []; 

class Block {    

    constructor(X,Y,width,height){
        this.X = X;
        this.Y = Y;
        blocks.push(this);
    }
}

new Block(1, 2, 3, 4);
new Block(2, 4, 6, 8);

console.log(blocks); // 3

【讨论】：