浅析ES6中new Function()应用实例场景

一、new Function() 语法

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

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

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

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

　　新建函数的语法：let func = new Function ([arg1[, arg2[, ...argN]],] functionBody)

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

//如果要新建的函数没有参数，那么new Function()只有一个函数体参数
let sayHi = new Function('alert("Hello")');
sayHi(); // Hello

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

　　之前的函数所有声明都要求程序员在脚本中编写功能代码，但new Function允许将任何字符串转换为函数。例如，我们可以从服务器接收新函数的字符串形式，然后执行它。

　　这在非常特殊的情况下使用，例如当我们从服务器接收代码时，或者使用模板动态编译函数。

二、闭包

　　通常，函数将它所创建的位置记录在特殊属性[[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() { console.log(value); };
    return func;
}
getFunc()(); // "test", 来自getFunc的词法环境

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

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

　　我们的新函数需要与主脚本进行交互。也许我们希望它能够访问外部的局部变量？

　　问题是在JS发布到生产之前，它是使用minifier压缩的：一个通过删除额外的注释，空格来缩小代码的特殊程序，而且重要的是，会将局部变量重命名为较短的变量。例如，如果一个函数中有let userName，那么minifier会替换它为 let a（或者如果a被占用，则用另一个字母替换），这个过程会在任何地方进行。

　　这通常是一件安全的事情，因为被替换的变量是局部的，函数外部没有任何东西可以访问它。并且在函数内部，minifier取代了它的每一个提及。Minifiers很聪明，他们会分析代码结构，所以他们不会破坏任何东西。他们不是只会愚蠢地发现和替换。

　　但是，如果new Function可以访问外部变量，那么它将无法找到userName，因为userName在代码缩小后才作为字符串传入。

　　所以，即使我们可以在new Function中访问外部词汇环境，我们也会遇到minifiers的问题。

　　而这时，new Function的“特色”可以让我们免于犯错。它强制执行更好的代码。如果我们需要将某些东西传递给由new Function创建的函数，我们应该将它作为参数显式传递（可以避免直接读取外部变量时产生的问题）。我们的“sum”函数实际上是这样正确使用的：

let sum = new Function('a', 'b', 'return a + b');
let a = 1, b = 2;
// 外部变量作为参数传入
sum(a, b); // 3

三、总结

1、参数也可以以逗号分隔的列表的形式给出。下面这三个意思相同：

new Function('a', 'b', 'return a + b'); // 基础语法
new Function('a,b', 'return a + b'); // 逗号分隔
new Function('a , b', 'return a + b'); // 逗号加空格分隔

2、使用new Function创建的函数，其[[Environment]]引用全局词法环境，而不是包含该函数的外部词法环境。

　　因此，他们不能使用外层的变量。但这确实很好，因为它可以使我们免于错误。明确地传递参数在架构上是一种更好的方法，并且不会在使用minifiers时不会产生问题。