5

前言

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

理解1.0

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

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

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

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

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

image.png
这段代码的执行结果是 (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);}


image.png


再看上面的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));} );

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

总结

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


锦城
854 声望21 粉丝

好好生活