javascript中如何将带参数函数包装成无参数函数

在编写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 >