JavaScript Eval函数深度解析：作用域、兼容性与高级用法

Eval函数基础与DOM应用

Eval函数的核心功能是将传入的字符串作为JavaScript代码传递给解释器进行解析并执行。

以下是一个基础示例：

 
<script type="text/javascript">
eval("alert(1+1)");
</script>

该示例直观展示了字符串被解析为JS代码并执行的过程，最终弹出结果2。

上述示例仅具演示意义，实际开发中极少如此使用。更常见的场景是在DOM操作中，例如当需要通过循环动态获取div1、div2、div3等元素ID时，由于无法直接通过静态ID获取，可利用for循环配合eval拼接字符串来执行操作。示例如下：

 
<script type="text/javascript">
for (var loop = 1; loop < 10; loop++) {
eval('document.getElementById("div"+loop).innerHTML="123"');
} 
</script>

介绍完基础用法后，我们进一步剖析Eval函数的深层特性。

Eval的作用域特性分析

首先从作用域角度进行分析，参考以下代码：

 
<script type="text/javascript">
eval("var i=3");
alert(i);
</script>

该代码执行后弹出3。接着对比另一段代码：

 
<script type="text/javascript">
var test = function () {
eval("var i=3");
alert(i);
} 
test();
alert(i);
</script>

执行结果为先弹出3，随后弹出undefined。

这表明Eval动态执行的代码不会创建新的作用域，而是直接在当前作用域内执行。因此，Eval函数可以访问并使用当前作用域中的this、arguments等对象。

IE兼容性与全局执行方案

在IE浏览器中，存在一个与Eval类似的功能函数execScript。相关代码如下：

 
<script type="text/javascript">
var test = function () {
execScript("var i=3");
alert(i);
} 
test();
alert(i);
</script>

该代码会弹出两个3，说明execScript的作用域是全局而非当前局部作用域。若在Firefox或Chrome中运行上述代码，execScript将无效，这揭示了execScript存在浏览器兼容性问题。

基于此，我们需要一种能结合两者优点（全局作用域且跨浏览器兼容）的方案。经研究整合，实现方式如下：

 
<script type="text/javascript">
var StrongEval = function (code) {
if (window.navigator.userAgent.indexOf("MSIE") >= 1) {
execScript(code);
} 
if (window.navigator.userAgent.indexOf("Firefox") >= 1) {
window.eval(code);
} 
else {
execScript(code);
} 
}; 
var Test = function () {
StrongEval("var i=3");
} 
Test();
alert(i);
</script>

此方案实现了Firefox和IE的兼容，其关键在于Firefox中eval与window.eval并不等效，这一特性较为特殊。

结合With的高级技巧与上下文切换

此外，还可以结合eval与with语句实现一些高级技巧。

常规写法可能如下：

 
var obj = function () {
this.a = 1;
this.b = 2;
this.c = 5;
this.fun = function () {
this.c = this.a + this.b;
} 
}; 
var o = new obj();
o.fun();
alert(o.c);

或者采用对象字面量形式：

 
var obj = {
a: 1,
b: 2,
c: 5,
fun: function () {
this.c = this.a + this.b;
} 
} 

又或者使用原型链方式：

 
var obj = function () {
this.a = 1;
this.b = 2;
this.c = 5;
}; 
obj.prototype.fun = function () {
this.c = this.a + this.b;
} 
var o = new obj();
o.fun();
alert(o.c);

面对繁琐的this引用，我们可以采用一种另类方法，在感官上或许更为简洁。

 
<script type="text/javascript">
var funtemp = function () {
c = a + b;
} 
var obj = {
a: 1,
b: 2,
c: 5
}; 
var fun;
with (obj) {
eval("fun = " + funtemp);
} 
fun();
alert(obj.c);
</script>

暂且不讨论这种写法的美观程度，我们来看另一种应用场景。

 
<script>
var DBCommon = function () {
alert("1."); CreateConnection();
alert("2."); OpenConnection();
alert("3."); CreateCommand();
alert("4."); ExcuteCommand();
alert("5."); CloseConnection();
} 
var SQLServerCommon = {
CreateConnection: function () { alert("建立SQL Server连接"); },
OpenConnection: function () { alert("打开SQL Server连接"); },
CreateCommand: function () { alert("创建SQL Server命令"); },
ExcuteCommand: function () { alert("执行SQL Server命令"); },
CloseConnection: function () { alert("关闭SQL Server连接"); }
}; 
var OracleCommon = {
CreateConnection: function () { alert("建立Oracle连接"); },
OpenConnection: function () { alert("打开Oracle连接"); },
CreateCommand: function () { alert("创建Oracle命令"); },
ExcuteCommand: function () { alert("执行Oracle命令"); },
CloseConnection: function () { alert("关闭Oracle连接"); }
}; 
with (SQLServerCommon) {
eval("forSQLServer=" + DBCommon);
} 
with (OracleCommon) {
eval("forOracle=" + DBCommon);
} 
forSQLServer();
forOracle();
</script>

这是否可以视为一种简陋的模板方法模式？我们可以将其理解为利用eval和with配合来改变函数的执行上下文。

尽管如此，在常规开发中Eval的使用频率极低，我们应尽可能避免使用它。