Question

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

Answer 1

div.onclick = div_onclick; //为事件绑定事件函数function div_onclick(){alert("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); }这样，就能实现我们的初衷了。更复杂的，参数可以是多个，也可以是任意类型的。这里我给出两个例子，以说明这种应用。