javascript - 在 es6 中克隆一个类

Question

这里是 es6 新手，

我正在尝试创建一个以另一个类作为其属性的类。

我的问题是我无法“克隆”类的属性。

正如您在下面看到的，我的意图是使用 Component.getAll() 静态方法仅返回在 MyClass 实例中创建的项目。

我尝试四处搜索一些东西，出现了“mixins”，但我认为这不能解决我的问题。

'use strict'
class Component {
  constructor(id) {
    this.id = id
    Component.addItem(this)
  }

  static addItem(item) {
    if (!this._items) {
      this._items = []
    }
    this._items.push(item)
  }

  static getAll() {
    return this._items
  }

  static getById(id) {
    return this._items.find(i => i.id === id)
  }
}


class MyClass {
  constructor(things) {

    //This is where my issue is.
    this.Component = Component


    things.forEach(t => new Component(t))
  }
}

function showIds(divId, items) {
  let ids = items.map(i => i.id)
  document.getElementById(divId).innerHTML = ids.toString()
}

let a = new MyClass([1, 2, 3])
a.Component.getById(1) //-> returns what is expected
let aItems = a.Component.getAll() // -> [1,2,3]
showIds('a', aItems)

//I would like b.Component.getAll() to only output -> [4,5,6]
//But because i can;t 'clone' the class, Its just adding the items into the same bucket. 
let b = new MyClass([4, 5, 6])
b.Component.getById(1) //-> should return undefined
let bItems = b.Component.getAll() // -> [1,2,3,4,5,6]
showIds('b', bItems)

<div id="a">
</div>

<div id="b">
</div>

在 MyClass 中声明 Component 类似乎可以解决问题……但感觉在使用 require 或导入

'use strict'



class MyClass {
  constructor(things) {

    class Component {
      constructor(id) {
        this.id = id
        Component.addItem(this)
      }

      static addItem(item) {
        if (!this._items) {
          this._items = []
        }
        this._items.push(item)
      }

      static getAll() {
        return this._items
      }

      static getById(id) {
        return this._items.find(i => i.id === id)
      }
    }

    this.Component = Component


    things.forEach(t => new Component(t))
  }
}

function showIds(divId, items) {
  let ids = items.map(i => i.id)
  document.getElementById(divId).innerHTML = ids.toString()
}

let a = new MyClass([1, 2, 3])
let aItems = a.Component.getAll() // -> [1,2,3]
showIds('a', aItems)

 
let b = new MyClass([4, 5, 6])
let bItems = b.Component.getAll() // -> [4,5,6]
showIds('b', bItems)

<div id="a">
</div>

<div id="b">
</div>

如果有任何建议，我将不胜感激!

Answer 1

静态方法被设计为每个类都是单一的。如果您不希望它们是单一的，您可能不需要静态方法。

您可以添加一个名为 ComponentsCollection 的额外类，它会为您执行 Component 跟踪。让我们将 Component

中的所有静态方法移到那里

class Component {
  constructor(id) {
    this.id = id
  }
}


class ComponentsCollection {
  constructor() {
    this._components = [];
  }

  createComponent(id) {
     const component = new Component(id);
     this.components.push(component);
     return component;
  }

  getAll() {
    return this._components;
  }
}

然后你可以在MyClass中实例化ComponentsCollection并用它来创建组件

class MyClass {
  constructor(things) {
    this.collection = new ComponentsCollection();

    things.forEach(t => this.collection.createComponent(t));
  }
}

检查一下:

let a = new MyClass([1, 2, 3])
console.log(a.collection.getAll().map(i => i.id))  // [1,2,3]
let b = new MyClass([4, 5, 6])
console.log(b.collection.getAll().map(i => i.id))  // [4,5,6]