eval()

eval()函数会将传入的字符串当做 JavaScript 代码进行执行。

语法

eval(string)

参数

返回值

返回字符串中代码的返回值。如果返回值为空，则返回undefined。

描述

eval()是全局对象的一个函数属性。

eval()的参数是一个字符串。如果字符串表示的是表达式，eval()会对表达式进行求值。如果参数表示一个或多个 JavaScript 语句，那么eval()就会执行这些语句。不需要用eval()来执行一个算术表达式：因为 JavaScript 可以自动为算术表达式求值。

如果你以字符串的形式构造了算术表达式，那么可以在后面用eval()对它求值。例如，假设你有一个变量x，您可以通过将表达式的字符串值（例如3 * x + 2）赋值给一个变量，然后在你的代码后面的其他地方调用eval()，来推迟涉及x的表达式的求值。

如果eval()的参数不是字符串，eval()会将参数原封不动地返回。在下面的例子中，String构造器被指定，而eval()返回了String对象而不是执行字符串。

eval(new String("2 + 2")); // 返回了包含"2 + 2"的字符串对象
eval("2 + 2");             // returns 4

你可以使用一些通用的方法来绕过这个限制，例如使用toString()。

var expression = new String("2 + 2");
eval(expression.toString());

如果你间接的使用eval()，比如通过一个引用来调用它，而不是直接的调用eval。从 ECMAScript 5 起，它工作在全局作用域下，而不是局部作用域中。这就意味着，例如，下面的代码的作用声明创建一个全局函数，并且eval中的这些代码在执行期间不能在被调用的作用域中访问局部变量。

function test() {
  var x = 2, y = 4;
  console.log(eval('x + y'));  // 直接调用，使用本地作用域，结果是 6
  var geval = eval; // 等价于在全局作用域调用
  console.log(geval('x + y')); // 间接调用，使用全局作用域，throws ReferenceError 因为`x`未定义
  (0, eval)('x + y'); // 另一个间接调用的例子
}

永远不要使用eval！

eval()是一个危险的函数，它使用与调用者相同的权限执行代码。如果你用eval()运行的字符串代码被恶意方（不怀好意的人）修改，您最终可能会在您的网页/扩展程序的权限下，在用户计算机上运行恶意代码。更重要的是，第三方代码可以看到某一个eval()被调用时的作用域，这也有可能导致一些不同方式的攻击。相似的Function就不容易被攻击。

eval()通常比其他替代方法更慢，因为它必须调用 JS 解释器，而许多其他结构则可被现代 JS 引擎进行优化。

此外，现代JavaScript解释器将javascript转换为机器代码。这意味着任何变量命名的概念都会被删除。因此，任意一个eval的使用都会强制浏览器进行冗长的变量名称查找，以确定变量在机器代码中的位置并设置其值。另外，新内容将会通过eval()引进给变量，比如更改该变量的类型，因此会强制浏览器重新执行所有已经生成的机器代码以进行补偿。但是，（谢天谢地）存在一个非常好的eval替代方法：只需使用 window.Function。这有个例子方便你了解如何将eval()的使用转变为Function()。

使用eval的糟糕代码:

function looseJsonParse(obj){
    return eval(obj);
}
console.log(looseJsonParse(
   "{a:(4-1), b:function(){}, c:new Date()}"
))

不用eval的更好的代码:

function looseJsonParse(obj){
    return Function('"use strict";return (' + obj + ')')();
}
console.log(looseJsonParse(
   "{a:(4-1), b:function(){}, c:new Date()}"
))

比较上面的两个代码片段，两个代码片段似乎是以相同的方式工作，但再想一想：eval的这个代码的速度要慢得多。注意c: new Date()在执行体中。在没有eval的函数中，对象在全局范围内被用来进行计算，因此浏览器可以放心的假设Date是来自window.Date的而不是一个名为Date的局部变量。然而，在使用eval()的代码中，浏览器不能假设这一点，因为如果您的代码是下面这个：

function Date(n){
    return ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"][n%7 || 0];
}
function looseJsonParse(obj){
    return eval(obj);
}
console.log(looseJsonParse(
   "{a:(4-1), b:function(){}, c:new Date()}"
))

Thus, in the eval() version of the code, the browser is forced to make the expensive lookup call to check to see if there are any local variables called Date(). This is incredibly inefficient compared to Function().

In a related circumstance, what if you actually wanted your Date function to be able to be called from the code inside Function(). Should you just wimp out and fall back to eval()? Absolutely not, never ever. Instead try the approach below.

因此，在eval()版本的代码中，浏览器被迫进行高代价的查找调用以检查是否存在名为Date()的任何局部变量。与Function()相比，这是非常低效的。

在类似的情况下，如果您确实希望能够从Function()内部的代码调用Date函数，该怎么办？你应该躲避并退回到eval()吗？绝对不是，永远不要这么做。而是尝试下面的方法。

function Date(n){
    return ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"][n%7 || 0];
}
function runCodeWithDateFunction(obj){
    return Function('"use strict";return (' + obj + ')')()(
        Date
    );
}
console.log(runCodeWithDateFunction(
   "function(Date){ return Date(5) }"
))

由于三重嵌套函数，上面的代码似乎效率低下，但让我们分析一下上述有效方法的好处：

1.它使得传递给runCodeWithDateFunction的字符串中的代码更少。

2.函数调用开销很小，使得代码尺寸小得多，值得获益

3.Function()更容易让你的代码利用特性修饰"use strict";

4.代码不使用eval（），使其比其他方式快几个数量级。

最后，我们来看看简化版。使用如上所示的Function()，您可以更有效地缩小传递给runCodeWithDateFunction的代码字符串，因为函数参数名称也可以缩小，如下面的缩小代码所示。

console.log(Function('"use strict";return(function(a){return a(5)})')()(function(a){
return"Monday Tuesday Wednesday Thursday Friday Saturday Sunday".split(" ")[a%7||0]}));

对于常见用例，eval()或Function()还有更安全(而且更快!)的替代方案。

访问成员属性

你不应该去使用eval()来将属性名字转化为属性。考虑下面的这个例子，被访问对象的属性在它被执行之前都会未知的。这里可以用 eval 处理：

var obj = { a: 20, b: 30 };
var propName = getPropName(); // 返回 "a" 或 "b"

eval( 'var result = obj.' + propsName )

但是，这里并不是必须得使用eval()。事实上，这里并不建议这样使用。可以使用属性访问器进行代替，它更快、更安全：

var obj = { a: 20, b: 30 }
var propName = getPropName(); // 返回 "a" 或 "b"
var result = obj[ propName ]; // obj[ "a" ] 与 obj.a 等价

你还可以使用这个方法去访问子代的属性。如下：

var obj = {a: {b: {c: 0}}};
var propPath = getPropPath(); // 例如返回 "a.b.c"

eval( 'var result = obj.' + propPath )

这里，可以通过分割属性路径、循环遍历不同的属性，来避免eval()：

function getDescendantProp(obj, desc) {
  var arr = desc.split('.');
  while (arr.length) {
    obj = obj[arr.shift()];
  }
  return obj;
}

var obj = {a: {b: {c: 0}}};
var propPath = getPropPath(); // 例如返回 "a.b.c"
var result = getDescendantProp(obj, propPath);

同样的方法也可实现设置子代的属性值：

function setDescendantProp(obj, desc, value) {
  var arr = desc.split('.');
  while (arr.length > 1) {
    obj = obj[arr.shift()];
  }
  return obj[arr[0]] = value;
}

var obj = {a: {b: {c: 0}}};
var propPath = getPropPath();  // 例如，返回 "a.b.c"
var result = setDescendantProp(obj, propPath, 1);  // a.b.c 值为 1

使用函数而非代码段

JavaScript 拥有 first-class functions，这意味着你可以将函数直接作为参数传递给其他接口，将他们保存在变量中或者对象的属性中，等等。很多DOM的API都用这种思路进行设计，你也可以（或者应该）这样子设计你的代码：

// 代替 setTimeout(" ... ", 1000) 写法:
setTimeout(function() { ... }, 1000); 

// 代替 elt.setAttribute("onclick", "...") 写法:
elt.addEventListener('click', function() { ... } , false);

闭包也有助于创建参数化函数而不用连接字符串。

解析 JSON（将字符串转化为 JavaScript 对象）

如果你在调用eval()传入的字符串参数中包含数据（如：一个数组“[1,2,3]”）而不是代码，你应该考虑将其转换为 JSON 对象，这允许你用JavaScript语法的子集来表示数据。在扩展中下载JSON和JavaScript

提示：因为 JSON 语法子集相对于 JavaScript 语法子集比较有局限性，很多在 JavaScript 中可用的特性在 JSON 中就不起作用了。比如，后缀逗号在 JSON 中不支持，并且对象中的属性名在 JSON 中必须用引号括起来。请务必使用 JSON 序列化方法来生成稍后将被解析为 JSON 的字符串。

尽量传递数据而非代码

例如，设计为抓取网页内容的扩展，可能会在XPath中定义抓取规则，而不是在 JavaScript 代码中。

以有限权限运行代码

如果你必须执行这段代码,应考虑以更低的权限运行。此建议主要适用于扩展和 XUL 应用程序，可以使用 Components.utils.evalInSandbox 做到降低权限。

例子

使用eval

在下面的代码中，两种包含了eval()的声明都返回了 42。第一种是对字符串"x + y + 1"求值；第二种是对字符串"42"求值。

var x = 2;
var y = 39;
var z = "42";
eval("x + y + 1"); // returns 42
eval(z);           // returns 42 

使用eval执行一串 JavaScript 语句

下面的例子使用eval()来执行str字符串。这个字符串包含了如果x等于5，就打开一个Alert 对话框并对z赋值 42，否则就对z赋值 0 的 JavaScript 语句。当第二个声明被执行，eval()将会令字符串被执行，并最终返回赋值给z的 42。

var x = 5;
var str = "if (x == 5) {console.log('z is 42'); z = 42;} else z = 0;";

console.log('z is ', eval(str));

如果您定义了多个值，则会返回最后一个值。

var x = 5;
var str = "if (x == 5) {console.log('z is 42'); z = 42; x = 420; } else z = 0;";

console.log('x is ', eval(str)); // z is 42  x is 420

返回值

eval返回最后一个表达式的值。

var str = 'if ( a ) { 1 + 1; } else { 1 + 2; }';
var a = true;
var b = eval(str);  // returns 2
 
console.log('b is : ' + b);

a = false;
b = eval(str);  // returns 3

console.log('b is : ' + b);

eval中函数作为字符串被定义需要“（”和“）”作为前缀和后缀

var fctStr1 = 'function a() {}'
var fctStr2 = '(function a() {})'
var fct1 = eval(fctStr1)  // 返回undefined
var fct2 = eval(fctStr2)  // 返回一个函数

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com