이 게시물은 동적 함수 생성에 대해 살펴보고 JS가 문자열을 보는 방법과 문자열을 사용할 수 있는 다양한 방법을 일반적으로 살펴볼 것입니다.

이러한 방법론은 종종 그들이 수행한 방식으로 평가된 이유에 대한 거의 추론을 벗어난 예측할 수 없는 결과를 제공하는 경향이 있으므로 피해야 합니다. 우발적인 호출에 대한 우려도 있습니다. 당신이 실사를 수행하지 않는 한 나는 그것을 통합하지 않을 것입니다. 그러나 우리 모두는 그것이 빠르고 지저분한 행동 방식일지라도 그것이 작동하도록 해야 하는 지점에 있었습니다. (기술적 부채.. 헉헉..)

나는 이것이 언어의 멋진 특성이며 언어 자체가 작동하는 중요한 측면이기 때문에 개발자가 알아야 한다고 생각합니다.

예: (잠시 시간을 내어 이것이 어떻게 실행될지 상상해 보십시오.)

/*
JS Regex - Vanilla bby
*/
var b = "" + (f = () => {
    (a = () => {
        console.log("hello, in a")
        setTimeout(() => {
            console.log("in time out :(")
        }, 1);
    }).call(a())
    console.log("out of timeout, in f")
}).call(f()) + ""

var str = "";
console.log("comparison check b, before timeout call");
console.log(typeof b === "string");
console.log(typeof b);

var res = undefined;

setTimeout(() => {
console.log(" first comparison check b ");
console.log(typeof b === "string");
console.log(typeof b);

console.log("second comparison check b");
console.log(typeof b === "string");
console.log(typeof b);

res = str.split(str, b);
console.log("first comparison check res");
console.log(typeof res === "string");
console.log(typeof res);
}, 1);
console.log(res);
console.log("third comparison check b");
console.log(typeof b === "string");
console.log(typeof b);

우리가 가진 것은 문자열 내의 함수 또는 함수와 연결된 문자열입니다. 실행할 때 값과 값의 유형을 확인하고 각 변수가 무엇인지에 대해 엄격한 비교 검사를 수행합니다. 이것은 실제로 중요하지 않은 v8 엔진을 통해 실행될 것입니다(다른 것을 발견하면 알려주세요).

이제 이 코드의 출력 결과를 살펴보겠습니다.


그 출력을 예상 했습니까? 나는하지 않았다. 사실 대부분의 경우 비교 확인을 위해 자체적으로 초기화되는 변수 외부에서 반복을 설명할 수 없습니다.

하지만 시스템이 문자열이라고 보았지만 실제로는 문자열이라고 말했고 엄격한 비교 검사를 통해 여러 번 그렇게 했다는 사실에 주의를 기울이시기 바랍니다. b 변수는 전달되는 문자열이 아닙니다. 그 안에 내장된 루틴을 밖으로 내보내십시오.

무슨 말을하는 거니?
글쎄요 JS가 문자열을 보는 방식에 일종의 이중성이 있다고 말합니다 (나는 종종 그것을 하나의 큰 정규식 엔진으로 생각했습니다). JS는 그것이 문자열이라고 보았지만 여전히 명령이 무엇인지 인쇄하는 대신 내장된 명령을 수행하라는 지시를 받았습니다. 사실 문자열이 함수가 될 수 없습니까? 예, 얼굴 문자열은 실제로 런타임에 함수로 평가될 수 있습니다. 다음 몇 가지 예는 이 주제에 대한 훌륭한 토론이 있다고 생각하므로 답변된 질문에서 가져왔습니다.

예 2

[ https://stackoverflow.com/questions/43726544/how-to-call-a-function-using-a-dynamic-name-in-js ]

//variables
var ta = 3213;
var da = 44;
var s = [];

//Create string representation of function
s[1] = function test0(){ alert(" + da + ");}; //this["test"+0]
s[0] = function test1(){ alert(" + ta + ");}; //this["test"+1]

s.forEach((fun) => { this[fun.name] = fun;});

// calling the function
this["test"+1](); //calls test1
this["test"+0](); //calls test0

이것은 호출을 사용하여 두 기능에 액세스합니다. 이것은 상당한 양의 라이브러리가 빌드되는 방식인 동적 호출입니다(함수를 호출하는 동적 방식이 아닙니다.

예 3

[ https://stackoverflow.com/questions/7650071/is-there-a-way-to-create-a-function-from-a-string-with-javascript ]

var name = "foo";
// Implement it
eval("function " + name + "() { alert('Foo'); };");
// Test it
foo();
// Next is TRUE
foo.name === 'foo'

이것은 "eval()"함수를 사용하여 문자열을 인쇄하는 대신 함수로 평가합니다. 인쇄하는 대신. 엉뚱한 DB 반환 값 외에는 실제로 이것을 사용할 것이 많지 않습니다.

예 4

[ https://stackoverflow.com/questions/20129236/creating-functions-dynamically-in-js ]

var f = new Function('name', 'return alert("hello, " + name + "!");');
f('erick');

이것은 함수의 본문과 내용을 구성하고 내장된 함수 기능을 사용하여 함수로 평가되는 본문을 저장하고 변수 f에 저장하는 것입니다.
나는 개인적으로 이것이 우발적인 호출에 대한 우려를 완화하므로 이 작업을 수행하는 더 깨끗하고 접근하기 쉬운 방법이라고 생각합니다. 예제에서 'name' 매개변수는 호출될 때 함수에 대해 전달되는 값이고 두 번째 매개변수는 함수 자체의 내용을 포함합니다.

문자열은 JS에서 함수로 평가될 수 있는데, 이는 다른 많은 사람들이 공유하지 않는 언어의 특성입니다. 콘솔에서 무엇이 튀어나오는지 보기 위해 가지고 노는 것도 재미있지만, 한꺼번에 통합하지 않고 언어 자체를 둘러싼 거대한 생태계가 어떻게 사용되는지 더 잘 이해하는 것이 최선이라고 생각합니다.