Làm cách nào để gọi một phương thức có tên động trong Javascript?

Tôi đang làm việc để tạo động một số JavaScript sẽ được chèn vào một trang web khi nó đang được xây dựng.

JavaScript sẽ được sử dụng để điền một listboxdựa trên lựa chọn trong một lựa chọn khác listbox. Khi lựa chọn một trong những listboxthay đổi, nó sẽ gọi một tên phương thức dựa trên giá trị đã chọn của listbox.

Ví dụ:

Listbox1 chứa đựng:

• Colours
• Shapes

Nếu Coloursđược chọn thì nó sẽ gọi một populate_Coloursphương thức điền vào một phương thức khác listbox.

Để làm rõ câu hỏi của tôi: Làm cách nào để thực hiện populate_Colourscuộc gọi đó trong JavaScript?

Giả sử populate_Coloursphương thức nằm trong không gian tên chung, bạn có thể sử dụng mã sau, mã này khai thác cả hai thuộc tính đối tượng có thể được truy cập như thể đối tượng là một mảng kết hợp và tất cả các đối tượng toàn cục thực sự là thuộc tính của windowđối tượng chủ.

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

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

Như Triptych đã chỉ ra, bạn có thể gọi bất kỳ hàm phạm vi toàn cầu nào bằng cách tìm hàm đó trong nội dung của đối tượng máy chủ.

Một phương pháp sạch hơn, ít gây ô nhiễm không gian tên chung hơn nhiều, là đặt các hàm vào một mảng một cách rõ ràng trực tiếp như sau:

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);

Mảng này cũng có thể là một thuộc tính của một số đối tượng khác với đối tượng máy chủ lưu trữ toàn cầu, nghĩa là bạn có thể tạo không gian tên của riêng mình một cách hiệu quả như nhiều thư viện JS chẳng hạn như jQuery. Điều này hữu ích để giảm xung đột nếu / khi bạn bao gồm nhiều thư viện tiện ích riêng biệt trong cùng một trang và (các phần khác của thiết kế của bạn cho phép) có thể giúp sử dụng lại mã trong các trang khác dễ dàng hơn.

Bạn cũng có thể sử dụng một đối tượng như vậy, mà bạn có thể thấy rõ ràng hơn:

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);

Lưu ý rằng với một mảng hoặc một đối tượng, bạn có thể sử dụng một trong hai phương pháp thiết lập hoặc truy cập các hàm và tất nhiên có thể lưu trữ các đối tượng khác trong đó. Bạn có thể giảm thêm cú pháp của một trong hai phương thức cho nội dung không động bằng cách sử dụng ký hiệu chữ JS như sau:

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

Chỉnh sửa: tất nhiên đối với các khối chức năng lớn hơn, bạn có thể mở rộng ở trên thành "mẫu mô-đun" rất phổ biến, đây là một cách phổ biến để đóng gói các tính năng mã một cách có tổ chức.

Tôi khuyên bạn KHÔNG nên sử dụng global/ window/ evalcho mục đích này.
Thay vào đó, hãy làm theo cách này:

định nghĩa tất cả các phương thức là thuộc tính của Handler:

var Handler={};

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

Bây giờ hãy gọi nó như thế này

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

Đầu ra: jerry

bạn có thể làm như thế này:

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

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

Trong một ServiceWorkerhoặc Worker, thay thế windowbằng self:

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

Người lao động không có quyền truy cập vào DOM, do đó windowlà một tham chiếu không hợp lệ. Định danh phạm vi toàn cầu tương đương cho mục đích này là self.

Tôi không khuyên bạn nên sử dụng cửa sổ như một số câu trả lời khác đề xuất. Sử dụng thisvà phạm vi phù hợp.

this['yourDynamicFcnName'](arguments);

Một mẹo nhỏ khác là gọi trong các phạm vi khác nhau và sử dụng nó để kế thừa. Giả sử bạn đã lồng hàm và muốn truy cập vào đối tượng cửa sổ chung. Bạn có thể làm điều này:

this['yourDynamicFcnName'].call(window, arguments);

Xin chào, hãy thử cái này,

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

nó sẽ tự xử lý các tham số.

Đây là một giải pháp hoạt động và đơn giản để kiểm tra sự tồn tại của một hàm và phân loại động hàm đó bằng một hàm khác;

Chức năng kích hoạt

function runDynmicFunction(functionname){ 

    if (typeof window[functionname] == "function"  ) { //check availability

        window[functionname]("this is from the function it "); //run function and pass a parameter to it
    }
}

và bây giờ bạn có thể tạo hàm động có thể bằng cách sử dụng php như thế này

function runThis_func(my_Parameter){

    alert(my_Parameter +" triggerd");
}

bây giờ bạn có thể gọi hàm bằng sự kiện được tạo động

<?php

$name_frm_somware ="runThis_func";

echo "<input type='button' value='Button' onclick='runDynmicFunction(\"".$name_frm_somware."\");'>";

?>

mã HTML chính xác bạn cần là

<input type="button" value="Button" onclick="runDynmicFunction('runThis_func');">

Hãy thử với cái này:

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