javacripts eval 慎用

eval函数会评估一个给定的含有JavaScript代码的字符串，并且试图去执行包含在字符串里的表达式或者一系列的合法的JavaScript语句。eval函数将把最后一个表达式或者语句所包含的值或引用作为返回值

此方法接受任意的字符串，并当作JavaScript代码来处理。当有问题的代码是事先知道的（不是运行时确定的），没有理由使用eval()。如果代码是在运行时动态生成，有一个更好的方式不使用eval而达到同样的目标。例如，用方括号表示法来访问动态属性会更好更简单：


1
// 反面示例
2
var property = "name";
3
alert(eval("obj." + property));
4
 
5
// 更好的
6
var property = "name";
7
alert(obj[property]);
使用eval()也带来了安全隐患，因为被执行的代码（例如从网络来）可能已被篡改。这是个很常见的反面教材，当处理Ajax请求得到的JSON 相应的时候。在这些情况下，最好使用JavaScript内置方法来解析JSON相应，以确保安全和有效。若浏览器不支持JSON.parse()，你可以使用来自JSON.org的库。


同样重要的是要记住，给setInterval(), setTimeout()和Function()构造函数传递字符串，大部分情况下，与使用eval()是类似的，因此要避免。在幕后，JavaScript仍需要评估和执行你给程序传递的字符串：


1
// 反面示例
2
setTimeout("myFunc()", 1000);
3
setTimeout("myFunc(1, 2, 3)", 1000);
4
 
5
// 更好的
6
setTimeout(myFunc, 1000);
7
setTimeout(function () {
8
   myFunc(1, 2, 3);
9
}, 1000);
使用新的Function()构造就类似于eval()，应小心接近。这可能是一个强大的构造，但往往被误用。如果你绝对必须使用eval()，你可以考虑使用new Function()代替。有一个小的潜在好处，因为在新Function()中作代码评估是在局部函数作用域中运行，所以代码中任何被评估的通过var 定义的变量都不会自动变成全局变量。另一种方法来阻止自动全局变量是封装eval()调用到一个即时函数中。


考虑下面这个例子，这里仅un作为全局变量污染了命名空间。


01
console.log(typeof un);     // "undefined"
02
console.log(typeof deux);   // "undefined"
03
console.log(typeof trois);  // "undefined"
04
 
05
var jsstring = "var un = 1; console.log(un);";
06
eval(jsstring);             // logs "1"
07
 
08
jsstring = "var deux = 2; console.log(deux);";
09
new Function(jsstring)();   // logs "2"
10
 
11
jsstring = "var trois = 3; console.log(trois);";
12
(function () {
13
   eval(jsstring);
14
}()); // logs "3"
15
 
16
console.log(typeof un);     // number
17
console.log(typeof deux);   // "undefined"
18
console.log(typeof trois);  // "undefined"
另一间eval()和Function构造不同的是eval()可以干扰作用域链，而Function()更安分守己些。不管你在哪里执行 Function()，它只看到全局作用域。所以其能很好的避免本地变量污染。在下面这个例子中，eval()可以访问和修改它外部作用域中的变量，这是 Function做不来的（注意到使用Function和new Function是相同的）。


view sourceprint?
01
(function () {
02
   var local = 1;
03
   eval("local = 3; console.log(local)"); // logs "3"
04
   console.log(local); // logs "3"
05
}());
06
 
07
(function () {
08
   var local = 1;
09
   Function("console.log(typeof local);")(); // logs undefined
10
}());

和JSON的格式的联系

JSON的格式是由大括号和由冒号（：）构成的名值对所组成的。注意JSON格式与对象字面量 (object literals) 的区别：JSON的名字部分严格用引号+名字来表示。

举例说明

• 对象的字面量

var objectLiteral = {
  name: "Objector.L",
  age: "24",
  special: "JavaScript",
  sayName: function() {
    return this.name;
  }
};

• JSON对象

var jsonFormat = {
  "summary": "Blogs",
  "blogrolls": [
    {
       "title": "Explore JavaScript",
       "link": "http://example.com/"
    },
    { 
       "title": "Explore JavaScript",
       "link": "http://example.com/"
    }
  ]
};

eval和JSON

由于Ajax的兴起，JSON这种轻量级的数据格式作为客户端与服务器之间的传输格式逐渐地流行起来，进而出现的问题是如何将服务器端构建好的JSON数据转化为可用的JavaScript对象。利用eval函数无疑是一种简单而直接的方法。在转化的时候需要将JSON字符串的外面包装一层圆括号：

var jsonObject = eval("(" + jsonFormat + ")");

为什么要加括号？

加上圆括号的目的是迫使eval函数在评估JavaScript代码的时候强制将括号内的表达式（expression）转化为对象，而不是作为语句（statement）来执行。举一个例子，例如对象字面量{}，如若不加外层的括号，那么eval会将大括号识别为JavaScript代码块的开始和结束标记，那么{}将会被认为是执行了一句空语句。所以下面两个执行结果是不同的：

alert(eval("{}"); // return undefined
alert(eval("({})");// return object[Object]

JSON格式的名字部分为什么要加引号？

因为eval函数会将{foo:”bar”}解释成合法的JavaScript语句，而非表达式。但是人们往往想要的是让eval将这段代码解释成一个对象。所以JSON格式会强制你去在名字的外侧加上引号再结合圆括号，这样eval就不会错误的将JSON解释成代码块。

举例说明

• eval错误解析语义

alert(eval('{foo:"bar"}'));   // return "bar", incorrect

• eval正确解析JSON

alert(eval('({"foo": "bar"})')); // return JSON object, correct

结论

理解eval的工作原理和json的严格的限定格式，合理结合eval和json应用于JavaScript的数据传递和对象转换。