回调函数

前言

昨天看到了有关回调函数的问题，由于之前没学明白，导致遇到这个函数直接就懵了，昨晚潘老师讲了很久，当时也是没理解太多，后来自己细细理解了一下，在此做一个总结吧。

理解1.0

var map = function(callBack){
    callBack(6)
};

map((a) => {console.log(a)});

上述代码的执行结果是6，其实回调函数的执行顺序是这样的，先来看一下下面这段代码：

var map = function(callBack){
    console.log(callBack);
};

map((a) => {console.log(a)});

这段代码的执行结果是 (a) => {console.log(a)}，因为map方法接收的第一个参数为一个函数，对于最下面这行代码来说，它的参数只有一个，并且是一个函数，对应上面对它的定义，callBack是map方法要接收的第一个参数，那么 callBack 就等于 (a) => {console.log(a)} ，callBack现在就是一个函数，他可以接收一个参数，然后把这个参数打印出来，callBack(6)，callBack方法此时接收的函数是6，那么输出结果自然就是6.

理解2.0

假如map接收多个参数，想要输出，那要怎样实现呢，来看下面一段代码：

var map = function(first,second){
    first('hello');
    second('world');
};

map((a) => {console.log(a);}, (b) => {console.log(b);});

输出结果自然是
hello
world
对于多个参数来说，函数与函数之间要用 “ , ” 间隔，用以表示不同参数，调用原理同上。

理解3.0

对于下面这种参数里面还有函数的又怎么理解呢:

var map = function (callBack){
    callBack((message)=>{
        console.log(message);
    });
};

map((b) => {b(6)});

上面的代码执行后打印的值是6，来看一下为啥吧：

var map = function (callBack){
    callBack((message)=>{
        console.log(message);
    });
};

map((b) => {console.log(b)});

map在定义时接收到的第一个参数是一个函数表达式，下面接收到的第一个参数是b，那么毋庸置疑，b就等于
(message)=>{console.log(message);}

再看上面的b(6)，b就是一段函数，它接收一个参数，并把它打印出来，那么这个参数就是6，执行结果也就是6.

理解4.0

对于更复杂的怎么理解呢：

var map = function(callback) {
    callback( function(messageSecond) {messageSecond('hello')} );
}
map( function callback(messageFirst) { messageFirst((abc) => console.log(abc));} );

我们先来打印一下各自的值：

var map = function(callback) {
    callback( function(messageSecond) {
    console.log(2);
    console.log(messageSecond);
    messageSecond('hello')} );
}
map( function callback(messageFirst) {
     console.log(1);
     console.log(messageFirst);
 messageFirst((abc) => console.log(abc));} );

对于messageFirst来说，它是callBack里面的内容，对于map的定义来说，里面的内容是一个方法，那么messageFirst就是里面的方法，这个方法需要一个参数，这个参数也是一个方法，此时messageSecond是messageFirst的参数，也是一个方法，即(abc) => console.log(abc));
messageSecond(‘hello’)就相当于给方法(abc) => console.log(abc));传参为’hello’，然后打印出来。

总结

当时没理解太清楚，就感觉比较懵，当自己亲自进行实践，发现其实也还算好理解，好在终于搞明白回调函数啥意思了。

作者：锦城

原文地址：https://segmentfault.com/a/1190000021939994

喜欢 0