JS学习笔记 - 回调函数

1,603 阅读3分钟
原文链接: segmentfault.com

本文章记录本人在学习 JavaScript 中看书理解到的一些东西,加深记忆和并且整理记录下来,方便之后的复习。

什么是回调函数

js里函数都是对象,这表示它们可以作为参数传递给其他的函数。举例:当函数b()作为参数传递给函数a(),那么在某一时刻函数a()可能会执行或者调用函数b()。这种情况下,函数b()就被称为回调函数,也可以简称叫做回调(下面是栗子)。

'use strict';

function a(callback) {
    callback();
}

function b() {
    console.log('hello callback');
}

a(b); // 注意 b() 作为参数传递给 a() 的时候是不需要带括号的

回调函数示例

假设有一个通用的函数执行一些复杂的处理工作,并且返回结果为一个大块数据(下面是栗子)。

var findeNodes = function () {
    var i = 10000,
        node = [],
        found;

    while (i) {
        i -= 1;
        node.push(found);
    }

    return nodes;
}

上面代码定义函数findNodes(),它的任务是抓取页面的dom tree,并返回一个你要的页面元素数组。

在定义一个函数hide(),顾名思义它的作用是隐藏页面中的节点(下面是栗子)。

var hide = function (nodes) {
    for (var i = 0; i < nodes.length; i += 1) {
        nodes[i].style.display = 'block';
    }
}

// 执行函数
hide(findeNodes());

好了,要的效果都实现了,但是实现却是低效的。因为hide()必须再次循环由findNodes()返回的数组节点。如果能避免这种循环,只需要在findNodes()中选择便可隐藏节点,那么这将是更高效的方式。但是如果在findNodes()中实现隐藏逻辑的话,由于检索和修改逻辑耦合,那么他不再是通用的函数。面对这种问题的解决方法是采用回调模式,可以将因此节点逻辑以回调函数方式传递给findNodes()并委托执行(下面是栗子)。

// 重构 findeNodes() 函数,并接受一个回调函数

var findeNodes = function (callback) {
    var i = 10000,
        nodes = [],
        found;

    while (i) {
        i -= 1;

        // 现在运行回调函数
        if (typof callback === 'function') {
            callback();
        }

        nodes.push(found);
    }
    return found;
}

上面的代码只是做了对callback是否存在进行了判断,如果存在的话吗,那么就执行该函数。其中,回调函数是可选的,因此后续的findeNodes()仍然可以想以前一样使用,而不会破坏以来旧API的原始代码。

现在hide的实现就简单多了,因为它不需要再去循环遍历所有的节点了(下面是栗子)。

// 回调函数
var hide = function (nodes) {
    nodes.style.display = 'none';
}

// 找到指定的节点,并在后续执行中隐藏
findeNodes(hide);

回调函数与作用域

在上一个栗子中,回调函数执行的语句是这样的:callback(parameters)

虽然上面那句在大多数的场景上都是有效的,但是总会有一些场景,其回调函数并不是一次性的匿名函数或者全局函数,而是对象的方法。如果该函数使用this来引用它所的属性,这可能有是一个坑了(下面是栗子)。

// 假设回调函数是 paint(),它是一个名为 myapp 的对象的方法
var myapp = {};
myapp.color = 'green';
myapp.paint = function (nodes) {
    nodes.style.color = this.color;
}

// 然后用到上一个栗子的 findeNodes() 
findeNodes(myapp.paint); // 

坑:this.color没有被定义,因为findeNods()是一个全局函数,因此,对象的this是指向window的。

解决的方法有:

  • 另外传递该回调函数的所属对象。这样就需要修改一下findNodes()函数(下面是栗子)。
var findNodes = function (callback, callback_obj) {
    // ...
    if (typof callback === 'function') {
            callback.call(callback_obj, found);
    }
    // ...
}

// 执行函数
findNodes(myapp.paint, myapp);

主要是通过call、apply来修改函数运行时的this指向。

  • 然后接着修改上面的方法,将方法作为字符串传递,因此就不用两次输入该对象的名称(下面是栗子)。
var findNodes = function (callback, callback_obj) {
    // ...
    if (typof callback === 'string') {
        callback = callback_obj[callback];
    }
    // ...
    if (typof callback === 'function') {
            callback.call(callback_obj, found);
    }
    // ...
}

// 执行函数
findNodes('paint', myapp);

最后,如果文章有什么错误和疑问的地方,请指出。与sf各位共勉!