Javascript에서 동적으로 이름이 지정된 메서드를 어떻게 호출합니까?

웹 페이지가 구성 될 때 삽입 될 일부 JavaScript를 동적으로 만드는 작업 중입니다.

JavaScript는 listbox다른 listbox. 하나의 선택 listbox이 변경되면 선택한 값에 따라 메서드 이름이 호출됩니다 listbox.

예를 들면 :

Listbox1 포함 :

• Colours
• Shapes

Colours를 선택 하면 populate_Colours다른을 채우는 메서드를 호출합니다 listbox.

내 질문을 명확히하기 위해 : populate_ColoursJavaScript에서 어떻게 호출합니까?

populate_Colours메서드가 전역 네임 스페이스에 있다고 가정하면 모든 개체 속성에 개체가 연관 배열 인 것처럼 액세스 할 수 있고 모든 전역 개체가 실제로 window호스트 개체의 속성임을 모두 이용하는 다음 코드를 사용할 수 있습니다 .

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

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

Triptych가 지적했듯이 호스트 개체의 내용에서 모든 전역 범위 함수를 찾아 호출 할 수 있습니다.

전역 네임 스페이스를 훨씬 덜 오염시키는 더 깨끗한 방법은 다음과 같이 함수를 배열에 직접 명시 적으로 넣는 것입니다.

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

편집 : 물론 더 큰 기능 블록의 경우 코드 기능을 체계적으로 캡슐화하는 인기있는 방법 인 매우 일반적인 "모듈 패턴"으로 위를 확장 할 수 있습니다.

이 목적으로 / / 를 사용 하지 않는 것이 좋습니다 . 대신 다음과 같이하십시오. globalwindoweval

모든 메서드를 Handler의 속성으로 정의합니다.

var Handler={};

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

이제 이렇게 불러

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

출력 : jerry

다음과 같이 할 수 있습니다.

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

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

내에서 ServiceWorker또는 Worker대체 window와 함께 self:

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

작업자는 DOM에 액세스 할 수 없으므로 window잘못된 참조입니다. 이 용도에 해당하는 전역 범위 식별자는 self입니다.

다른 답변 중 일부가 제안하는 것처럼 창을 사용하지 않는 것이 좋습니다. this그에 따라 사용 하고 범위를 지정 하십시오 .

this['yourDynamicFcnName'](arguments);

또 다른 깔끔한 트릭은 다른 범위 내에서 호출하고 상속에 사용하는 것입니다. 함수를 중첩했고 전역 창 개체에 대한 액세스를 원한다고 가정 해 보겠습니다. 다음과 같이 할 수 있습니다.

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

안녕하세요,

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

매개 변수 자체를 처리합니다.

여기에서 작업하고 확인하기위한 간단한 해결책이 함수의 존재 및 동적으로 차적으로 분류 기능을 다른 기능으로는;

트리거 기능

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
    }
}

이제 다음과 같이 PHP를 사용하여 동적으로 함수를 생성 할 수 있습니다.

function runThis_func(my_Parameter){

    alert(my_Parameter +" triggerd");
}

이제 동적으로 생성 된 이벤트를 사용하여 함수를 호출 할 수 있습니다.

<?php

$name_frm_somware ="runThis_func";

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

?>

필요한 정확한 HTML 코드는

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

이것을 시도하십시오 :

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