javascript中如何将带参数函数包装成无参数函数
2007-09-09 12:19
357 查看
在编写javascript脚本时,可能需要将一个原本具有输入参数的函数包装成一个无输入参数的函数,这通常是为了将其绑定到某个事件函数上,事件函数是要求无输入参数的,例如下面的代码,就是为一个div绑定了onclick事件:
var div = document.createElement("div");
div.onclick = div_onclick; //为事件绑定事件函数
function div_onclick()
...{
alert("div onclick event");
}
可以注意到,这里的div_onclick()函数是没有输入参数的,因此,可以使用div.onclick=div_onclick来为div绑定点击时触发的事件函数,但是,如果div_onclick是个带有输入参数的函数,那么,该如何绑定事件函数呢?
function div_onclick(str)
...{
alert(str);
}
如上面所示的函数,div_onclick已经带有了一个str参数,如何来为上面的那个div的点击事件绑定这个带输入参数的函数呢,大多数刚刚接触javascript的人容易犯的错误就是写出下面的代码,这样的代码是不会得到想要的效果的:
var str = "div onclick event";
var div = document.createElement("div");
div.onclick = div_onclick(str); //<----------------错误的代码
function div_onclick(str)
...{
alert(str);
}
其中错误的那行代码的真实运行情况应该是:先以str作为参数调用div_onclick函数,显然,调用的结果就是弹出了alert窗口,点击确定后,div_onclick函数将返回,返回值再给div.onclick赋值,这和我们打算将函数div_onclick绑定到div.onclick上的初衷是不符合的。
这就存在了一个问题,我们既要为div.onclick绑定一个函数,又要能够为绑定的函数传递一些参数,显然,我们需要能够将带参数的函数以及我们想要传递给它的参数一起包装成一个无参数的新函数,再将这个无参数的新函数绑定到相应的事件上面去,实现的方法有好多种,这里介绍一种比较简单通用的方法,这种方法可以将任意一个带参数的函数包装为一个不带参数的函数,该方法要求添加如下函数定义:
Function.prototype.bind = function()
...{
var __method = this;
var arg = arguments;
return function() ...{
__method.apply(window, arg);
}
}
关于这个函数的实现就不再多解释了,这里只说明一点,这个代码段是为所有的函数定义了一个函数名为bind的公共静态函数,由于javascript的面向对象的特性,使得任何一个以function来定义的函数本身都是一个Function类,关于上面的函数定义方式,请参阅《Javascript——Prototype Based Language》。
将上面的函数加入到你的文件中,就可以使用它来将带参数的函数包装成一个无参数函数了。在div的例子中,我们将得到如下的代码:
Function.prototype.bind = function()
...{
var __method = this;
var arg = arguments;
return function() ...{
__method.apply(window, arg);
}
}
var str = "div onclick event";
var div = document.createElement("div");
div.onclick = div_onclick.bind(str); //将带参数的函数包装成无参数的函数
function div_onclick(str)
...{
alert(str);
}
这样,就能实现我们的初衷了。更复杂的,参数可以是多个,也可以是任意类型的。这里我给出两个例子,以说明这种应用。
示例一:动态为表格增加行,并为行绑定带参数的事件函数,代码如下:
<html>
<script language=javascript>...
function test()
...{
for(var i=0;i<10;i++)
...{
var tr = document.all.tb.insertRow();
var td = tr.insertCell();
td.innerHTML = "这是第"+i+"行";
tr.onclick = myfunc.bind(i,td);
}
}
function myfunc(str,td)
...{
alert(str+":"+td.innerHTML);
}
Function.prototype.bind = function()
...{
var __method = this;
var arg = arguments;
return function() ...{
__method.apply(window, arg);
}
}
</script>
<body>
<input type=button value=test onclick=test()><br>
<table id=tb width=200 border=1>
<tr><td bgcolor=yellow>这里是表头部分</td></tr>
</table>
</body>
</html>
示例二:为定时器绑定带参数的函数,代码如下:
<html>
<script language=javascript>...
function init()
...{
var param = "hello world";
timername = setInterval(sayHello.bind(param),1000);
}
function sayHello(str)
...{
document.body.innerHTML += str + "<br>";
}
Function.prototype.bind = function()
...{
var __method = this;
var arg = arguments;
return function() ...{
__method.apply(window, arg);
}
}
</script>
<body onload=init()>
</body>
</html>
var div = document.createElement("div");
div.onclick = div_onclick; //为事件绑定事件函数
function div_onclick()
...{
alert("div onclick event");
}
可以注意到,这里的div_onclick()函数是没有输入参数的,因此,可以使用div.onclick=div_onclick来为div绑定点击时触发的事件函数,但是,如果div_onclick是个带有输入参数的函数,那么,该如何绑定事件函数呢?
function div_onclick(str)
...{
alert(str);
}
如上面所示的函数,div_onclick已经带有了一个str参数,如何来为上面的那个div的点击事件绑定这个带输入参数的函数呢,大多数刚刚接触javascript的人容易犯的错误就是写出下面的代码,这样的代码是不会得到想要的效果的:
var str = "div onclick event";
var div = document.createElement("div");
div.onclick = div_onclick(str); //<----------------错误的代码
function div_onclick(str)
...{
alert(str);
}
其中错误的那行代码的真实运行情况应该是:先以str作为参数调用div_onclick函数,显然,调用的结果就是弹出了alert窗口,点击确定后,div_onclick函数将返回,返回值再给div.onclick赋值,这和我们打算将函数div_onclick绑定到div.onclick上的初衷是不符合的。
这就存在了一个问题,我们既要为div.onclick绑定一个函数,又要能够为绑定的函数传递一些参数,显然,我们需要能够将带参数的函数以及我们想要传递给它的参数一起包装成一个无参数的新函数,再将这个无参数的新函数绑定到相应的事件上面去,实现的方法有好多种,这里介绍一种比较简单通用的方法,这种方法可以将任意一个带参数的函数包装为一个不带参数的函数,该方法要求添加如下函数定义:
Function.prototype.bind = function()
...{
var __method = this;
var arg = arguments;
return function() ...{
__method.apply(window, arg);
}
}
关于这个函数的实现就不再多解释了,这里只说明一点,这个代码段是为所有的函数定义了一个函数名为bind的公共静态函数,由于javascript的面向对象的特性,使得任何一个以function来定义的函数本身都是一个Function类,关于上面的函数定义方式,请参阅《Javascript——Prototype Based Language》。
将上面的函数加入到你的文件中,就可以使用它来将带参数的函数包装成一个无参数函数了。在div的例子中,我们将得到如下的代码:
Function.prototype.bind = function()
...{
var __method = this;
var arg = arguments;
return function() ...{
__method.apply(window, arg);
}
}
var str = "div onclick event";
var div = document.createElement("div");
div.onclick = div_onclick.bind(str); //将带参数的函数包装成无参数的函数
function div_onclick(str)
...{
alert(str);
}
这样,就能实现我们的初衷了。更复杂的,参数可以是多个,也可以是任意类型的。这里我给出两个例子,以说明这种应用。
示例一:动态为表格增加行,并为行绑定带参数的事件函数,代码如下:
<html>
<script language=javascript>...
function test()
...{
for(var i=0;i<10;i++)
...{
var tr = document.all.tb.insertRow();
var td = tr.insertCell();
td.innerHTML = "这是第"+i+"行";
tr.onclick = myfunc.bind(i,td);
}
}
function myfunc(str,td)
...{
alert(str+":"+td.innerHTML);
}
Function.prototype.bind = function()
...{
var __method = this;
var arg = arguments;
return function() ...{
__method.apply(window, arg);
}
}
</script>
<body>
<input type=button value=test onclick=test()><br>
<table id=tb width=200 border=1>
<tr><td bgcolor=yellow>这里是表头部分</td></tr>
</table>
</body>
</html>
示例二:为定时器绑定带参数的函数,代码如下:
<html>
<script language=javascript>...
function init()
...{
var param = "hello world";
timername = setInterval(sayHello.bind(param),1000);
}
function sayHello(str)
...{
document.body.innerHTML += str + "<br>";
}
Function.prototype.bind = function()
...{
var __method = this;
var arg = arguments;
return function() ...{
__method.apply(window, arg);
}
}
</script>
<body onload=init()>
</body>
</html>
相关文章推荐
- 如何用javascript 的eval动态执行一个需要传对象参数的函数
- javascript关于setTimeout如何调用带参数的函数
- Javascript 对象方式实现命名参数调用(下):自动包装偏函数
- JavaScript中如何实现函数参数可变
- javascript中如何让一个参数的函数接受两个参数
- javascript的回调函数里如何传递参数
- javascript的回调函数里如何传递参数
- [Javascript] Javascript如何定义函数参数的默认值
- jsp中怎么将jsp定义的参数传给javascript定义的函数?急
- 如何使用定时器settimeout、setInterval执行能传递参数的函数
- 如何使用定时器settimeout、setInterval执行能传递参数的函数
- 如何将一个函数作为另一个函数的输入参数
- javascript自定义函数参数传递为字符串格式
- eclipse 中执行 main 函数如何添加参数
- 如何将二位数组作为参数传入函数。
- JavaScript中函数当作参数传递或当作返回值
- 轻松学习 JavaScript——第 3 部分:函数中的默认参数
- javascript动态绑定带参数的函数
- VB编写各类COM对象(特别是ASP)时,如何让外部对象使用含有可选参数的函数
- javascript字符串替换函数如何一次性全部替换掉