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 相关文章推荐
Prototype使用指南之hash.js
Jan 10 Javascript
2010年最佳jQuery插件整理
Dec 06 Javascript
一个简单的瀑布流效果(主体形式自写)
May 27 Javascript
HTML页面滚动时获取离页面顶部的距离2种实现方法
Sep 05 Javascript
jquery 通过name快速取值示例
Jan 24 Javascript
jQuery实现向下滑出的二级菜单效果实例
Aug 22 Javascript
JavaScript面向对象程序设计教程
Mar 29 Javascript
vue双向绑定简要分析
Mar 23 Javascript
angularJs中$http获取后台数据的实例讲解
Aug 08 Javascript
TypeScript基础入门教程之三重斜线指令详解
Oct 22 Javascript
浅谈Vuex注入Vue生命周期的过程
May 20 Javascript
使用JavaScript实现贪吃蛇游戏
Sep 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
详解WordPress开发中wp_title()函数的用法
2016/01/07 PHP
PHP获取网站中各文章的第一张图片的代码示例
2016/05/20 PHP
javascript showModalDialog 多层模态窗口实现页面提交及刷新的代码
2009/11/28 Javascript
jquery模拟按下回车实现代码
2011/09/20 Javascript
js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
2012/12/27 Javascript
JavaScript 学习笔记之操作符
2015/01/14 Javascript
jQuery学习笔记之jQuery+CSS3的浏览器兼容性
2015/01/19 Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
2015/05/04 Javascript
Javascript实现div层渐隐效果的方法
2015/05/30 Javascript
Node.js  REPL (交互式解释器)实例详解
2017/08/06 Javascript
详解vue中localStorage的使用方法
2018/11/22 Javascript
vue拖拽组件使用方法详解
2018/12/01 Javascript
vue+django实现一对一聊天功能的实例代码
2019/07/17 Javascript
vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
2019/11/04 Javascript
VuePress 中如何增加用户登录功能
2019/11/29 Javascript
js刷新页面location.reload()用法详解
2019/12/09 Javascript
JavaScript canvas实现跟随鼠标事件
2020/02/10 Javascript
如何通过JS实现日历简单算法
2020/10/14 Javascript
微信小程序实现滚动Tab选项卡
2020/11/16 Javascript
python实现二叉查找树实例代码
2018/02/08 Python
python的一些加密方法及python 加密模块
2019/07/11 Python
Django框架视图函数设计示例
2019/07/29 Python
Python实现数值积分方式
2019/11/20 Python
flask 使用 flask_apscheduler 做定时循环任务的实现
2019/12/10 Python
python next()和iter()函数原理解析
2020/02/07 Python
python3读取autocad图形文件.py实例
2020/06/05 Python
美国东北部户外服装和设备零售商:Eastern Mountain Sports
2016/10/05 全球购物
大学生收银员求职信分享
2014/01/02 职场文书
群众路线自我剖析材料
2014/10/08 职场文书
乡镇党建工作总结2015
2015/05/19 职场文书
拉贝日记观后感
2015/06/05 职场文书
公文格式,规则明细(新手收藏)
2019/07/23 职场文书
2019年度政务公开考核工作总结模板
2019/11/11 职场文书
Java如何实现树的同构?
2021/06/22 Java/Android
Python中Matplotlib的点、线形状、颜色以及绘制散点图
2022/04/07 Python
python自动获取微信公众号最新文章的实现代码
2022/07/15 Python