new Function 和 eval 的区别可以搜索到蛮多解释，但总觉得还不够具体，寻思着补补刀

一、从简易模板引擎说起

模板引擎可以怎样理解呢？在一段 Html 文档里面有许多占位符，同时现在还有另一份 Data 数据，将 Data 注入到 Html 中填充占位符的方法，就是模板引擎了(简单得一批)

既然已经知道目标，那就来简单实现一个不带if、else if、else、for的（要不我说简易版嘛），模板定义如下：

<html>
  <head>
    <title>{{title}}</title>
  </head>
  <body>
     <p>{{hello + world}}</p>
  </body>
</html>

这里只有一个关键点，就是使用 {{}} 双花括号作为模板的占位符，其中可以读取 Data 中的变量，也可以进行一些简单合法的 Js 表达式，对应的，准备这样一份 Data:

{
  "title": "facemagic",
  "hello": "hello",
  "world": "world"
}

Now，发挥你的想象，如何才可以将 Data 注入到 Tpl 当中，输出目标 Html 字符串？注意到，模板占位符 {{}} 中的内容至少是一个合法的 Js 表达式，使用正则表达式找到所有占位符里的表达式，再通过 eval 来执行，完了把执行结果替换掉占位符，完美！！！来，走一个：

  // node 环境

  // data 解构到 global 下
  for (const key in data) {
    global[key] = data[key]
  }
  const regex = /{{([^}]*)}}/g;
  const source = source.replace(regex, (m, n) => {
    let result = m;
    try {
      result = eval(n)
    } catch (e) {
    }
    return result;
  });

Wait a minute ！！! 为毛要将 data 中的元素全部赋值到 global 下？注意模板表达式的写法是 {{title}} 而不是 {{data.title}}，省略了根索引有木有，为了执行 eval 不报错，必须把 data 解构到 global 中。

这样就有瑕疵了，如果程序中不小心定义了一个变量刚好跟 data 的某个键重名了。那么可怕的事情将会发生

二、使用 new Function

在上述的情况中，eval 的方式会造成变量的全局污染，幸运的是，使用 new Function 可以有效的解决这个问题。奥妙就在于，虽然 new Function 跟 eval 的执行效果类似（前者应该封装了后者），但是 new Function 是可以传参的，是这样定义的

  new Function(arg1, arg2, ..., code)

其中，code 可以直接使用 arg1、arg2、... 例如：

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

基于此，我们只需要将 data 解构，作为参数传入构造好的 func，就不会有全局污染了：

function excute(keys, values, statement) {
  const caller = new Function(...keys, `return (${statement})`);
  return caller(...values);
}

function parse(source, data) {
  const keys = Object.keys(data);
  const values = [];
  for (let i = 0; i < keys.length; i++) {
    values.push(data[keys[i]])
  }
  const regex = /{{([^}]*)}}/g;
  source = source.replace(regex, (m, n) => {
    let result = m;
    try {
      result = excute(keys, values, n);
    } catch (e) {
    }
    return result;
  })
}

嗯嗯，可以收工了~~

三、总结

举了一个这么大大咧咧的栗子，其实想表达的不过是，new Function 相比于 eval 可以传入参数，可以有更好的作用域壁垒。

不过，应该看着不无聊...