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 중국어 웹사이트의 기타 관련 기사를 참조하세요!