js回调函数的使用

在第一次学js的时候，估计很多人对回调函数很蒙，今天有空梳理总结下回调函数，算是一次学习，算是一次总结，也算是一次分享。

回调函数执行流程

回调小demo

如果把上面的流程转换成简单的代码它是这样的

function fun(callback){ 
    console.log("fun执行"); callback();// 调用过程可以传递参数 } function sayHello(){ 
    console.log("callback:hello world") } //把sayHello当做但是传递给fun函数 fun(sayHello); //执行结果 fun执行 callback:hello world 

匿名函数简写方式

function fun(callback){ 
    console.log("fun执行"); callback();// 调用过程可以传递参数 } // 调用 fun(function(){ 
    console.log("回调执行了") }); // es6 fun(()=>{ 
    console.log("回调执行了") }); // 输出 fun执行 回调执行了 

我们知道js中的对象有基本数据类型（Number、String…）、函数、数组这几类，是对象就可以当做参数进行传递，当我们把一个函数当做参数传递给函数时，这个函数就称为一个回调函数，根据这个判断，当我们调用js方法时，括号中如果出现function或者箭头函数，则说明咱们传递的就是一个回调函数。

回调算是一种程序的设计模式，在java中也有回调函数，那些类名常常包含Handler的类就是java中传递的匿名对象，JDK8的升级带来了lambda，Java中那些能用lambda代替的匿名对象都是Java的回调方法，例如接口实现线程的run方法就是很经典的回调。

js中回调无处不在

一些常见的回调。

# ajax请求回调 $.post({ 
    url: "https://xxxx.com/api/xxx", dataType:"json", data:{ 
   }, // 回调 es6 success: res=>{ 
    // TODO }, // 回调 error: err =>{ 
    // TODO } }); # 数组方法 let arr = [0,1,2]; arr.forEach(function(item,index){ 
    // TODO }); # jQuery事件回调 $("#btn").click(function(){ 
    // TODO }) # promise中的回调 new Promise( function (resolve, reject) { 
    // 一段耗时的异步操作 resolve('成功') // 数据处理完成 // reject('失败') // 数据处理出错 } ).then( (res) => { 
   console.log(res)}, // 成功 (err) => { 
   console.log(err)} // 失败 ) 

使用回调函数注意事项

当回调是一个使用this对象的方法时，我们要改变下调用回调函数的方式来保持this对象上下文。否则当回调传给一个全局函数的时候，this对象将会指向全局window对象。或者它会指向包含这个方法的对象。

let outerThis = this; $.ajax({ 
    url: this.data.app.BASE_URL + "/calendar/setRemind", method: "POST", dataType: "json", data: { 
    }, success: res => { 
    // 此处的this指向包含success_callback的ajax函数 // 在这里通常用 outerThis 外部的this }, }); 

如果是自己函数中用到了回调。我们可以通过使用Call或者Apply函数执行callback来解决解决之前的问题，这两个方法用于设置函数中的this对象并且传入参数。

Call把第一个参数的值用于函数内的this对象，然后剩下的参数独立地传给函数（通过逗号分隔）。Apply函数也是把第一个参数的值用于函数内的this对象，第二个参数是一个传给对象的数组（或者arguments对象）。

// 这里我们为回调对象加了个参数this_obj function fun(callback, this_obj) { 
    // 其他操作 // 用apply函数把this指向callbackObj callback.apply (this_obj, [data1, data2]); } // 使用 let outerThis = this; fun((data1,data2)=>{ 
    // 此时 this等于outerThis },this); 

参考
https://www.zcfy.cc/article/understand-javascript-callback-functions-and-use-them-javascript-is-sexy
https://juejin.im/post/
https://www.cnblogs.com/moltboy/archive/2013/04/24/3040213.html

想了解作者更多，请移步我的个人网站，欢迎交流、留言~
极客技术空间：https://elltor.com/