ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript ES6 でオブジェクトを動的にインスタンス化するにはどうすればよいですか?

JavaScript ES6 でオブジェクトを動的にインスタンス化するにはどうすればよいですか?

Linda Hamilton
リリース: 2024-12-05 11:18:14
オリジナル
951 人が閲覧しました

How to Dynamically Instantiate Objects in JavaScript ES6?

JavaScript ES6 での動的オブジェクトのインスタンス化

問題ステートメント

ES6 で古い形式の構文を使用してクラス名からオブジェクトを作成すると、エラーが発生します。次のコードはエラーをスローします。

let className = this.specColumn[name] ? this.specColumn[name] : this.specColumn['__default'];
return new window[className](name);
ログイン後にコピー

解決策

この問題を解決するには、指定されたオブジェクトからクラス名を削除し、代わりにクラス自体を使用します。これにより、ウィンドウ オブジェクトを介したグローバル アクセスへの依存がなくなります。さらに、ファクトリは通常 1 回だけインスタンス化されるため、オブジェクトに単純化できます。

コード修正

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

export const columnFactory = {
    specColumn: {
        __default: Column,    // <-- Class reference
        __sequence: Sequence, // <-- Class reference
        __checkbox: Checkbox  // <-- Class reference
    },
    create(name, ...args) {
        let cls = this.specColumn[name] || this.specColumn.__default;
        return new cls(...args);
    }
};
ログイン後にコピー

このコードはクラスを specColumn オブジェクトに直接保存し、動的なcreate メソッドを使用したオブジェクトのインスタンス化。

以上がJavaScript ES6 でオブジェクトを動的にインスタンス化するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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