如何在 ES6 中從類別名稱建立物件？

在JavaScript ES6 中從類別名稱建立物件

當嘗試使用傳統的舊方法在ES6 中建立物件工廠時- style 語法，您可能會遇到錯誤。這是因為舊語法與新 ES6 語法不相容。

在提供的程式碼片段：

export class Column {}
export class Sequence {}
export class Checkbox {}

export class ColumnFactory {
    constructor() {
        this.specColumn = {
            __default: 'Column',
            __sequence: 'Sequence',
            __checkbox: 'Checkbox'
        };
    }

    create(name) {
        let className = this.specColumn[name] ? this.specColumn[name] : this.specColumn['__default'];
        return new window[className](name); // this line throw error
    }
}

let factory = new ColumnFactory();
let column = factory.create('userName');

< ;p>錯誤發生在return new window[className](name);行中因為它嘗試將類別名稱作為全域變數進行存取。這種方法在 ES6 中失敗，因為類別沒有作為全域變數公開。

解決方案：

要解決此問題，請取代specColumn 物件中的類別名稱與實際類別引用：

export class Column {}
export class Sequence {}
export class Checkbox {}

export const columnFactory = {
    specColumn: {
        __default: Column,    // <--
        __sequence: Sequence, // <--
        __checkbox: Checkbox  // <--
    },
    create(name, ...args) {
        let cls = this.specColumn[name] || this.specColumn.__default;
        return new cls(...args);
    }
};

透過這樣做，您不再依賴全域可用的類別名，並且可以直接從specColumn 物件存取類別。

以上是如何在 ES6 中從類別名稱建立物件？的詳細內容。更多資訊請關注PHP中文網其他相關文章！