将回调函数作为参数传递

时间:2014-02-06 04:59:55

标签: javascript

我正在调用下面的函数。在这里,我也传递回调函数,只有在特定表单提交之后才应该调用它。

<div onClick="myNamespace.openDialog(par1,par2,myNamespace.callback(myNamespace.cb,'p1','p2'))">OPEN DIALOG</div>

var myNamespace = myNamespace || {};
myNamespace={
     return{
        cb:function(p1,p2){alert(p1+"  cb  "+p2);},
        callback:function(f){f(arguments[1],arguments[2]);},
        openDialog:function(p1,p2,f){
          // aboutBizzNs.cb should be called here only after form submit

        }
     }
}();

问题是alert(p1+" cb "+p2);在点击OPEN DIALOG后调用。它应该不是那样的。它应该只在我想要的时候调用。有什么问题

1 个答案:

答案 0 :(得分:0)

问题是aboutBizzNs.callback 会立即调用作为参数提供的函数。


与下面的内容进行比较,创建并返回一个closure (function),它将在调用iself时调用所提供的函数:

callback: function(f){
    // The f variable is bound in a closure below, which is returned immediately.
    // However, the f function is NOT invoked yet.
    // We also copy the arguments of this function invocation and expose
    // them via a variable which is also bound in the following closure.
    var boundArgs = Array.prototype.slice(arguments, 0);
    return function () {
        // Now f is invoked when this inner function is evaluated, which
        // should be in response to the event.
        return f(boundArgs[1], boundArgs[2]);}
    }
}

我也使用apply,如下所示,可以使用任意数量的“绑定”参数。

return function () {
    return f.apply(this, boundArgs.slice(1));
}

.. 但是这是一个相当常见的操作,Function.prototype.bind已经支持(它是ES5的一部分,在其他浏览器中可以填充)。就这样,原来..

myNamespace.callback(myNamespace.cb,'p1','p2')

..可写成..

myNamespace.cb.bind(this,'p1','p2')

..这里效果相同。不同之处在于回调中的thiscb)函数可能会有所不同,因为bind不允许this的“传递”。

或者,忘掉所有这些特殊功能,然后简单地将回调包装起来......

function () { myNamespace.cb('p1','p2') }