development

문자열을 JavaScript 함수 호출로 바꾸는 방법?

big-blog 2020. 4. 2. 08:15
반응형

문자열을 JavaScript 함수 호출로 바꾸는 방법? [복제]


이 질문에는 이미 답변이 있습니다.

나는 다음과 같은 문자열을 얻었다 :

settings.functionName + '(' + t.parentNode.id + ')';

다음과 같이 함수 호출로 변환하고 싶습니다.

clickedOnItem(IdofParent);

물론 이것은 JavaScript로 이루어져야합니다. 내가 경고 settings.functionName + '(' + t.parentNode.id + ')';를하면 모든 것이 올바른 것 같습니다. 번역 할 함수를 호출하면됩니다.

전설:

settings.functionName = clickedOnItem

t.parentNode.id = IdofParent

내가 eval을 싫어하는 것을보고, 나는 혼자가 아닙니다 .

var fn = window[settings.functionName];
if(typeof fn === 'function') {
    fn(t.parentNode.id);
}

편집 : @Mahan의 의견에 대한 답변 :이 특별한 경우에는 settings.functionName입니다 "clickedOnItem". 이것은 런타임에로 변환 var fn = window[settings.functionName];되어 var fn = window["clickedOnItem"]에 대한 참조를 얻습니다 function clickedOnItem (nodeId) {}. 변수 내부의 함수에 대한 참조가 있으면 "변수 호출"(즉 fn(t.parentNode.id), clickedOnItem(t.parentNode.id)OP가 원했던 것과 같음 )을 통해이 함수를 호출 할 수 있습니다 .

더 자세한 예 :

/* Somewhere: */
window.settings = {
  /* [..] Other settings */
  functionName: 'clickedOnItem'
  /* , [..] More settings */
};

/* Later */
function clickedOnItem (nodeId) {
  /* Some cool event handling code here */
}

/* Even later */
var fn = window[settings.functionName]; 
/* note that settings.functionName could also be written
   as window.settings.functionName. In this case, we use the fact that window
   is the implied scope of global variables. */
if(typeof fn === 'function') {
    fn(t.parentNode.id);
}

window[settings.functionName](t.parentNode.id);

eval () 필요 없음


범위를 지원하면서 동일한 작업을 수행하는보다 일반적인 방법은 다음과 같습니다.

// Get function from string, with or without scopes (by Nicolas Gauthier)
window.getFunctionFromString = function(string)
{
    var scope = window;
    var scopeSplit = string.split('.');
    for (i = 0; i < scopeSplit.length - 1; i++)
    {
        scope = scope[scopeSplit[i]];

        if (scope == undefined) return;
    }

    return scope[scopeSplit[scopeSplit.length - 1]];
}

그것이 일부 사람들을 도울 수 있기를 바랍니다.


JavaScript에는 eval문자열을 평가하고 코드로 실행 하는 함수가 있습니다.

eval(settings.functionName + '(' + t.parentNode.id + ')');

eval ()은 그렇게하는 데 필요한 기능이지만 eval 사용을 최소화하기 위해 이러한 것들 중 하나를 시도하는 것이 좋습니다. 잘만되면 그들 중 하나가 당신에게 의미가있을 것입니다.

기능 저장

함수를 문자열이 아닌 함수로 저장하고 나중에 함수로 사용하십시오. 실제로 저장하는 기능은 귀하에게 달려 있습니다.

var funcForLater = clickedOnItem;

// later is now
funcForLater(t.parentNode.id);

또는

someObject.funcForLater = clickedOnItem;    
// later is now    
(someObject.funcForLater)(t.parentNode.id);

스토어 기능 이름

함수 이름을 문자열로 저장해야하는 경우에도 다음을 수행하여 복잡성을 최소화 할 수 있습니다.

(eval(settings.functionName))(t.parentNode.id);

구성하고 평가해야하는 Javascript의 양을 최소화합니다.

핸들러 사전

필요한 모든 동작 함수를 객체에 넣고 문자열을 사용하여 사전 스타일이라고합니다.

// global
itemActions = { click: clickedOnItem, rightClick: rightClickedOnItem /* etc */ };

// Later...
var actionName = "click"; // Or wherever you got the action name
var actionToDo = itemActions[actionName];
actionToDo(t.parentNode.id);

(사소한 참고 : 대신 구문 itemActions[actionName](t.parentNode.id);사용 하면 함수가의 메소드로 호출됩니다 itemActions.)


나는 첫 번째 대답을 좋아하고 평가를 싫어하지만 다른 방법 (평가와 유사)이 추가되어 주위를 둘러보고 사용할 수 없다면 더 잘하는 것이 좋습니다. 그러나 어떤 경우에는 일부 아약스 호출 전후에 자바 스크립트 코드를 호출 할 수 있으며 아약스 대신 사용자 정의 속성 에이 코드가있는 경우 다음을 사용할 수 있습니다.

    var executeBefore = $(el).attr("data-execute-before-ajax");
    if (executeBefore != "") {
        var fn = new Function(executeBefore);
        fn();
    }

또는 여러 번 호출 해야하는 경우 결국 함수 캐시에 저장하십시오.

다시 말하지만 다른 방법이 있다면 eval 또는이 방법을 사용하지 마십시오.


경우 settings.functionName함수가 이미, 당신이 할 수 있습니다 :

settings.functionName(t.parentNode.id);

그렇지 않으면 settings.functionName함수의 이름 일 경우에도 작동 합니다.

if (typeof window[settings.functionName] == "function") {
    window[settings.functionName](t.parentNode.id);
}

함수 이름을 문자열로 가져 와서 호출하고 함수에 인수를 전달하고 싶었습니다. 이 질문에 대해 선택된 답변을 얻지 못했지만이 답변정확하게 설명했으며 여기에 간단한 데모가 있습니다.

function test_function(argument)    {
    alert('This function ' + argument); 
}

functionName = 'test_function';

window[functionName]('works!');

이것은 또한 여러 인수와 함께 작동합니다.


기존의 기술 window['someFunctionName']()이 처음에는 효과가 없었기 때문에 이를 이해하는 데 시간이 걸렸습니다 . 내 함수의 이름은 데이터베이스에서 AJAX 응답으로 가져 왔습니다. 또한 어떤 이유로 든 내 함수가 창 범위 밖에서 선언 되었으므로이 문제를 해결하려면 호출 한 함수를 다시 작성해야했습니다.

function someFunctionName() {}

window.someFunctionName = function() {}

거기서부터 window['someFunctionName']()쉽게 전화 할 수있었습니다 . 나는 이것이 누군가를 돕기를 바랍니다!


나는 다음과 같은 것을 선호한다 :

window.callbackClass['newFunctionName'] = function(data) { console.log(data) };
...
window.callbackClass['newFunctionName'](data);

Nicolas Gauthier의 답변을 바탕으로 :

var strng = 'someobj.someCallback';
var data = 'someData';

var func = window;
var funcSplit = strng.split('.');
for(i = 0;i < funcSplit.length;i++){
   //We maybe can check typeof and break the bucle if typeof != function
   func = func[funcSplit[i]];
}
func(data);

예를 들어 node.js와 같은 CommonJS 사양을 사용하는 자바 스크립트에서 아래에 표시된 것을 수행 할 수 있습니다. window객체 에 변수가 정의되어 있지 않아도 문자열로 변수에 액세스하는 데 매우 편리 합니다. MyClassMyClass.js라는 CommonJS 모듈 내에 정의 된 이름의 클래스가있는 경우

// MyClass.js
var MyClass = function() {
    // I do stuff in here. Probably return an object
    return {
       foo: "bar"
    }
}

module.exports = MyClass;

그런 다음 MyOtherFile.js라는 다른 파일에서 멋진 요술을 할 수 있습니다.

// MyOtherFile.js

var myString = "MyClass";

var MyClass = require('./' + myString);
var obj = new MyClass();

console.log(obj.foo); // returns "bar"

CommonJS가 그토록 즐거움 인 이유 하나 더.


eval("javascript code");

JSON을 다룰 때 광범위하게 사용됩니다 .

참고 URL : https://stackoverflow.com/questions/912596/how-to-turn-a-string-into-a-javascript-function-call

반응형