JavaScript 中 new Function() 和 new function() 的差異

JavaScript 確實很靈活，但也帶來了一些混亂。例如，你可以使用多種方式來做同一件事情，例如建立函數、物件等。那麼標題中提到的兩者有什麼差別呢？

---

new Function 是另一種建立函數的方式，其語法：

const func = new Function ([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 === Function returns 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);

---

如果您發現這有幫助，請考慮 訂閱我的電子報 以獲取更多有關 Web 開發的有用文章和工具。感謝您的閱讀！

以上是JavaScript 中 new Function() 和 new function() 的差異的詳細內容。更多資訊請關注PHP中文網其他相關文章！