es6中new Function()的用法详解以及minifier压缩代码原理

基本语法：

let fn = new Function(...arg, content);
arg是函数fn的参数
content是fn的内容体，即函数运行主体

实例：

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

new Function()存在的意义：

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

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

但new Function允许将任何字符串转换为函数。

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

对此的需求通常出现在开发的进阶阶段。

new Function()作用域（引用全局环境。）

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

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

例子：执行下面的函数会获取不到value的值，因为value不是全局变量

function getFunc() {
  let value = "test";

  let func = new Function('alert(value)');

  return func;
}

getFunc()(); // error: value is not defined

//若定义全局变量value，则可以访问到
let value = '我是全局变量value'

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

看这个问题之前先来看下代码是如何被压缩的：（minifier）

在JavaScript发布到生产之前，它是使用minifier压缩的——一个通过删除额外的注释，空格来缩小代码的特殊程序，而且 - 重要的是，会将局部变量重命名为较短的变量。

minifier压缩代码原理：

如果一个函数中有let userName，那么minifier会替换它为let a（或者如果a被占用，则用另一个字母替换），这个过程会在任何地方进行。这通常是一件安全的事情，因为被替换的变量是局部的，函数外部没有任何东西可以访问它。并且在函数内部，minifier取代了它的每一个提及。Minifiers很聪明，他们会分析代码结构，所以他们不会破坏任何东西。他们不是只会愚蠢地发现和替换。

所以这里就可以解释为什么new Function()要访问全局变量。

如果在编写脚本时不知道一个函数的代码，使用字符串创建一个函数，可能是从服务端获取的，这时候如果该函数去访问外部局部变量可能出现访问不到的情况，而new Function()帮助我们去解决了这个问题。

使用new Function创建的函数，其[[Environment]]引用全局词法环境，而不是包含该函数的外部词法环境。因此，他们不能使用外层的变量。如果我们需要将某些东西传递给由new Function创建的函数，我们应该将它作为参数显式传递（可以避免直接读取外部变量时产生的问题）。

 

参考：https://www.cnblogs.com/xiaokeai0110/p/10029024.html