更好地理解JavaScript中的callback函数

我明白将函数作为callback函数传递给另一个函数并让它执行,但我不理解最佳实现。 我正在寻找一个非常基本的例子,像这样:

var myCallBackExample = { myFirstFunction : function( param1, param2, callback ) { // Do something with param1 and param2. if ( arguments.length == 3 ) { // Execute callback function. // What is the "best" way to do this? } }, mySecondFunction : function() { myFirstFunction( false, true, function() { // When this anonymous function is called, execute it. }); } }; 

在myFirstFunction中,如果我确实返回了新的callback(),那么它将起作用并执行匿名函数,但是这对于我来说看起来并不正确。

你可以说

 callback(); 

或者,如果要在callback中调整此值,可以使用call方法。

 callback.call( newValueForThis); 

在函数内部, this将是什么newValueForThis

你应该检查callback是否存在,并且是一个可执行的函数:

 if (callback && typeof(callback) === "function") { // execute the callback, passing parameters as necessary callback(); } 

很多库(jQuery,dojo等)为它们的asynchronous函数使用类似的模式,为所有的asynchronous函数使用node.js(nodejs通常将errordata传递给callback函数)。 寻找他们的源代码将有所帮助!

有三个主要的可能性来执行一个function:

 var callback = function(x, y) { // "this" may be different depending how you call the function alert(this); }; 
  1. callback(argument_1,argument_2);
  2. callback.call(some_object,argument_1,argument_2);
  3. callback.apply(some_object,[argument_1,argument_2]);

您select的方法取决于:

  1. 你有参数存储在一个数组或作为不同的variables。
  2. 你想在某个对象的上下文中调用该函数。 在这种情况下,在该callback中使用“this”关键字将引用在call()或apply()中作为parameter passing的对象。 如果您不想传递对象上下文,请使用null或undefined。 在后一种情况下,全局对象将用于“this”。

适用于Function.call , Function.apply的文档

callback是关于信号,“新”是关于创build对象实例。

在这种情况下,执行“callback()”将会更加合适。 比“返回新的callback()”,因为你没有做任何有关返回值的东西。

(并且arguments.length == 3testing真的很笨重,fwiw,更好地检查callback参数是否存在并且是一个函数。)

适当的实施将是:

 if( callback ) callback(); 

这使得callback参数可选

您可以使用:

 if (callback && typeof(callback) === "function") { callback(); } 

下面的例子更全面一些:

 function mySandwich(param1, param2, callback) { alert('Started eating my sandwich.\n\nIt has: ' + param1 + ', ' + param2); var sandwich = {toppings: [param1, param2]}, madeCorrectly = (typeof(param1) === "string" && typeof(param2) === "string") ? true : false; if (callback && typeof(callback) === "function") { callback.apply(sandwich, [madeCorrectly]); } } mySandwich('ham', 'cheese', function(correct) { if(correct) { alert("Finished eating my " + this.toppings[0] + " and " + this.toppings[1] + " sandwich."); } else { alert("Gross! Why would I eat a " + this.toppings[0] + " and " + this.toppings[1] + " sandwich?"); } }); 
 function checkCallback(cb) { if(cb || cb!='') { if(typeof window[cb] === 'undefined') alert('Callback function not found.'); else window[cb].call(this,Arg1, Arg2); } } 

你可以看看这个链接我给你添加一个基本的例子,解释在JavaScript中的callback函数。 的jsfiddle

 var x=0; function testCallBack(param1, param2, callback) { alert('param1= ' + param1 + ', param2= ' + param2+' X='+x); if (callback && typeof(callback) === "function") { x+=1; alert("Calla Back x= "+x); x+=1; callback(); } } testCallBack('ham', 'cheese',function(){ alert("Function X= "+x); });