首页 > web前端 > js教程 > JavaScript 中 new Function() 和 new function() 的区别

JavaScript 中 new Function() 和 new function() 的区别

WBOY
发布: 2024-09-10 22:33:32
原创
1160 人浏览过

Difference Between new Function() and new function() in JavaScript

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中文网其他相关文章!

来源:dev.to
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板