javascript中eval和with用法实例总结


Posted in Javascript onNovember 30, 2015

本文实例讲述了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 相关文章推荐
jQuery 获取对象 基本选择与层级
May 31 Javascript
javascript学习笔记(二) js一些基本概念
Jun 18 Javascript
html5 canvas js(数字时钟)实例代码
Dec 23 Javascript
node.js中的fs.mkdirSync方法使用说明
Dec 17 Javascript
Node.js 制作实时多人游戏框架
Jan 08 Javascript
jQuery 实现评论等级好评差评特效
May 06 Javascript
javascript实现文字无缝滚动
Dec 27 Javascript
Vue.js手风琴菜单组件开发实例
May 16 Javascript
input输入框内容实时监测(附代码)
Aug 15 Javascript
JavaScript实现点击图片换背景
Nov 20 Javascript
js基于canvas实现时钟组件
Feb 07 Javascript
JavaScript实现显示和隐藏图片
Apr 29 Javascript
JavaScript基础篇(3)之Object、Function等引用类型
Nov 30 #Javascript
全面解析Bootstrap排版使用方法(标题)
Nov 30 #Javascript
javascript作用域链(Scope Chain)用法实例解析
Nov 30 #Javascript
Bootstrap每天必学之js插件
Nov 30 #Javascript
Bootstrap每天必学之面板
Nov 30 #Javascript
Bootstrap每天必学之媒体对象
Nov 30 #Javascript
javascript针对cookie的基本操作实例详解
Nov 30 #Javascript
You might like
php微信公众号开发模式详解
2016/11/28 PHP
在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法
2011/05/24 Javascript
15款优秀的jQuery导航菜单插件分享
2011/07/19 Javascript
Javascript中找到子元素在父元素内相对位置的代码
2012/07/21 Javascript
编写js扩展方法判断一个数组中是否包含某个元素
2013/11/08 Javascript
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)
2013/12/17 Javascript
jQuery+css实现百度百科的页面导航效果
2014/12/16 Javascript
js动态切换图片的方法
2015/01/20 Javascript
jQuery DOM插入节点操作指南
2015/03/03 Javascript
jQuery绑定事件on()与弹窗的简要概述
2016/04/27 Javascript
浅析JavaScript中的对象类型Object
2016/05/26 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
2017/05/08 jQuery
AngularJS实现自定义指令及指令配置项的方法
2017/11/20 Javascript
js断点调试心得分享(必看篇)
2017/12/08 Javascript
vue 微信授权登录解决方案
2018/04/10 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
2018/08/24 Javascript
JS中DOM元素的attribute与property属性示例详解
2018/09/04 Javascript
JS实现鼠标移动拖尾
2020/12/27 Javascript
[51:53]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第二场 11.01
2020/11/02 DOTA
关于Django显示时间你应该知道的一些问题
2017/12/25 Python
Python使用Matplotlib实现Logos设计代码
2017/12/25 Python
selenium+python实现自动登录脚本
2018/04/22 Python
Python tkinter的grid布局及Text动态显示方法
2018/10/11 Python
Pycharm之快速定位到某行快捷键的方法
2019/01/20 Python
通过python连接Linux命令行代码实例
2020/02/18 Python
Pytorch学习之torch用法----比较操作(Comparison Ops)
2020/06/28 Python
对Python 字典元素进行删除的方法
2020/07/31 Python
python操作toml文件的示例代码
2020/11/27 Python
Carolina Lemke Berlin澳大利亚官网:时尚太阳镜品牌
2019/09/17 全球购物
财务人员个人自荐信范文
2013/09/26 职场文书
产品促销活动策划书
2014/01/15 职场文书
优秀的2014年两会精神解读
2014/03/17 职场文书
机关驾驶员违规检讨书
2014/09/13 职场文书
2015年大学生入党自荐书
2015/03/24 职场文书
励志语录:时光飞逝,请学会珍惜所有的人和事
2020/01/16 职场文书
JS中一些高效的魔法运算符总结
2021/05/06 Javascript