Différence entre new Function() et new function() en JavaScript

JavaScript est certes flexible, mais il apporte également une certaine confusion. Par exemple, vous pouvez utiliser plusieurs façons de faire la même chose, comme créer des fonctions, des objets, etc. Alors, quelle est la différence entre les deux mentionnés dans le titre ?

---

new Function est une autre façon de créer une fonction, sa syntaxe :

const func = nouvelle fonction ([arg1, arg2, ...argN], functionBody);

Un exemple simple :

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

sum(1 + 2); // 3

Eh bien, cela donne une grande flexibilité. Ce n’est pas courant, mais il existe certains cas où cela peut être utilisé. Par exemple, nous pouvons l'utiliser lorsque nous devons compiler dynamiquement un modèle en fonction, ce que fait Vue.js pour autant que je sache. En plus de cela, il peut également être utilisé si nous avons besoin de recevoir des chaînes de code du serveur pour créer des fonctions de manière dynamique.

Parlons rapidement de ses fonctionnalités. Vous voyez ce que le code ci-dessous va afficher ?

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()); // ?

La réponse est 10 et 20. En effet, new Function crée toujours des fonctions dans la portée globale. Seules les variables globales et leurs propres variables locales sont accessibles lors de leur exécution.

---

Alors que new function() est destiné à créer un nouvel objet et à appliquer une fonction anonyme en tant que constructeur. Comme l'exemple suivant :

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

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

C'est tout. En fait, chaque fonction JavaScript est un objet Function, en d'autres termes, (function () {}).constructor === Function renvoie true.

Un point de connaissance associé est de savoir comment utiliser new Function() pour créer une fonction asynchrone ? MDN nous a donné la réponse :

// 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);

---

Si vous avez trouvé cela utile, pensez à à vous abonner à ma newsletter pour des articles et des outils plus utiles sur le développement Web. Merci d'avoir lu !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!