2009-06-09 100 views
65

我正在動態創建一些Javascript,當它正在構建時它將被插入到網頁中。如何在Javascript中調用動態命名的方法?

Javascript將用於根據另一個列表框中的選擇來填充列表框。當一個列表框的選擇被改變時,它將根據列表框的選定值調用一個方法名稱。

例如:

ListBox1中包含:

顏色
形狀

如果選擇 '顏色' 那麼它將調用填充另一個列表框一個 「populate_Colours」 的方法。
爲了澄清我的問題:我如何在Javascript中調用「populate_Colours」調用?

+0

我d建議不要這樣做,而應該讓地方分支機構採用單一的「人口聚集」方式。這將使它更易於測試,看起來不那麼「哈克」 – 2009-06-09 12:55:56

+0

看到我的答案在這裏。 [在JavaScript中通過名稱調用](https://stackoverflow.com/a/46090820/7771019) – 2017-09-07 08:09:09

回答

142

假設'populate_Colours'方法位於全局命名空間中,您可以使用以下代碼,該代碼利用可以訪問所有對象屬性,就好像該對象是關聯數組一樣,並且所有全局對象實際上都是屬性主機對象的window

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

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

感謝您的回覆。 '窗口'位真的把我扔了,直到我GOOGLE了它,發現全局對象是窗口對象的一部分。現在它是有道理的!謝謝。 僅供參考我在這裏找到了一個關於它的好網頁 http://devlicio.us/blogs/sergio_pereira/archive/2009/02/09/javascript-5-ways-to-call-a-function.aspx – 2009-06-09 12:45:41

+0

很高興幫助!如果它適合你,你應該接受這個答案 – Triptych 2009-06-09 12:47:29

+0

我做了類似的事情,除了我的目標函數是在jQuery「fn」命名空間。例如,`$ .fn [method_prefix + method_name](arg1,arg2);` – codecraig 2011-06-02 16:27:47

27

正如三聯指出的那樣,您可以通過在宿主對象的內容中找到它來調用任何全局作用域函數。

的清潔器的方法,其中污染了全局命名空間少得多,是明確提出的功能到一個數組直接像這樣:

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一樣有效地創建自己的命名空間。如果/在同一頁面中包含多個單獨的實用程序庫,並且(您的設計的其他部分允許)可以更容易地在其他頁面中重新使用代碼時,這對減少衝突很有用。

你也可以使用像這樣一個對象,你可能會發現吸塵器:

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的文字符號,像這樣是不是synamic:

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

編輯:當然,對於較大的功能塊可以展開上述的很常見「模塊模式」,這是一種以有組織的方式封裝代碼特徵的流行方式。

1

嗨試試這個,

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

它會處理的參數本身。

7

,你可以做這樣的:

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

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

一個簡單的JavaScript函數,我們可以使用 -

var function_name='additionFunction'; 
var argMap={"name":"yogesh"}; 
var argArray=[{"name":"yogesh"}]; 

window[function_name](argMap); 

window[function_name](argArray); 

window[function_name](argMap,argArray); 

提供了所謂的函數存在並且在實際實現中具有這樣的參數。

-1

試試這個:

var fn_name = "Colours", 
fn = eval("populate_"+fn_name); 
fn(args1,argsN); 
3

我會建議使用global/window/eval用於這一目的。
相反,做這種方式:

定義的所有方法作爲處理程序的屬性:

var Handler={}; 

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

現在這樣稱呼它

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

輸出:傑裏

相關問題