在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>

聲明的Component類中MyClass似乎這樣的伎倆......但感覺像它使用require或import

'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] 

Answer 2

正如你看到下面，我的本意是用Component.getAll()靜態方法來只返回MyClass實例內創建的項目。

的問題是，這只是有一個Component類和單一Component._items屬性（和值）。 MyClass（間接）訪問的每個實例相同的Component._items值。

聲明組件類中MyClass的，似乎這樣的伎倆......

是的，因爲現在每個實例有它自己的Component類。

但感覺像它使用require或import

當我看不出怎麼可能會導致混亂。

但是，我同意在另一個類的構造函數內創建一個類似乎很奇怪。也許跟蹤Component實例不應該是Component本身的一部分，而應該成爲MyClass的一部分。

無論您選擇哪種解決方案，每個實例都必須擁有自己的陣列，以便跟蹤它的Component實例。