eval()、window.eval()和with

最新推荐文章于 2025-03-10 16:59:06 发布

原创最新推荐文章于 2025-03-10 16:59:06 发布 · 4.3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#eval #window.eval #with #eval和with

HTML/CSS/JS 专栏收录该内容

47 篇文章

订阅专栏

本文探讨了JavaScript中的eval()和window.eval()函数，它们都能动态执行代码，但执行上下文有所区别。同时，提到了with关键字如何改变代码的执行上下文，特别是在处理数据过滤场景中的应用。通过两个示例，解释了with作用域链的创建和恢复过程，进一步理解它们在JavaScript编程中的影响。

eval()和window.eval()都可以用来动态执行javascript代码，能给js编程带来很大的灵活性，两者唯一的差别在于执行上下文不同。

function testEval() {
	eval("var strEval = 'local';");
}

function testWindowEval() {
	window.eval("var strWindowEval = 'global';");
}

testEval();
testWindowEval();
alert(strWindowEval); //global
alert(strEval); //Uncaught ReferenceError: strEval is not defined

可以看到：window.eval()的执行上下文是“全局对象”，而eval()的执行上下文则是“调用eval的上下文环境”。现在我们看下，与eval有关的代码。

代码1：

var str = "global";

function test() {
	alert(str); //undefined
	var str = "local";
}

test();
alert(str); //global

如果你了解var关键字的"提前声明"特性，上面这段代码的执行结果很好理解。如果不明白，可以参考这篇文章。

代码2：

var str = "global";

function test() {
	alert(str); //global
	eval("var str='local';");
	//var str = "local";
	alert(str); //local
}

test();
alert(str); //global

eval和window.eval也存在浏览器兼容性问题，这里直接附上结论，摘录自这篇文章。

IE6/7/8中，eval和window.eval一样，写在自定义函数内是局部闭包，否则是全局闭包。
IE9/Firefox/Safari/Chrome/Opera中，eval同以上IE6/7/8，
window.eval即使写在自定义函数内使用的也是全局闭包。

下面介绍下with，with为一条或一组语句指定默认对象，通常用来缩短代码量。

var obj = {name:"aty",age:"25"};
with(obj)
{
	alert("name="+name+",age="+age);
}

最近我在搞JsonSQL的时候，学习到了with另一个很重要的性质：改变with内语句的执行上下文。

举个例子：假如我们有一个data数组，一个condition语句(js语句)，现在需要按照condition过滤data。

var data = [
	{name:"aa",age:20},
	{name:"bb",age:40},
	{name:"cc",age:10}];

var condition = "name=='bb' || age == 20";

var filter = [];
var counter = 0;

for(var i=0; i < data.length; i++)
{
	with(data[i])
	{
		if(eval(condition))
		{
			filter[counter++] = data[i];
		}
	}
}

alert(JSON.stringify(filter));

你可以细细品味下上面这段代码，我觉得这是eval和with很经典的一个配合。

再看下面代码，了解下with执行过程中，作用域链的创建和恢复。

function withTest() {
	var name = "aty";
	
	var obj = {name : "temp"};
	//暂时修改作用域链
	with (obj) {
		alert(name);//temp
	}//with内的语句执行完之后，作用域链恢复原状

	alert(name);//aty
}
withTest();

参考文章：

eval与window.eval的差别
http://www.cnblogs.com/snandy/archive/2011/03/16/1986055.html

javascript的eval和with使用小结
http://www.cnblogs.com/jeffwongishandsome/archive/2009/07/14/1509780.html