Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

JavaScript에서 new Function 생성자로 함수를 호출하는 방법

JavaScript의 Function() 생성자는 임의 개수의 문자열 인수를 받을 수 있습니다. 이때 마지막 인수는 함수의 본문(body)이 되며, 세미콜론(;)으로 구분된 임의의 JavaScript 문장들을 포함할 수 있습니다. 그리고 앞에 오는 인수들은 새로 생성될 함수의 매개변수 이름으로 사용됩니다.

기본 문법

var func = new Function("매개변수1", "매개변수2", ..., "함수 본문");

예제

다음 코드를 실행하면 new Function 생성자로 만든 함수를 호출하는 과정을 직접 확인할 수 있습니다. 버튼을 클릭하면 두 숫자를 곱한 결과가 화면에 출력됩니다.

<html>
   <head>
      <script>
         var func = new Function("x", "y", "return x*y;");
         function multiplyFunction() {
            var result;
            result = func(15,35);
            document.write ( result );
         }
      </script>
   </head>
   <body>
      <p>아래 버튼을 클릭하면 함수가 호출됩니다</p>
      <form>
         <input type="button" onclick = "multiplyFunction()" value="함수 호출">
      </form>
   </body>
</html>

실행 결과

위 예제에서 func(15, 35)가 호출되면 x와 y에 각각 15와 35가 전달되어 곱셈이 수행되고, 결과값인 525가 화면에 표시됩니다.

주의 사항

new Function은 문자열을 코드로 평가한다는 점에서 eval()과 유사하게 동작합니다. 따라서 외부 입력값을 그대로 전달하면 보안 취약점(예: XSS 공격)이 발생할 수 있으며, 컴파일 시점 최적화도 어렵습니다. 실무에서는 특별한 이유가 없는 한 function 선언문이나 화살표 함수를 사용하는 것이 권장됩니다.