JavaScript基础CallBack函数(015)

前面提到，函数对象是可以作为参数传递给另一函数的，这时，作为参数的函数如果在内部被执行，那么它就是个回调函数（Callback）：

function writeCode(callback) {

    // do something...

    callback();

    // ...

}

function introduceBugs() {

    // ... make bugs

}

writeCode(introduceBugs);

在上面的代码里，introduceBugs就作为writeCode的参数，在writeCode函数的执行过程中被调用。因此introduceBugs就是一个回调（CallBack）函数。
下面给出一个更有实际意义的回调函数。假设我们有一个findNodes函数，它可以通过一个复杂的逻辑，在一个很大的数组中找到满足某个条件的所有结点，并返回这些结点：

var findNodes = function () {

    var i = 100000, // big, heavy loop

        nodes = [], // stores the result

        found; // the next node found

    while (i) {

        i -= 1;

        // complex logic here...

        nodes.push(found);

    }

    return nodes;

};

一般来说我们都希望函数的功能单一化，所以这个函数只负责把满足某件的结点找到，并返回。然后我们写另外一个函数hide，可以把给定的一堆结点隐藏，这个函数接受一个结点的数组作为参数，并把数组中的结点一个一个地隐藏。结合这两个函数，我们就可以完成一个组合功能，即找到一些结点，并把它们隐藏：

var hide = function (nodes) {

    var i = 0, max = nodes.length;

    for (; i < max; i += 1) {

        nodes[i].style.display = "none";

    }

};

// executing the functions

hide(findNodes());

看起来挺好。不过这种实现方法的执行效率并不高。这两个函数都需要进行一个很长的循环，则实际上，如果每找到一个满足就条件的结点，就立即把它隐藏，这样效率更高：因为只需要循环1次。为了实践这个想法，但依然把两个任务用不同的函数来实现，我们用回调的方式来做：

// refactored findNodes() to accept a callback

var findNodes = function (callback) {

    var i = 100000,

        nodes = [],

        found;

    // check if callback is callable

    if (typeof callback !== "function") {

        callback = false;

    }

    while (i) {

        i -= 1;

        // complex logic here...

        // now callback:

        if (callback) {

            callback(found);

        }

        nodes.push(found);

    }

    return nodes;

};

findNodes这时还是返回满足条件的所有结点，但它也接受一个回调函数，用于给每个满足条件的结点执行一些任务。这个任务就交给回调函数来声明。下面是具体的回调函数hide：

// a callback function

var hide = function (node) {

    node.style.display = "none";

};

// find the nodes and hide them as you go

findNodes(hide);

当然，如果hide只服务于findNodes，有时我们不需要给它一个名字，从而把它声明为一个匿名的回调函数：

// passing an anonymous callback

findNodes(function (node) {

    node.style.display = "block";

});

回调函数中的this
当回调函数中使用了this，比如，这个回调函数其实是对象myapp中的一个方法paint：

var myapp = {};

myapp.color = "green";

myapp.paint = function (node) {

    node.style.color = this.color;

};

这时我们有一个全局的函数findeNodes()接受一个回调函数：

var findNodes = function (callback) {

    // ...

    if (typeof callback === "function") {

        callback(found);

    }

    // ...

};

这时如果执行 findNodes(myapp.paint)，并不能达到预期的结果。因为myapp.paint中的this指针在声明的时候指向的是对象中的属性，也就是那个对象本身，但当myapp.paint作为回调函数在全局的函数findNodes时执行是，this指针在执行期间指向的就变成了全局的 this了（如果在浏览器中，就是dom对象）。
解决方法是把回调函数所属的对象也一并传递给findNodes，然后在执行回调函数时指定它所属的对象：

findNodes(myapp.paint, myapp);

所以findNodes修改为这样：

var findNodes = function (callback, callback_obj) {

    //...

    if (typeof callback === "function") {

        callback.call(callback_obj, found);

    }

   // ...

};

这样看起来有点啰嗦，因为对象的名字在参数列表里出现了两次。我们也可以把这个回调函数的名字用字符串的方式传递：

findNodes("paint", myapp);

这里findNodes就相应的修改为：

var findNodes = function (callback, callback_obj) {

    if (typeof callback === "string") {

        callback = callback_obj[callback];

    }

    //...

    if (typeof callback === "function") {

        callback.call(callback_obj, found);

    }

   // ...

};

巴特西

JavaScript基础CallBack函数(015)

最新文章

热门文章