JavaScript通过参数动态调用函数——js中eval实现反射
今天碰到人问这样一个问题：用jQuery做一个菜单，每次使用时传进去一个参数，这个参数是一个函数名，在菜单中怎么执行这个函数。
大概就这么个意思吧，当时听到就很熟悉的感觉，有的说为什么不用switch
case，但是说实话有时候用判断确实不爽，好像自己之前也这样做过，但是真想不起来怎么实现的了。然后搜了一下，找到eval解决，决定记录一下，免得再忘掉。
网上找到一个总结比较不错的，转来，同时对作者表示敬意（本人懒，勿怪）：
eval函数接收一个参数s，如果s不是字符串，则直接返回s。否则执行s语句。如果s语句执行结果是一个值，则返回此值，否则返回undefined。
需要特别注意的是对象声明语法“{}”并不能返回一个值，需要用括号括起来才会返回值，简单示例如下：
复制代码 代码如下:
var code1='"a" + 2'; //表达式
varcode2='{a:2}'; //语句
alert(eval_r(code1)); //-&'a2'
alert(eval_r(code2)); //-&undefined
alert(eval_r('(' + code2 + ')')); //-&[object
以看到，对于对象声明语句来说，仅仅是执行，并不能返回值。为了返回常用的“{}”这样的对象声明语句，必须用括号括住，以将其转换为表达式，才能返回其
值。这也是使用JSON来进行Ajax开发的基本原理之一。在例子中可以清楚的看到，第二个alert语句输出的是undefined，而第三个加了括号
后输出的是语句表示的对象。
现在来说本文的重点，如何在函数内执行全局代码。为了说明这个问题，先看一个例子：
复制代码 代码如下:
var s='global'; //定义一个全局变量
function demo1(){
eval_r('var s="local"');
alert(s); //-&global
很好理解，上面的demo1函数等价于：function demo1(){var
s='local';}，其中定义了一个局部变量s。
所以最后的输出是global并不是什么奇怪的事情，毕竟大家都能很清楚的区分局部变量和全局变量。
仔细体会一下，可以发现eval函数的特点，它总是在调用它的上下文变量空间（也称为：包，closure）内执行，无论是变量定义还是函数定义都是如此，所以如下的代码会产生函数未定义的错误：
复制代码 代码如下:
var s='function test(){return 1;}'; //一个函数定义语句
function demo2(){
eval_r(s);
alert(test()); //-&error:test is not defined
这是因为test函数在局部空间定义，demo2函数内可以访问到，外面就访问不到了。
而在实际的Ajax开发中，有时我们需要从服务器动态获取代码来执行，以减轻一次载入代码过多的问题，或者是一些代码是通过Javascript自身生成的，希望用eval函数来使其执行。
但这样的动态获取代码的工作一般在函数内完成，比如：
复制代码 代码如下:
function loadCode(){
varcode=getCode();
eval_r(code);
可见eval不可能在全局空间内执行，这就给开发带来了不少问题，也看到过很多人为此郁闷。
不过现在偶终于找到了解决办法，嘿嘿，可以同时兼容IE和Firefox，方法如下：
复制代码 代码如下:
var X2={} //my namespace:)
X2.Eval=function(code){
if(!!(window.attachEvent &&
!window.opera)){
execScript(code);
window.eval_r(code);
现在如果要想在函数内定义全局代码，就可以通过调用X2.eval_r(code)方法，一个例子如下：
复制代码 代码如下:
var s='global';
function demo3(){
X2.eval_r('var s="local"');
alert(s); //-&'local'
可见，在demo3函数内重新定义了全局变量s=”local”。
需要注意的是X2.Eval并不返回值，如果要进行表达式的求值，还是用系统的eval函数。X2.Eval设计为仅做全局代码定义用。
其实看到这里，或许有人感觉问题也太容易解决了点，呵呵，但发现这个办法倒是需要些运气和技巧的：
（1）对于IE浏览器，默认已经提供了这样的函数：execScript，用于在全局空间执行代码，只是知道的人还不多。
（2）对于Firefox浏览器，直接调用eval函数，则在调用者的空间执行；如果调用
window.eval则在全局空间执行。这个知道的人估计就更少了。毕竟alert(eval==window.eval)返回true！
Firefox的eval函数的特点的确是很令人奇怪的，但从javascript规范中倒也能找到其来源：
If value of the eval property is used in any way other than a
direct call (that is, other than by the explicit use of its
name as an Identifier which is the MemberExpression in a
CallExpression), or if the eval property is assigned to,
an EvalError exception may be thrown.
意思大概就是说eval函数的执行是和调用者相关的，但并没有说其执行上下文的问题。所以IE和Firefox孰是孰非也就很难说了，大家知道解决办法就好。
详细出处参考：http://www.jb51.net/article/30008.htm
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。11230人阅读
JavaScript知识（9）
1. &首先在页面中配置好一个表格框架
&td&新增参数:&/td&
&td class=&pn-fcontent&&&input type=&button& value=&选择& onclick=&openAppParamsPage();&/&&/td&
&td&参数列表:&/td&
&td class=&pn-fcontent&&&input type=&hidden& id=&paramslist& name=&paramslist& style=&width:190%& height=&500&/&&/td&
&table id=&tab& width=&100%& cellspacing=&1& cellpadding=&0& border=&0& style=&& class=&pn-ltable&&
&td height=&20& valign=&top& align=&center&&
&td height=&20& valign=&top& align=&center&&
&td height=&20& valign=&top& align=&center&&
&td id=&pos_1& height=&20&&
&tbody id=&sortList&&&/tbody&
&td align=&center& colspan=&4&&
&input type=&submit&
class=&btn& value=&保存& onclick=&setParamslist();&/&
&input type=&button&
class=&btn& value=&返回&/&
2. &相关JS函数
function setParamslist() {
var tab = document.getElementById(&tab&);
//表格行数
var rows = tab.rows.
//表格列数
var cells = tab.rows.item(0).cells.
//alert(&行数&+rows+&列数&+cells);
var rowData = &&;
for(var i=1;i&i++) {
var cellsData = new Array();
for(var j=0;j&cells-1;j++) {
cellsData.push(tab.rows[i].cells[j].innerText);
rowData = rowData + &|& + cellsD
document.getElementById(&paramslist&).value = rowD
//打开相关新增应用参数界面
function openAppParamsPage() {
var param = new Object();
//这个参数一定要传。
param.win =
param.id = 100;
param.name = &test&;
param.birthday = new Date();
var result = window.showModalDialog(&addParamsItem&,&dialogWidth:500dialogHeight:600dialogLeft:200dialogTop=200px&);
//var temp = document.getElementById(&paramslist&).
//document.getElementById(&paramslist&).value = temp +
addSort(result);
// 增加应用参数函数
function addSort(data) {
var name =
if(name == &&||name==undefined ) {
console.log(data);
var params = data.split(&,&);
var paramName = params[0];
var paramCode = params[1];
var paramValue = params[2];
var row = document.createElement(&tr&);
row.setAttribute(&id&, paramCode);
var cell = document.createElement(&td&);
cell.appendChild(document.createTextNode(paramName));
row.appendChild(cell);
cell = document.createElement(&td&);
cell.appendChild(document.createTextNode(paramCode));
row.appendChild(cell);
cell = document.createElement(&td&);
cell.appendChild(document.createTextNode(paramValue));
row.appendChild(cell);
var deleteButton = document.createElement(&input&);
deleteButton.setAttribute(&type&, &button&);
deleteButton.setAttribute(&value&, &删除&);
deleteButton.onclick = function () { deleteSort(paramCode); };
cell = document.createElement(&td&);
cell.appendChild(deleteButton);
row.appendChild(cell);
document.getElementById(&sortList&).appendChild(row);
// 删除应用参数函数
function deleteSort(id) {
if (id!=null){
var rowToDelete = document.getElementById(id);
var sortList = document.getElementById(&sortList&);
sortList.removeChild(rowToDelete);
附加表格的修改函数
//弹出更新界面相关信息
function updateSort(id) {
if (id!=null){
var row = document.getElementById(id);
//alert(&row is & + row.cells[0].innerHTML);
var id = row.cells[0].innerHTML;
var paramName = row.cells[1].innerHTML;
var paramCode = row.cells[2].innerHTML;
var paramValue = row.cells[3].innerHTML;
var param = new Object();
//这个参数一定要传。
param.win =
param.id = 100;
param.name = &test&;
param.birthday = new Date();
var result = window.showModalDialog(baseUrl + &app/updateParamsItem?id=& + id + &?mName=& + paramName + &?mCode=& + paramCode + &?mValue=& + paramValue,
&dialogWidth:500dialogHeight:600dialogLeft:200dialogTop=200px&);
var arr = result.split(&,&);
row.cells[0].innerHTML = arr[0];
row.cells[1].innerHTML = arr[1];
row.cells[2].innerHTML = arr[2];
row.cells[3].innerHTML = arr[3];
3. &弹出框页面，新增或者修改参数，并回写相关数据。
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&title&新增应用&/title&
&#include &/views/head.html&/&
&div class=&body-box&&
&div class=&clear&&&/div&
&table width=&100%& cellspacing=&1& cellpadding=&2& border=&0& class=&pn-ftable&&
&td&参数名称:&/td&
&td class=&pn-fcontent&&&input type=&text& maxlength=&20& class=&&
required=&true&
id=&paramName& name=&paramName&/&&/td&
&td&参数编码:&/td&
&td class=&pn-fcontent&&&input type=&text& maxlength=&20& class=&&
required=&true&
id=&paramCode& name=&paramCode& required=&true& /&&/td&
&td&参数值:&/td&
&td class=&pn-fcontent&&&input type=&text& maxlength=&20& class=&&
required=&true&
id=&paramValue& name=&paramValue& required=&true& /&&/td&
&td align=&center& colspan=&4&&
&input type=&submit& value=&保存& onclick=&returnResult();&/&
&input type=&button& value=&返回& onclick=&closeWindow();&/&
&script type=&text/javascript&&
//直接关闭窗口
function closeWindow() {
window.close();
//获取值，组装后返回
function returnResult() {
if(!$('form').valid())
var paramName = document.getElementById(&paramName&);
var paramCode = document.getElementById(&paramCode&);
var paramValue = document.getElementById(&paramValue&);
//alert(&value is & + paramName.value + &,& + paramCode.value + &,& + paramValue.value);
var result = paramName.value + &,& + paramCode.value + &,& + paramValue.
window.returnValue =
window.close();
&&相关文章推荐
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：832456次
积分：9079
积分：9079
排名：第1828名
原创：188篇
转载：36篇
评论：88条
(4)(2)(10)(1)(8)(1)(2)(1)(2)(6)(4)(1)(2)(5)(1)(1)(2)(5)(5)(2)(1)(1)(1)(10)(7)(8)(1)(2)(1)(5)(3)(6)(10)(13)(9)(25)(24)(10)(21)如何js里面动态调用层的onclick事件？ - ITeye问答
我想在javascript里面动态调用div的onclick事件，怎么调用啊，
我用document.getElementById(ids).onclick="method()";不行
也用过document.getElementById(ids).setAttribute("onclick","method()");
都不行
采纳的答案
Javascript为元素动态的添加事件包括两种情况：
不带参数的事件和带参数的事件。
一、不带参数的事件：
两种方式：直接给对象添加事件,节点添加事件
例如给一个id为tab1的添加onclick事件
第一种情况：
var t = document.getElementById("NewTitle");
t.onclick = function showmsg(){
&&& alert('Hello!World');
}
第二种情况 这种情况更加动态，更为实用，而且还能添加多个函数(添加的事件的顺序即执行顺序)，呵呵
&& var tb = document.getElementById("NewTitle");
&&& if(window.addEventListener){ // Mozilla, Netscape, Firefox
&&&&&&& td_value.addEventListener('click', alert('cc'), false);
&&&&&&& td_value.addEventListener('click', alert('cc'), false);
&&& } else { // IE
&&&&&&& td_value.attachEvent('onclick',& function(){alert('changchang');});
&&&&&&& td_value.attachEvent('onclick',& function(){alert('changchang');});
&&& }
二、带参数的事件
这里的functionName就是事件处理函数，如果是带参数的那该怎么办，
有人说是这样:
element.onclick=function(sb){
&&&&&&& alert(sb);
&&& }
是不是上面的那种写法呢？答案是不正确的。
解决方法：匿名函数：
&&& element.onclick=function() {
&&&&&&& functionName(param);
&&& };
这样就巧妙的通过匿名方法实现了！
已解决问题
未解决问题}