JavaScript中回调函数(callback)的简单介绍

JavaScript中回调函数(callback)的简单介绍

什么是回调函数(callback)？

被作为实参传入另一个函数，并在该外部函数内被调用，用来完成某些任务的函数，称为回调函数。也就是说回调函数是一个函数，作为参数传给另一个JavaScript函数，回调函数将会在这个函数执行完成后立即执行。回调函数是在传给的函数内部被调用执行的。

为什么要用到回调函数呢，它的好处在哪里？

正如上面对于回调函数的介绍那样所说的，如果当有很多地方需要调用同一个函数，并且这一函数根据不同的需要，作不同的处理，这个时候用回调函数就再合适不过了。那么回调函数的好处就显而易见了，回调函数运用得当，可以减少代码冗余，使代码的可读性增强，提供很好的可维护性，提供更多的专门函数。

回调函数在js中随处可见，我们使用的js中很多方法，参数中会要求传递一个函数，这个就是回调函数。它可以提高这个方法的可用性，以进行不同的操作。

回调函数大致的三种用法

1. 直接回调

function func1 () {
  console.log('func1');
}
function func2 () {
  console.log('func2');
}
function main (callback){
  callback();
}
main(func1); //func1
main(func2); //func2

2. call回调

call(thisObj,arg1,arg2,...argN) thisObj表示this要指向的那个对象，后边则是参数

回调函数使用call的原因

let clientData = {
    id: 001,
    fullName: "Not Set",
    setUserName: function (firstName, lastName)  {
    this.fullName = firstName + " " + lastName;
    }
}
function getUserInput(firstName,lastName,callback){
    callback(firstName,lastName);
}
getUserInput('Tom','Zhang',clientData.setUserName);
console.log(clientData.fullName);  //Not Set
console.log(fullName);  //Tom Zhang

我们发现这里执行完getUserInput函数后，并没有达到我们想要的目的，给clientData对象中fullName赋正确的值。其实原因是因为我们传递的这个回调函数的this是指向window的，而并不是指向clientData这个对象的，所以我们下面直接打印输出fullName时，发现是我们想要的fullName,但它在window上，所以这里我们就需要利用call或apply函数来指定this指向，来达到我们想到的结果。想要对call,apply,bind三个函数有更好的理解吗，请跳转到JavaScript中call()、apply()、bind()的用法

下面我们使用call函数保护this对象

let clientData = {
    id: 001,
    fullName: "Not Set",
    setUserName: function (firstName, lastName)  {
    this.fullName = firstName + " " + lastName;
    }
}

function getUserInput(firstName,lastName,callback,thisObj){
    callback.call(thisObj,firstName,lastName);
}
getUserInput('Tom','Zhang',clientData.setUserName,clientData);
console.log(clientData.fullName); //Tom Zhang
console.log(fullName); //fullName is not defined

从结果我们可以看到,利用call函数,我们的this指向正确,同时全局作用域对象window中没有了fullName属性

3.apply回调

apply(thisObj,[arg1,arg2,...argN]) thisObj表示this要指向的那个对象，后边则是参数数组

let clientData = {
    id: 001,
    fullName: "Not Set",
    setUserName: function (firstName, lastName)  {
    this.fullName = firstName + " " + lastName;
    }
}

function getUserInput(firstName,lastName,callback,thisObj){
    callback.apply(thisObj,[firstName,lastName]);
}
getUserInput('Tom','Zhang',clientData.setUserName,clientData);
console.log(clientData.fullName); //Tom Zhang
console.log(fullName); //fullName is not defined

乾坤未定，你我皆是黑马！