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 相关文章推荐
JS 自动安装exe程序
Nov 30 Javascript
js中Image对象以及对其预加载处理示例
Nov 20 Javascript
jquery ajax对特殊字符进行转义防止js注入使用示例
Nov 21 Javascript
PHP开发者必须掌握的6个关键字
Apr 14 Javascript
浅谈jQuery构造函数分析
May 11 Javascript
jquery+json实现动态商品内容展示的方法
Jan 14 Javascript
关于vue-router路径计算问题
May 10 Javascript
JavaScript运动框架 多值运动(四)
May 18 Javascript
深究AngularJS——ng-checked(回写:带真实案例代码)
Jun 13 Javascript
JS实现非首屏图片延迟加载的示例
Jan 06 Javascript
JS严格模式知识点总结
Feb 27 Javascript
vuex Module将 store 分割成模块的操作
Dec 07 Vue.js
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
开启CURL扩展,让服务器支持PHP curl函数(远程采集)
2011/03/19 PHP
php类声明和php类使用方法示例分享
2014/03/29 PHP
php之curl设置超时实例
2014/11/03 PHP
php函数与传递参数实例分析
2014/11/15 PHP
PHP计算指定日期所在周的开始和结束日期的方法
2015/03/24 PHP
Codeigniter中集成smarty和adodb的方法
2016/03/04 PHP
利用php输出不同的心形图案
2016/04/22 PHP
PHP搭建大文件切割分块上传功能示例
2017/01/04 PHP
再谈querySelector和querySelectorAll的区别与联系
2012/04/20 Javascript
Javascript 闭包引起的IE内存泄露分析
2012/05/23 Javascript
JavaScript检测字符串中是否含有html标签实现方法
2015/07/01 Javascript
html+js实现简单的计算器代码(加减乘除)
2016/07/12 Javascript
vue监听scroll的坑的解决方法
2017/09/07 Javascript
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
2018/05/17 Javascript
react+redux仿微信聊天界面
2019/06/21 Javascript
Vue SSR 即时编译技术的实现
2020/05/06 Javascript
用Python编写一个基于终端的实现翻译的脚本
2015/04/24 Python
Python使用迭代器捕获Generator返回值的方法
2017/04/05 Python
python实现简易内存监控
2018/06/21 Python
Python-Seaborn热图绘制的实现方法
2019/07/15 Python
浅谈python中频繁的print到底能浪费多长时间
2020/02/21 Python
Idea安装python显示无SDK问题解决方案
2020/08/12 Python
HTML5中的Web Notification桌面通知功能的实现方法
2019/07/29 HTML / CSS
泰国第一的化妆品网站:Konvy
2018/02/25 全球购物
美国在线打印网站:Overnight Prints
2018/10/11 全球购物
豪华复古化妆:Besame Cosmetics
2019/09/06 全球购物
计算机毕业大学生推荐信
2013/12/01 职场文书
新郎婚宴答谢词
2014/01/19 职场文书
优秀共产党员先进事迹材料
2014/05/06 职场文书
公司应聘自荐书
2014/06/14 职场文书
2014年酒店年度工作总结
2014/12/10 职场文书
小区物业管理2015年度工作总结
2015/10/22 职场文书
大学学生会竞选稿
2015/11/19 职场文书
安全生产培训心得体会
2016/01/18 职场文书
Java中CyclicBarrier和CountDownLatch的用法与区别
2021/08/23 Java/Android
MySQL数据库实验实现简单数据库应用系统设计
2022/06/21 MySQL