JavaScript의 new Function()과 new function()의 차이점

JavaScript는 실제로 유연하지만 혼란을 가져오기도 합니다. 예를 들어 함수 생성, 객체 생성 등 동일한 작업을 여러 가지 방법으로 수행할 수 있습니다. 그러면 제목에 언급된 두 가지의 차이점은 무엇인가요?

new Function은 함수를 생성하는 또 다른 방법으로, 구문은 다음과 같습니다.

const func = 새 함수([arg1, arg2, ...argN], functionBody);

간단한 예:

const sum = new Function('a', 'b', 'return a + b');

sum(1 + 2); // 3

이것은 뛰어난 유연성을 제공합니다. 흔하지는 않지만 사용할 수 있는 경우가 있습니다. 예를 들어, 템플릿을 함수로 동적으로 컴파일해야 할 때 이를 사용할 수 있는데, 이것이 내가 아는 한 Vue.js가 수행하는 작업입니다. 그 외에도 동적으로 함수를 생성하기 위해 서버로부터 코드 문자열을 받아야 하는 경우에도 사용할 수 있습니다.

그 기능에 대해 빠르게 이야기해보겠습니다. 아래 코드가 무엇을 출력하는지 보시겠습니까?

globalThis.a = 10;

function createFunction1() {
  const a = 20;
  return new Function('return a;');
}

function createFunction2() {
  const a = 20;
  function f() {
    return a;
  }
  return f;
}

const f1 = createFunction1();
console.log(f1()); // ?
const f2 = createFunction2();
console.log(f2()); // ?

답은 10과 20입니다. 이는 new Function이 항상 전역 범위에서 함수를 생성하기 때문입니다. 실행 시에는 전역 변수와 해당 지역 변수에만 접근할 수 있습니다.

new function()은 새 객체를 생성하고 익명 함수를 생성자로 적용하기 위한 것입니다. 다음 예와 같습니다:

const a = new (function () {
  this.name = 1;
})();

console.log(a); // { name: 1 }

그렇습니다. 실제로 모든 JavaScript 함수는 Function 개체입니다. 즉, (function () {}).constructor === 함수는 true를 반환합니다.

관련 지식 포인트는 new Function()을 사용하여 비동기 함수를 생성하는 방법입니다. MDN이 우리에게 답을 주었습니다:

// Since `AsyncFunction` is not a global object, we need to get it manually:
const AsyncFunction = (async function () {}).constructor;

const fetchURL = new AsyncFunction('url', 'return await fetch(url);');

fetchURL('/')
  .then((res) => res.text())
  .then(console.log);

이 내용이 도움이 되었다면 제 뉴스레터를 구독 웹 개발에 대한 더 유용한 기사와 도구를 받아보세요. 읽어주셔서 감사합니다!

위 내용은 JavaScript의 new Function()과 new function()의 차이점의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!