javascript的eval和with使用小结

简介:

我们都知道javascript的作用域机制,但是with和eval有时会“破坏”我们对于作用域的常规理解。下面参考网上资源和自己理解总结一下eval和with的用法。
一、eval
1、eval函数:把一个字符串当作一个js表达式一样去执行它.
2、语法:eval(strScript)  注:参数strScript是必填项
3、使用说明
      (1)它是有返回值的,如果参数字符串是一个表达式,就会返回表达式的值。如果参数字符串不是表达式,没有值,那么返回“undefined”。
      (2)参数字符串作为代码执行时,是和调用eval函数的上下文相关的,即其中出现的变量或函数调用必须在调用eval的上下文环境中可用。
4、示例:

ContractedBlock.gif Code

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是不被推荐的,因为需要操作作用域链(移进、移出作用域),执行效率低下。

 





本文转自JeffWong博客园博客,原文链接:http://www.cnblogs.com/jeffwongishandsome/archive/2009/07/14/1509780.html,如需转载请自行联系原作者

目录
相关文章
|
3月前
|
JSON JavaScript 小程序
js中eval()的使用说明
js中eval()的使用说明
|
6月前
|
Web App开发 JavaScript 前端开发
Chrome 开发者工具里根据关键字搜索,结果列表里的 JavaScript 文件名后面跟的 ‘eval‘ 是什么含义
Chrome 开发者工具里根据关键字搜索,结果列表里的 JavaScript 文件名后面跟的 ‘eval‘ 是什么含义
48 0
|
3月前
|
移动开发 JavaScript 前端开发
原生JavaScript+CSS实现计算器(简单的介绍一下eval函数)
原生JavaScript+CSS实现计算器(简单的介绍一下eval函数)
28 0
|
4月前
|
JSON JavaScript Go
js中eval
js中eval
21 0
|
8月前
|
自然语言处理 JavaScript 前端开发
JavaScript中eval和with语句如何影响作用域链:探索深度知识
JavaScript中eval和with语句如何影响作用域链:探索深度知识
|
8月前
|
JavaScript
JS eval() 动态执行函数
JS eval() 动态执行函数
45 0
|
JavaScript 前端开发 Shell
开发中切忌使用的JavaScript语句 —— with语句 和 eval语句
开发中切忌使用的JavaScript语句 —— with语句 和 eval语句
113 0
|
JavaScript 前端开发
用Eval实现基本运算——Javascript
用Eval实现基本运算——Javascript
64 0
用Eval实现基本运算——Javascript
|
自然语言处理 JavaScript 前端开发
JavaScript 中 Eval 函数的前世今生,执行代码字符串
JavaScript 中 Eval 函数的前世今生,执行代码字符串
78 0
JavaScript 中 Eval 函数的前世今生,执行代码字符串