コールのECMAScript 6でHTML <select>

からクラスのコンストラクタを言う：コールのECMAScript 6でHTML <select>

class A { 
    constructor() {...} 
    methodA() {...} 
} 
class B { 
    constructor() {...} 
    methodB() {...} 
}

私は<select>メニューからインスタンス化するために、これらのクラスのかを選択できるようにするには、ユーザーが欲しいです。

<html> 
<body onload="init()"> 
<select id="my_select"></select> 
</body> 
</html>

<select>がinit()によって移入されます：：

function init() { 
    var select = document.getElementById("my_select") 
    var option = document.createElement("option") 
    option.value = A.constructor 
    option.text = A.name 
    select.add(option) 
    // ditto for B 
}

そして、いくつかの後の時点で、私が選ばれたものは何でも構築したいと思いますここで私は（失敗した）試したもののスケッチです：

var X = document.getElementById("my_select").value 
var x = new X // doesn't work

これを行うにはどうすればよいですか？私のアプローチは完全に間違っていますか？

出典

2016-04-15 aslanides

、値の文字列を経由して、後で参照することができるオブジェクトであなたのクラスを置きます。

class A { 
    constructor() {} 
    methodA() {} 
} 
class B { 
    constructor() {} 
    methodB() {} 
} 

let classMemory = { 
    A, // Since you are using es6, you can do this 
    B 
};

その後、init機能で、あなたはどうなる：

option.value = A.name; // Not using the constructor 
option.text = A.name;

を最後に、これは動作します：

var x = new classMemory[document.getElementById("my_select").value];

出典

2016-04-15 02:00:08 KevBot

グレート答えを！乾杯。 – aslanides

これがあなたが試しているタスクに最適な方法であるかどうかわかりませんが、これを行うには、動的に生成されたJavaScriptコードを実行できるようにするeval関数を使用できます。

eval('var x = new' + X);

明らかに、ニーズに合わせて調整する必要があります。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval

出典

2016-04-15 01:47:10

コールのECMAScript 6でHTML <select>

答えて

関連する問題