web-dev-qa-db-ja.com

Javascriptで動的に名前が付けられたメソッドを呼び出すにはどうすればよいですか？

私は、作成中のWebページに挿入されるJavascriptを動的に作成する作業をしています。

Javascriptは、別のリストボックスでの選択に基づいてリストボックスを作成するために使用されます。 1つのリストボックスの選択が変更されると、リストボックスの選択された値に基づいてメソッド名が呼び出されます。

例えば：

Listbox1に含まれるもの：

色
形状

「色」が選択されている場合、別のリストボックスに値を設定する「populate_Colours」メソッドを呼び出します。
質問を明確にするため、Javascriptで「populate_Colours」呼び出しを行うにはどうすればよいですか。

javascriptdynamicmethods
91
Chris B

「populate_Colours」メソッドがグローバル名前空間にあると仮定すると、次のコードを使用できます。このコードは、すべてのオブジェクトプロパティがオブジェクトが連想配列であるかのようにアクセスできることと、すべてのグローバルオブジェクトが実際にwindowホストオブジェクト。

var method_name = "Colours";
var method_prefix = "populate_";

// Call function:
window[method_prefix + method_name](arg1, arg2);
183
Triptych

Triptychが指摘しているように、Hostオブジェクトのコンテンツ内でグローバルスコープ関数を見つけることで、グローバルスコープ関数を呼び出すことができます。

グローバルネームスペースを汚染することの少ないクリーンな方法は、次のように関数を直接配列に明示的に配置することです。

var dyn_functions = [];
dyn_functions['populate_Colours'] = function (arg1, arg2) { 
                // function body
           };
dyn_functions['populate_Shapes'] = function (arg1, arg2) { 
                // function body
           };
// calling one of the functions
var result = dyn_functions['populate_Shapes'](1, 2);
// this works as well due to the similarity between arrays and objects
var result2 = dyn_functions.populate_Shapes(1, 2);

この配列は、グローバルホストオブジェクト以外のオブジェクトのプロパティでもある可能性があります。つまり、jQueryなどの多くのJSライブラリと同様に、独自のネームスペースを効果的に作成できます。これは、同じページに複数の個別のユーティリティライブラリを含める場合、または競合する場合に競合を減らすのに役立ちます。また、（デザインのその他の部分で）他のページでコードを簡単に再利用できます。

次のようなオブジェクトを使用することもできます。

var dyn_functions = {};
dyn_functions.populate_Colours = function (arg1, arg2) { 
                // function body
           };
dyn_functions['populate_Shapes'] = function (arg1, arg2) { 
                // function body
           };
// calling one of the functions
var result = dyn_functions.populate_Shapes(1, 2);
// this works as well due to the similarity between arrays and objects
var result2 = dyn_functions['populate_Shapes'](1, 2);

配列またはオブジェクトのどちらでも、関数の設定またはアクセスのいずれかの方法を使用でき、もちろん他のオブジェクトもそこに格納できることに注意してください。次のようにJSリテラル表記を使用することにより、定数ではない定数のいずれかのメソッドの構文をさらに減らすことができます。

var dyn_functions = {
           populate_Colours:function (arg1, arg2) { 
                // function body
           };
         , populate_Shapes:function (arg1, arg2) { 
                // function body
           };
};

編集：もちろん、機能の大きなブロックについては、上記を非常に一般的な「モジュールパターン」に展開できます。これは、コード機能を体系的にカプセル化する一般的な方法です。

34
David Spillett

この目的でglobal/window/evalを使用することをお勧めします[〜＃〜] not [〜＃〜]。
代わりに、次のようにします。

すべてのメソッドをハンドラーのプロパティとして定義します。

var Handler={};

Handler.application_run = function (name) {
console.log(name)
}

今このように呼ぶ

var somefunc = "application_run";
Handler[somefunc]('jerry');

出力：jerry

16
JerryGoyal

次のようにできます：

function MyClass() {
    this.abc = function() {
        alert("abc");
    }
}

var myObject = new MyClass();
myObject["abc"]();
12
Simon

ServiceWorkerまたはWorker内で、windowをselfに置き換えます。

self[method_prefix + method_name](arg1, arg2);

ワーカーはDOMにアクセスできないため、windowは無効な参照です。この目的に相当するグローバルスコープ識別子はselfです。

2
OXiGEN

こんにちはこれを試して、

 var callback_function = new Function(functionName);
 callback_function();

パラメータ自体を処理します。

1
mathi