"new Function" 语法
前言
js中除了使用function
关键字创建函数外,还有一种很少见的方法,new Function
,但是很少使用,不过也需要了解一下。
语法
创建函数的语法:
let func = new Function ([arg1, arg2, ...argN], functionBody);
该函数是通过使用参数 arg1...argN
和给定的 functionBody
创建的。
下面这个例子可以帮助你理解创建语法。这是一个带有两个参数的函数:
let sum = new Function('a', 'b', 'return a + b');
console.log(sum(1, 2)); // 3
这里有一个没有参数的函数,只有函数体:
let sayHi = new Function('console.log("Hello")');
sayHi(); // Hello
与我们已知的其他方法相比,这种方法最大的不同在于,它实际上是通过运行时通过参数传递过来的字符串创建的。
以前的所有声明方法都需要我们 —— 程序员,在脚本中编写函数的代码。
但是 new Function
允许我们将任意字符串变为函数。例如,我们可以从服务器接收一个新的函数并执行它:
let str = ... 动态地接收来自服务器的代码 ...
let func = new Function(str);
func();
使用 new Function
创建函数的应用场景非常特殊,比如在复杂的 Web 应用程序中,我们需要从服务器获取代码或者动态地从模板编译函数时才会使用。
闭包
我们在学习闭包时,知道了词法环境的概念,js中,每次创建函数时,引擎默认都会使用[[Environment]]
记录当前函数创建的外部环境。但是如果我们使用 new Function
创建一个函数,那么该函数的 [[Environment]]
并不指向当前的词法环境,而是指向全局环境。所以,记得当时我们说,js中的所有函数都是天然闭包的,不过排除了new Function
的情况。
如果我们使用 new Function
创建一个函数,那么该函数的 [[Environment]]
并不指向当前的词法环境,而是指向全局环境。
因此,此类函数无法访问外部(outer)变量,只能访问全局变量。
function getFunc() {
let value = "test";
let func = new Function('console.log(value)');
return func;
}
getFunc()(); // ReferenceError: value is not defined
将其与常规行为进行比较:
function getFunc() {
let value = "test";
let func = function () { console.log(value); };
return func;
}
getFunc()(); // "test",从 getFunc 的词法环境中获取的
new Function
的这种特性看起来有点奇怪,不过在实际中却非常实用。
想象以下我们必须通过一个字符串来创建一个函数。在编写脚本时我们不会知道该函数的代码(这也就是为什么我们不用常规方法创建函数),但在执行过程中会知道了。我们可能会从服务器或其他来源获取它。
例如,如果一个函数有 let userName
,压缩程序会把它替换为 let a
(如果 a 已被占用了,那就使用其他字符),剩余的局部变量也会被进行类似的替换。一般来说这样的替换是安全的,毕竟这些变量是函数内的局部变量,函数外的任何东西都无法访问它。在函数内部,压缩程序会替换所有使用了使用了这些变量的代码。压缩程序很聪明,它会分析代码的结构,而不是呆板地查找然后替换,因此它不会“破坏”你的程序。
但是在这种情况下,如果使 new Function
可以访问自身函数以外的变量,它也很有可能无法找到重命名的 userName
,这是因为新函数的创建发生在代码压缩以后,变量名已经被替换了。
即使我们可以在 new Function
中访问外部词法环境,我们也会受挫于压缩程序。
此外,这样的代码在架构上很差并且容易出错。
当我们需要向 new Function
创建出的新函数传递数据时,我们必须显式地通过参数进行传递。
总结
语法:
let func = new Function ([arg1, arg2, ...argN], functionBody);
由于历史原因,参数也可以按逗号分隔符的形式给出。
以下三种声明的含义相同:
new Function('a', 'b', 'return a + b'); // 基础语法
new Function('a,b', 'return a + b'); // 逗号分隔
new Function('a , b', 'return a + b'); // 逗号和空格分隔
使用 new Function
创建的函数,它的 [[Environment]]
指向全局词法环境,而不是函数所在的外部词法环境。因此,我们不能在 new Function
中直接使用外部变量。不过这样是好事,这有助于降低我们代码出错的可能。并且,从代码架构上讲,显式地使用参数传值是一种更好的方法,并且避免了与使用压缩程序而产生冲突的问题。