javascript eval(func())使用示例


Posted in Javascript onDecember 05, 2013

eval的作用其实很简单,就是把一段字符串传递给JS解释器,由Javascript解释器将这段字符串解释成Javascript代码,并且执行他。

举个最简单的例子:

<script type="text/javascript"> 
eval("alert(1+1)"); 
script>

很简单,把字符串解释成JS代码并执行,弹出2。

当然,上面的例子只是个玩具,在实际中没有人会傻到这么用。我想大家最基本的使用eval函数都是应该在DOM中,例如我们有div1,div2,div3,那么在document.getElementByID时我们的ID没有办法去得到,那么最简单的办法就是在for循环中,使用eval来拼接这么一段程序。例如这样:

<script type="text/javascript"> 
for (var loop = 1; loop < 10; loop++) { 
eval('document.getElementById("div"+loop).innerHTML="123"'); 
} 
script>

最基本的用法说完,相信大家还是对这个函数意犹未尽,如果这个函数只有这么点用法,那就太无聊了。那我们就一点点来剖下一下eval()函数。

我们就先从eval的作用域说起,先看这样一段函数:

<script type="text/javascript"> 
eval("var i=3"); 
alert(i); 
script>

代码很简单,结果可以弹出3。接下来再对比这段代码:
<script type="text/javascript"> 
var test = function () { 
eval("var i=3"); 
alert(i); 
} 
test(); 
alert(i); 
script>

结果是首先弹出3,然后是undefined。

那么说明:eval()函数动态执行的代码并不会创建新的作用域,其代码就是在当前的作用域执行的。因此也就是说,eval()函数也完全可以使用当前作用域的this,argument等对象。

在IE中,支持这样一种和eval()非常类似的函数叫做:execScript()。我们可以来写段简单的代码。

<script type="text/javascript"> 
var test = function () { 
execScript("var i=3"); 
alert(i); 
} 
test(); 
alert(i); 
script>

结果弹出了2个3,这也就看出了execScript函数的特点,首先他和eval相类似,都能将字符串解释成JS代码并且执行,但是他的作用域不是当前作用域,而是全局作用域。当我们把上面的代码放到Firefox和谷歌浏览器上去试试:发现在Firefox上execScript上代码是无效的,那么也说明一个问题,execScript代码的浏览器兼容性是有问题的。

那么就引申出这样一个问题,我们如何能把这两个函数的“优点”给汇总到一起呢,也就是说,全局+浏览器兼容性。上网搜了下,自己给汇总了一下,大概是这样:

<script type="text/javascript"> 
var StrongEval = function (code) { 
if (window.navigator.userAgent.indexOf("MSIE") >= 1) { 
execScript(code); 
} 
if (window.navigator.userAgent.indexOf("Firefox") >= 1) { 
window.eval(code); 
} 
else { 
execScript(code); 
} 
}; 
var Test = function () { 
StrongEval("var i=3"); 
} 
Test(); 
alert(i); 
script>

这样就可以完美地兼容FF和IE了,其本质代码就在于在FF中eval和window.eval并不等效,这是个很奇妙的事。

另外,我们还可以用eval+with实现一些奇淫技巧。

我们在一般意义上可以写出这样的代码:

var obj = function () { 
this.a = 1; 
this.b = 2; 
this.c = 5; 
this.fun = function () { 
this.c = this.a + this.b; 
} 
}; 
var o = new obj(); 
o.fun(); 
alert(o.c);

或者是这样:
var obj = { 
a: 1, 
b: 2, 
c: 5, 
fun: function () { 
this.c = this.a + this.b; 
} 
}

再或者是这样:
var obj = function () { 
this.a = 1; 
this.b = 2; 
this.c = 5; 
}; 
obj.prototype.fun = function () { 
this.c = this.a + this.b; 
} 
var o = new obj(); 
o.fun(); 
alert(o.c);

无论怎么样,你是不是对这样的this感觉厌烦了呢?那就让我们采取个很另类的办法吧,让至少在感官上可能会舒服一点。
<script type="text/javascript"> 
var funtemp = function () { 
c = a + b; 
} 
var obj = { 
a: 1, 
b: 2, 
c: 5 
}; 
var fun; 
with (obj) { 
eval("fun = " + funtemp); 
} 
fun(); 
alert(obj.c); 
script>

这个很勉强,那么好,我们不讨论什么看着舒服不舒服。我们来讨论这样一种情况。
<script> 
var DBCommon = function () { 
alert("1."); CreateConnection(); 
alert("2."); OpenConnection(); 
alert("3."); CreateCommand(); 
alert("4."); ExcuteCommand(); 
alert("5."); CloseConnection(); 
} 
var SQLServerCommon = { 
CreateConnection: function () { alert("建立SQL Server连接"); }, 
OpenConnection: function () { alert("打开SQL Server连接"); }, 
CreateCommand: function () { alert("创建¨SQL Server命令"); }, 
ExcuteCommand: function () { alert("执行DSQL Server命令"); }, 
CloseConnection: function () { alert("关闭SQL Server连接"); } 
}; 
var OracleCommon = { 
CreateConnection: function () { alert("建立¢Oracle连接"); }, 
OpenConnection: function () { alert("打开aOracle连接"); }, 
CreateCommand: function () { alert("创建¨Oracle命令"); }, 
ExcuteCommand: function () { alert("执行DOracle命令"); }, 
CloseConnection: function () { alert("关闭?Oracle连接"); } 
}; 
with (SQLServerCommon) { 
eval("forSQLServer=" + DBCommon); 
} 
with (OracleCommon) { 
eval("forOracle=" + DBCommon); 
} 
forSQLServer(); 
forOracle(); 
script>

我们又是否可以把这个看成是一个简陋的模板方法模式呢?呵呵。我们也可以把这个称为利用eval和with配合改变函数的上下文。

不过话又说回来,Eval在一般的情况中是很少被用到的,我们是完全可以避免来使用它的。

Javascript 相关文章推荐
JavaScript XML和string相互转化实现代码
Jul 04 Javascript
jquery调用wcf并展示出数据的方法
Jul 07 Javascript
JavaScript window.document的属性、方法和事件小结
Oct 24 Javascript
JavaScript函数模式详解
Nov 07 Javascript
js实现简单排列组合的方法
Jan 27 Javascript
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
Aug 17 jQuery
vue.js整合mint-ui里的轮播图实例代码
Dec 27 Javascript
Vue仿支付宝支付功能
May 25 Javascript
vue-cli3.0使用及部分配置详解
Aug 29 Javascript
ant design实现圈选功能
Dec 17 Javascript
基于js实现数组相邻元素上移下移
May 19 Javascript
vue过滤器实现日期格式化的案例分析
Jul 02 Javascript
javascript中的作用域和上下文使用简要概述
Dec 05 #Javascript
jquery.cookie() 方法的使用(读取、写入、删除)
Dec 05 #Javascript
千分位数字格式化(用逗号隔开 代码已做了修改 支持0-9位逗号隔开)的JS代码
Dec 05 #Javascript
jquery导航制件jquery鼠标经过变色效果示例
Dec 05 #Javascript
javascript拖拽上传类库DropzoneJS使用方法
Dec 05 #Javascript
jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
Dec 05 #Javascript
JS获取html对象的几种方式介绍
Dec 05 #Javascript
You might like
phpmyadmin 3.4 空密码登录的实现方法
2010/05/29 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
php微信公众号开发之音乐信息
2018/10/20 PHP
javascript和HTML5利用canvas构建猜牌游戏实现算法
2013/07/17 Javascript
html的DOM中document对象anchors集合用法实例
2015/01/21 Javascript
gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
2016/02/21 Javascript
使用plupload自定义参数实现多文件上传
2016/07/19 Javascript
微信小程序 wxapp内容组件 text详细介绍
2016/10/31 Javascript
浅谈JavaScript中的属性:如何遍历属性
2017/09/14 Javascript
微信小程序实现折叠面板
2018/01/31 Javascript
axios发送post请求,提交图片类型表单数据方法
2018/03/16 Javascript
JS中注入eval, Function等系统函数截获动态代码
2019/04/03 Javascript
vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果
2019/04/08 Javascript
JS如何实现动态添加的元素绑定事件
2019/11/12 Javascript
基于vue3.0.1beta搭建仿京东的电商H5项目
2020/05/06 Javascript
封装Vue Element的table表格组件的示例详解
2020/08/19 Javascript
浅析python 中__name__ = '__main__' 的作用
2014/07/05 Python
python opencv判断图像是否为空的实例
2019/01/26 Python
Python3.5装饰器原理及应用实例详解
2019/04/30 Python
Django之使用celery和NGINX生成静态页面实现性能优化
2019/10/08 Python
django数据模型on_delete, db_constraint的使用详解
2019/12/24 Python
css3实现可滑动跳转的分页插件示例
2014/05/08 HTML / CSS
英国和世界各地鲜花速递专家:Arena Flowers
2018/02/10 全球购物
德国高端单身人士交友网站:ElitePartner
2018/12/02 全球购物
Farfetch澳大利亚官网:Farfetch Australia
2020/04/26 全球购物
写一个用矩形法求定积分的通用函数
2012/11/08 面试题
什么叫应用程序域?什么是托管代码?什么是强类型系统?什么是装箱和拆箱?什么是重载?CTS、CLS和CLR分别作何解释?
2012/05/23 面试题
给领导的致歉信范文
2014/01/13 职场文书
2014年社区重阳节活动策划方案
2014/09/16 职场文书
学校百日安全活动总结
2015/05/07 职场文书
妈妈别哭观后感
2015/06/08 职场文书
2016大学生毕业实习心得体会
2016/01/23 职场文书
2017新年晚会开幕词
2016/03/03 职场文书
2019年怎样写好导游词?
2019/07/02 职场文书
python中print格式化输出的问题
2021/04/16 Python
HTML基础详解(下)
2021/10/16 HTML / CSS