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 可以传入参数，可以有更好的作用域壁垒，是不是很无聊
网友评论