ホームページ > ウェブフロントエンド > jsチュートリアル > ES6 でクラス名からオブジェクトを作成するには?

ES6 でクラス名からオブジェクトを作成するには?

Linda Hamilton
リリース: 2024-11-15 02:59:02
オリジナル
332 人が閲覧しました

How to Create Objects from Class Names in ES6?

JavaScript ES6 でクラス名からオブジェクトを作成する

従来の古いメソッドを使用して ES6 でオブジェクト ファクトリを作成しようとすると、スタイル構文を使用すると、エラーが発生する可能性があります。これは、古い構文が新しい 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 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート