javascript中eval和with用法实例总结

 更新时间:2015年11月30日 10:58:55   作者:Jeff Wong  
这篇文章主要介绍了javascript中eval和with用法,结合实例形式总结分析了JavaScript中eval和with的功能、用法与相关注意事项,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了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程序设计有所帮助。

相关文章

  • Javascript获取当前时间函数和时间操作小结

    Javascript获取当前时间函数和时间操作小结

    这篇文章主要介绍了Javascript获取当前时间函数和时间操作小结,本文根据项目实际需求总结而来,需要的朋友可以参考下
    2014-10-10
  • layer.open提交子页面的form和layedit文本编辑内容的方法

    layer.open提交子页面的form和layedit文本编辑内容的方法

    今天小编就为大家分享一篇layer.open提交子页面的form和layedit文本编辑内容的方法,具有好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 浅聊一下为什么能用RxJS取代Redux

    浅聊一下为什么能用RxJS取代Redux

    本文我们将和大家浅聊一下为什么能用RxJS取代Redux,RxJS 在现在的前端用比较少,但是 RxJS 作为响应式和函数式编程的集大成者,似乎被前端开发者遗忘,可能是学习难度大,可能是有更加方便的解决方案,需要的朋友可以参考下
    2024-02-02
  • 基于Bootstrap实现城市三级联动

    基于Bootstrap实现城市三级联动

    这篇文章主要为大家详细介绍了基于BootStrap实现城市三级联动,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • JS+CSS实现滑动切换tab菜单效果

    JS+CSS实现滑动切换tab菜单效果

    这篇文章主要介绍了JS+CSS实现滑动切换tab菜单效果,涉及javascript鼠标事件及页面元素样式的动态切换效果实现技巧,需要的朋友可以参考下
    2015-08-08
  • iframe父子页面实现共用滚动条的常见方法

    iframe父子页面实现共用滚动条的常见方法

    在开发过程中,有时候需要用到iframe复用不同域名下的页面内容,为了提供连贯的用户体验,经常需要在主页面(父页面)和iframe子页面之间共享滚动位置,本文将介绍其中较为常见的一种方法来实现iframe父子页面共用滚动条,需要的朋友可以参考下
    2024-05-05
  • JavaScript高级程序设计 DOM学习笔记

    JavaScript高级程序设计 DOM学习笔记

    DOM是针对XML和HTML文档的一个API:即规定了实现文本节点操控的属性、方法,具体实现由各自浏览器实现。
    2011-09-09
  • JS实现页面加载完成之后自动刷新一次问题

    JS实现页面加载完成之后自动刷新一次问题

    这篇文章主要介绍了JS实现页面加载完成之后自动刷新一次问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-02-02
  • 超链接的禁用属性Disabled使用示例

    超链接的禁用属性Disabled使用示例

    可以设置超链接的Disabled属性的true 和 false来确定超链接是不是能点击,下面有个示例,大家不妨参考下
    2014-07-07
  • 详解 javascript中offsetleft属性的用法

    详解 javascript中offsetleft属性的用法

    本章节通过代码实例介绍一下offsetleft属性的用法,需要的朋友可以做一下参考。
    2015-11-11

最新评论