这篇文章主要介绍了 javascript 中 eval 和 with 用法, 结合实例形式总结分析了 JavaScript 中 eval 和 with 的功能、用法与相关注意事项, 具有一定参考借鉴价值, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文实例讲述了 javascript 中 eval 和 with 用法。分享给大家供大家参考,具体如下:
我们都知道 javascript 的作用域机制,但是 with 和 eval 有时会 "破坏" 我们对于作用域的常规理解。下面参考网上资源和自己理解总结一下 eval 和 with 的用法。
一、eval
1、eval 函数:把一个字符串当作一个 js 表达式一样去执行它.
2、语法:eval(strScript) 注:参数 strScript 是必填项
3、使用说明
(1) 它是有返回值的,如果参数字符串是一个表达式,就会返回表达式的值。如果参数字符串不是表达式,没有值,那么返回 "undefined"。
(2) 参数字符串作为代码执行时,是和调用 eval 函数的上下文相关的,即其中出现的变量或函数调用必须在调用 eval 的上下文环境中可用。
4、示例:
- function $(s) {
- if (document.getElementById) {
- return eval('document.getElementById("' + s + '")');
- } else {
- return eval('document.all.' + s);
- }
- } //eval,这个比较常用
- var myTest = function() {
- return "eval test";
- };
- function evalTest() {
- //简单数据
- alert(eval("1+1")); //2
- alert(eval("'a'+1")); //a1
- alert(eval("1+'a'")); //1a
- alert(eval("parseInt('a'+1)")); //NaN
- alert(eval("parseInt(1+'a')")); //1
- alert(eval("true")); //true
- alert(eval("0==false")); //true
- alert(eval("1==undefined")); //false
- alert(eval("isNaN(undefined)")); //true
- //函数和对象
- alert(eval("this")); //[object]
- alert(eval("typeof(this)")); //object
- alert(eval("typeof(test)")); //undefined
- alert(eval("evalTest")); //这个显示当前函数的定义语句细节,包含注释
- //alert(eval("evalTest()")); //调用自己并执行,这个会有大问题啊!
- alert(eval("typeof(evalTest)")); //function
- //其他
- var tmpFunc = "{a:1}";
- alert(eval(tmpFunc)); //1
- alert(eval("(" + tmpFunc + ")")); //[object object]
- alert(eval("tmpFunc")); //{a:1}
- //alert(eval("tmpFunc()")); //脚本错误
- alert(myTest());
- eval("alert(myTest())"); //和上面等价
- alert(eval(myTest));
- alert(eval("myTest")); //和上面等价
- //form里的一个input,id=txtUserName
- eval("$('txtUserName').value='jeff wong';"); //等价于 $('txtUserName').value = 'jeff wong';
- eval("alert( $('txtUserName').value);");
- }
- evalTest();
5、eval 和作用域
(1)经典代码分析
a、常见
- var str = "global";
- function test() {
- alert(str); //undefined
- var str = "local";
- }
- test();
- alert(str); //global
分析:如我们预期的那样,得到指定值。test 函数内的 str 没有 var 和有 var 声明,结果也是不一样的,读者可自行验证。
b、eval 替代直接声明变量的写法
- var str = "global";
- function test() {
- alert(str); //??
- eval("var str='local';");//会像我们预期的那样吗?
- //var str = "local";
- alert(str); //这里又是什么结果?
- }
- test();
- alert(str); //??
分析:对比 a 中的写法,我们只是在 test 函数里用 eval 语句替换直接声明 var 定义变量那一句最后 alert 一下而已,结果出入很大。
(2)eval 定义全局代码
a、兼容 ie 和 ff 的通用定义全局代码的 eval 函数
- var nav = new Object();
- //通用eval函数
- nav.Eval = function(jsCode) {
- if (document.all) //IE下是execScript
- execScript(jsCode);
- else window.eval(jsCode); //FF下是window.eval
- }
对于 IE 浏览器,函数 execScript 用于在全局空间执行代码。
对于 Firefox 浏览器,直接调用 eval 函数,则在调用者的空间执行;如果调用 window.eval 则在全局空间执行;但是 alert(eval==window.eval) 的返回值是 true,奇怪的 ff.
b、调用 a 的测试代码
- var nav = new Object();
- //通用eval函数
- nav.Eval = function(jsCode) {
- if (document.all) //IE下是execScript
- execScript(jsCode);
- else window.eval(jsCode); //FF下是window.eval
- }
- function test() {
- nav.Eval("var str = 'global';"); //这里声明变量str,在外面的函数中可以调用变量
- nav.Eval("var tmpFunc = function(){alert('global function');};"); //这里声明函数变量tmpFunc,在外面的函数中可以调用函数
- alert(str); //global
- tmpFunc(); //global function
- }
- test();
- alert(str); //global (调用nav.Eval函数声明的全局变量)
- tmpFunc(); // global function (调用nav.Eval函数声明的全局函数)
分析:通过 b 中的代码,你可能已经发现了 eval 定义全局代码的一个显而易见的不方便的地方,就是对于全局代码,js 智能提示(这里是 vs,可能其他工具也会)完全失去提示作用。由此你肯定会问,程序中通过 eval 这种方式定义了很多全局代码,它的可维护性会不会太那个了?我的看法就是赞成网上的总结,少用 eval。毕竟现成的工具都不能很好的提示了,而程序员的视力往往又不是那么好。
二、with
1、with 语句: 为一个或一组语句指定默认对象,通常用来缩短特定情形下必须写的代码量。
2、语法:with (<对象>) <语句>
with (object)
statements
(1)参数 object: 新的默认对象;
(2)statements : 一个或多个语句,object 是该语句的默认对象。
3、示例:
- function withTest() {
- with (document) { //document的重复使用
- writeln("Hello,");
- writeln("it's a with keyword test!");
- }
- with (Math) { //Math的重复使用
- alert(random());
- alert(abs(-10));
- }
- }
- withTest();
4、with 会暂时修改作用域链
- function withTest() {
- var userName = "jeff wong";
- //暂时修改作用域链
- with (document) {
- writeln("Hello,");
- writeln(userName);
- }//with内的语句执行完之后,作用域链恢复原状
- alert(userName);
- }
- withTest();
分析: 函数 withTest 在定义的时候,就确定了 withTest 的作用域链,我们暂且认为这条作用域链的最顶端是 window 对象,当 withTest 被执行的时候,js 引擎生成了一个 call object(调用对象)并将其添加到作用域链尾部上(window 对象之后),语句运行到 with(document) 时,将生成新的作用域(实质上这个作用域和普通 function 的作用域一样,只不过它在 with 子句执行完,该作用域也随之消失)并添加到作用域链的尾部,所以 with 之内的变量查找,就会优先从这条链的 with(document) 作用域上查找,然后从 withTest 的 call object 中查找,最后查找 window。with 内的语句执行完之后,作用域链恢复原状(with(document) 生成的作用域被移出作用域链)。
ps:with 是不被推荐的,因为需要操作作用域链(移进、移出作用域),执行效率低下。
希望本文所述对大家 JavaScript 程序设计有所帮助。
来源: