1. 什么叫做回调函数？
详情请查看 阮一峰 之ES6 解析 链接：https://pan.baidu.com/s/1deSccY 密码：fohv
答 ：直白的说：就是 函数 中嵌套另一个 函数 形成复杂的语法结构。在javascript 中，
函数也是一种变量可以成为其他函数的参数。这里要注意 this 的指向。
官方定义：回调函数是一段可执行的代码段，它作为一个参数传递给其他的代码，其作用是在需要的时候方便调用这段（回调函数）代码。
2. 回调函数特点
2.1 不会立刻执行, 正如定义中给出的一样回调函数作为代码片段可以根据需要在其特定条件下执行, 回调函数作为参数传递给一个函数的时候，传递的只是函数的定义并不会立即执行。
2.2 this，ES6推出了箭头函数, 箭头函数的推出需要在写回调函数的时候格外注意, this 是指向所在函数的上下文对象, 如果在在ES6采用箭头函数则需要注意 this使用, 箭头函数中this并没有上下文关系直说, 有兴趣的可以查看ES6 阮一峰。
3. 回调函数的好处
3.1 DRY，避免重复代码。
3.2 可以将通用的逻辑抽象。
3.3 业务逻辑分离 (it's so beautiful ^-^ ^-^)
3.4 提高代码可维护性和可读性。
3.5 分离专职的函数。
js回调函数的伟大之处是其他传统语言所没有的, 它可以实现业务逻辑分离, 相当于暴露给外界一个接口, 这一点像极了前后端分离架构中的 API 接口设计理念
4. 回调函数的缺点
4.1 回调函数层级太多，使用困难。
4.2 大量的回调函数运行， 消耗内存，影响性能。
4.3 直白的来说，就是中看，不实用，能不用，就不用。
5. 实例解析
1.0 //定义主函数，回调函数作为参数function A(callback) {
callback();
console.log('我是主函数');
}//定义回调函数function B(){
setTimeout("console.log('我是回调函数')", 3000);//模仿耗时操作 }//调用主函数，将函数B传进去A(B);//输出结果我是主函数
我是回调函数
2.0 //函数嵌套
functionaddSqua(num1, num2, callback){
varsum = num1 + num2;
returncallback(sum);
}
functionsqua(num){
returnnum*num;
}
let num = addSqua(1, 2, squa);
console.log(num);
//=>9
6.箭头函数
箭头函数ES6最常用的一个新特性了，用它来写function比原来的写法要简洁清晰很多，下面的来源与 阮一峰讲解的 es6。 链接 ：百度云盘ES6资料 密码：nd2h 第70页。
1.0
function (i) { return i +1; }
//ES5的写法
(i) => i +1
//ES6的写法
2.0
const pipeline = (...funcs) =>
val => funcs.reduce((a, b) => b(a), val);
const plus1 = a => a + 1;
const mult2 = a => a * 2;
const addThenMult = pipeline(plus1, mult2);
addThenMult(5)
// 12
3.0
// ES6
function foo() {
setTimeout(() => {
console.log('id:', this.id);
}, 100);
}
// ES5
function foo() {
var _this = this;
setTimeout(function () {
console.log('id:', _this.id);
}, 100);
}
4.0能力提升
请问下面的代码之中有几个this？
function foo() {
return () => {
return () => {
return () => {
console.log('id:', this.id);
};
};
};
}
var f = foo.call({id: 1});
var t1 = f.call({id: 2})()(); // id: 1
var t2 = f().call({id: 3})(); // id: 1
var t3 = f()().call({id: 4}); // id: 1
上面代码之中，只有一个this，就是函数foo的this，所以t1、t2、t3都输出同样的结果。因为所有的内层函数都是箭头函数，都没有自己的this，
它们的this其实都是最外层foo函数的this。
注意： 由于箭头函数没有自己的this，所以当然也就不能用call()、apply()、bind()这些方法去改变this的指向。
详情请查看 阮一峰 之ES6 解析 链接：https://pan.baidu.com/s/1deSccY 密码：fohv
网友评论