ES6中new Function()语法及应用实例分析

本文实例讲述了ES6中new Function()语法及应用。分享给大家供大家参考，具体如下：

学习《ECMAScript6入门》中的模板字符串的案例中看见了new Function()创建函数的语法：

let str = 'return ' + '`Hello ${name}!`';let func = new Function('name', str);func('Jack') // "Hello Jack!"

上面的代码传入name参数和字符串函数体，字符串函数体由模板字符串提供，非常简洁方便。

为理解new Function，于是找到了下面这篇文章：

下文翻译自：https://javascript.info/new-function

这里有一个很少被用到的新建函数的方法，但是有时候不得不使用它。

语法

新建函数的语法：

let func = new Function ([arg1[, arg2[, ...argN]],] functionBody)

换句话说，函数的参数（或更确切地说，各参数的名称）首先出现，而函数体在最后。所有参数都写成字符串形式。

通过查看示例，可以更容易理解。这是一个有两个参数的函数：

let sum = new Function('a', 'b', 'return a + b');alert( sum(1, 2) ); // 3

如果所要新建的函数没有参数，那么new Function()只有一个函数体参数：

let sayHi = new Function('alert("Hello")');sayHi(); // Hello

这个方式与其他方式最主要的不同点在于，函数是由在运行时传入的字符串创建的。

之前的所有声明都要求程序员在脚本中编写功能代码。

但new Function允许将任何字符串转换为函数。例如，我们可以从服务器接收新函数然后执行它：

let str = ... receive the code from a server dynamically ...let func = new Function(str);func();

它在非常特殊的情况下使用，例如当我们从服务器接收代码时，或者使用模板动态编译函数。对此的需求通常出现在开发的进阶阶段。

闭包（Closure）

通常，函数将它所创建的位置记录在特殊属性[[Environment]]中。 它引用了创建地点的词法环境。

但是当使用new Function()创建函数时，其[[Environment]]不是引用当前的词法环境，而是引用全局环境。

function getFunc() { let value = "test"; let func = new Function('alert(value)'); return func;}getFunc()(); // error: value is not defined

与常规方法比较：

function getFunc() { let value = "test"; let func = function() { alert(value); }; return func;}getFunc()(); // "test", 来自getFunc的词法环境

这个特殊的new Function表面看起来很奇怪，但在实践中显得非常有用。

想象一下，我们必须从字符串创建一个函数。在编写脚本时不知道该函数的代码（这就是我们不使用常规函数的原因），但在执行过程中将会知道。我们可能会从服务器或其他来源收到它。