函数就是对象,所以他们可以作为一个参数传递给其它函数;

当你将introduceBugs()作为一个参数传递给writeCode(),然后在某个时间点,writeCode()有可能执行(调用)introduceBugs();

这种情况下,introduceBugs()被称为回调函数(callback function)或简称为回调(callback:):

  1. function writeCode(callback) {
  2. // do something...
  3. callback();
  4. // ...
  5. }
  6. function introduceBugs() {
  7. // ... make bugs
  8. }
  9. writeCode(introduceBugs);
function writeCode(callback) {
    // do something...
    callback();
    // ...
}
function introduceBugs() {
    // ... make bugs
}
writeCode(introduceBugs);

注意introduceBugs()作为一参数传递给writeCode()是没有使用括号的;

使用括号会立即执行函数,然而在这种情况下,我们希望的是只传递一个指向函数的引用,让writeCode()在适当的时候去执行;

一个回调的例子(A Callback Example)

我们先从一个不使用回调的例子开始,然后在后面重构它;
假如,你有一个通用的函数,它会做一些复杂的工作并且返回一个包含很多数据的集合;
这个通用的函数可能被调用,并且它的工作就是去抓取一个页面的DOM树,返回一个数组里面包含着你感兴趣的页面元素的数组,比如findNodes();
  1. var findNodes = function() {
  2. var i = 100000,
  3. // big, heavy loop
  4. nodes = [],
  5. // stores the result
  6. found; // the next node found
  7. while (i) {
  8. i -= 1;
  9. // complex logic here...
  10. nodes.push(found);
  11. }
  12. return nodes;
  13. };
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;
};

将这个函数保持通用性并让它返回一个DOM节点(node)的数组是个好主意,但没有对实际的元素做任何事情;

修改节点的逻辑可能在不同的函数中,比如一个叫hide()的函数,见名知意,它的作用是从页面中隐藏节点:
  1. var hide = function(nodes) {
  2. var i = 0,
  3. max = nodes.length;
  4. for (; i < max; i += 1) {
  5. nodes[i].style.display = "none";
  6. }
  7. };
  8. // executing the functions
  9. hide(findNodes());
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());

这种实现是没有效率的,因为hide()不得不再遍历一次findNodes()返回的的数组;

如果你能避免这个遍历并且让节点在findNodes()中一被选中就隐藏起来会更有效率;
但是如何你在findNodes()实现了隐藏的逻辑,那么它将不再是一个通用的函数,因为查询和修改的逻辑产生了耦合;
加入回调模式——传递你隐藏节点的逻辑作为一个回调函数并且代理它的执行:

  1. // refactored findNodes() to accept a callback
  2. var findNodes = function(callback) {
  3. var i = 100000,
  4. nodes = [],
  5. found;
  6. // check if callback is callable
  7. if (typeof callback !== "function") {
  8. callback = false;
  9. }
  10. while (i) {
  11. i -= 1;
  12. // complex logic here...
  13. // now callback:
  14. if (callback) {
  15. callback(found);
  16. }
  17. nodes.push(found);
  18. }
  19. return nodes;
  20. };
// 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()检查了可选的回调函数是否有被提供,如果有,就执行它;

回调函数是可选的,所以重构后的findNodes()仍然能像以前一样被使用,并且不会破坏依赖于旧的API的遗留代码。
 
hide()函数的实现也可以更加简单,因为它不需要去遍历节点数组:

  1. // a callback function
  2. var hide = function(node) {
  3. node.style.display = "none";
  4. };
  5. // find the nodes and hide them as you go
  6. findNodes(hide);
// a callback function
var hide = function(node) {
    node.style.display = "none";
};
// find the nodes and hide them as you go
findNodes(hide);
 

回调函数可以是一个在代码中已经存在的函数,也可以是一个匿名函数(当你调用主函数的时候才会创建);

比如,怎样使用相同的通用函数findNodes()去显示节点:
  1. // passing an anonymous callback
  2. findNodes(function (node) {
  3. node.style.display = "block";
  4. });
// passing an anonymous callback
findNodes(function (node) {
node.style.display = "block";
});
 

回调和作用域(Callbacks and Scope)

在前面这个例子中,回调函数执行的部分可能像:

  1. callback(parameters);
callback(parameters);

虽然这样很简单并且在很多情况下都已经足够了;

但经常有一些场景,回调函数不是匿名函数或者全局函数,而是一个对象的一个方法;
如果回调函数使用this去访问函数属于的对象,这就会产生意想不到的错误。
 
假如有一个parint()的回调函数,它是myapp对象的一个方法:

  1. var myapp = {};
  2. myapp.color = "green";
  3. myapp.paint = function(node) {
  4. node.style.color = this.color;
  5. };
var myapp = {};
myapp.color = "green";
myapp.paint = function(node) {
    node.style.color = this.color;
};

findNodes()函数做了类似下面的事:

  1. var findNodes = function(callback) {
  2. // ...
  3. if (typeof callback === "function") {
  4. callback(found);
  5. }
  6. // ...
  7. };
var findNodes = function(callback) {
    // ...
    if (typeof callback === "function") {
        callback(found);
    }
    // ...
};

如果你调用了findNodes(myapp.paint),它并不能按照预期的那样工作,因为this.color将会是undefined;

这里this将会指向全局对象,因为findNodes()是一个全局函数;
如果findNodes()是一个叫做dom对象的方法,那么在回调函数中的this将会指向dom而不是期望的myapp;
 
解决这个问题的方法就是传递一个回调函数,此外再传递这个回调函数属于的对象作为一个参数:
  1. findNodes(myapp.paint, myapp);
findNodes(myapp.paint, myapp);

紧跟着,我们需要去修改findNodes()去绑定(bind)传递进来的对象:

  1. var findNodes = function(callback, callback_obj) {
  2. //...
  3. if (typeof callback === "function") {
  4. callback.call(callback_obj, found);
  5. }
  6. // ...
  7. };
var findNodes = function(callback, callback_obj) {
    //...
    if (typeof callback === "function") {
        callback.call(callback_obj, found);
    }
    // ...
};
 
对于传递一个对象和一个被用来回调的方法,另一个可选的方法就是将方法作为字符串传递,那么你就不会重复对象两次;
换言之:
  1. findNodes(myapp.paint, myapp);
findNodes(myapp.paint, myapp);

会变成:

  1. findNodes("paint", myapp);
findNodes("paint", myapp);

那么findNodes()可能会做一些事,就像下面几行:

  1. var findNodes = function(callback, callback_obj) {
  2. if (typeof callback === "string") {
  3. callback = callback_obj[callback];
  4. }
  5. //...
  6. if (typeof callback === "function") {
  7. callback.call(callback_obj, found);
  8. }
  9. // ...
  10. };
var findNodes = function(callback, callback_obj) {
    if (typeof callback === "string") {
        callback = callback_obj[callback];
    }
    //...
    if (typeof callback === "function") {
        callback.call(callback_obj, found);
    }
    // ...
};
 

匿名的事件监听器(Asynchronous Event Listeners)

回调模式在日常中被经常使用,比如,当你附加一个事件监听器给页面上的某个元素时,你实际上提供了一个指向了回调函数的引用,并且在事件发生时被调用;

这里有个例子,怎么将console.log()作为一个回调函数监听文档的click事件:
  1. document.addEventListener("click", console.log, false);
document.addEventListener("click", console.log, false);

绝大部分客户端浏览器都是事件驱动的(event-driven);

当一个页面加载完成,会触发load事件,然后用户可以通过和页面交互触发各种各样的事件,比如:click, keypress, mouseover, mousemove等等; 因为回调模式,JavaScript特别适合事件驱动编程,能让你的程序异步的工作,换言之,就是不受顺序限制。
 
“Don’t call us, we’ll call you” 在好莱坞中是句名言,在好莱坞对于一部电影中的一个角色往往有很候选人,剧组人员不可能一直答复所有候选人打来的电话;
在异步的事件驱动的JavaScript,有个相似的情景,你提供一个回调函数用于在正确的时候被调用(to be called),而不是电话号码;
你甚至可能提供比实际请求还要多的回调函数,因为某些事件可能不会发生;
比如:如果用户不点击“购买”按钮,那么你用于验证表单格式的函数永远不会被调用。
 

Timeouts

 
另一个使用回调模式的例子就是使用浏览器的window对象的setTimeout()和setInterval()方法,这些方法也可以接受和执行回调函数:
  1. var thePlotThickens = function () {
  2. console.log('500ms later...');
  3. };
  4. setTimeout(thePlotThickens, 500);
var thePlotThickens = function () {
console.log('500ms later...');
};
setTimeout(thePlotThickens, 500);

再次注意一下,thePlotThickens是如何被作为一个参数传递的,没有使用括号;

因为你不想它立即执行;传递字符串"thePlotThickens()"取代函数的引用和eval()类似,是不好的模式。

类库中的回调(Callbacks in Libraries)

回调是一种简单而强大的模式,当你在设计类库的时候会派的上用场;
在软件类库中的代码应该尽可能的通用和复用,回调可以帮助我们解决这种泛化;
你不需要预测和实现你可以想到的所有功能,因为它们会使类库膨胀,并且大部分用户都不会需要这么多功能;
取而代之的是,集中精力在核心的功能并提供以回调函数形式的“钩子”(hook),这会让类库的方法更加简单的去构建,扩展和定制。

JavaScript:回调模式(Callback Pattern)的更多相关文章

  1. JavaScript:回调模式(Callback Pattern) (转载)

    JavaScript:回调模式(Callback Pattern) 函数就是对象,所以他们可以作为一个参数传递给其它函数: 当你将introduceBugs()作为一个参数传递给writeCode() ...

  2. JavaScript学习笔记(十二) 回调模式(Callback Pattern)

    函数就是对象,所以他们可以作为一个参数传递给其它函数: 当你将introduceBugs()作为一个参数传递给writeCode(),然后在某个时间点,writeCode()有可能执行(调用)intr ...

  3. js作为参数,并且返回值;js的回调模式 callback

    有这样一个情景,当我们弹出一个 prompt的时候,要求用户在文本框输入一个文字,然后点击确认,就可以拿到返回值 var temp=prompt("请输入您的名字");     a ...

  4. React Render Callback Pattern(渲染回调模式)

    React Render Callback Pattern,渲染回调模式,其实是将this.props.children当做函数来调用. 例如: 要根据user参数确定渲染Loading还是Profi ...

  5. 理解javascript中的回调函数(callback)【转】

    在JavaScrip中,function是内置的类对象,也就是说它是一种类型的对象,可以和其它String.Array.Number.Object类的对象一样用于内置对象的管理.因为function实 ...

  6. 理解javascript中的回调函数(callback)

    以下内容来源于:http://www.jb51.net/article/54641.htm 最近在看 express,满眼看去,到处是以函数作为参数的回调函数的使用.如果这个概念理解不了,nodejs ...

  7. JavaScript系列之回调函数callback

    JavaScript系列之回调函数callback JavaScript回调函数的使用是很常见的,引用官方回调函数的定义: A callback is a function that is passe ...

  8. 理解 JavaScript 回调函数并使用

    JavaScript中,函数是一等(first-class)对象:也就是说,函数是 Object 类型并且可以像其他一等对象(String,Array,Number等)一样使用.它们可以"保 ...

  9. javascript运行模式:并发模型 与Event Loop

    看了阮一峰老师的JavaScript 运行机制详解:再谈Event Loop和[朴灵评注]的文章,查阅网上相关资料,把自己对javascript运行模式和EVENT loop的理解整理下,不一定对,日 ...

随机推荐

  1. linux中serial driver理解【转】

    转自:http://blog.csdn.net/laoliu_lcl/article/details/39967225 英文文档地址:myandroid/kernel_imx/Documentatio ...

  2. C语言清空输入缓冲区的N种方法对比【转】

    转自:http://www.cnblogs.com/codingmylife/archive/2010/04/18/1714954.html C语言中有几个基本输入函数: //获取字符系列 int f ...

  3. [mysql5.6]主从更换ip之后重新建立同步【转】

    情况时这样的: 主从系统 centos6.5 mysql5.6 由于机房迁移ip地址变了,导致原来的主动无法同步,于是需要重新建立主从关系. 主 192.168.1.23 从 192.168.1.22 ...

  4. OracleDBConsoleorcl 启动不了 服务特定错误2【解决办法】

    问题描述: 我的oracle不知道为什么OracleDBConsoleorcl 启动不了 出现“服务特定错误2”现在我也不知道原因 估计是因为我电脑的IP经常变动,有时在公司用,有时在家里用! 我的o ...

  5. tortoise svn 忽略bin、obj等文件夹

    项目空白处右击 =>TortoiseSVN => Properties => New => Other => svn:global-ignores value => ...

  6. npm tls证书报错

    Error: unable to verify the first certificate 设置node环境(零时使用,再次使用需要重新使用) set NODE_TLS_REJECT_UNAUTHOR ...

  7. postman发送json请求,使用案例

    介绍:  postman是一个很好的http模拟器,,可以发送get.post.put等各种请求,是测试服务接口相当好的工具. postman发送json请求,使用案例 发送json的具体步骤: 1. ...

  8. vim 如何与外界粘贴复制

    在学习使用vim 的过程序,我们知道在vim 里面,粘贴复制的命令是y/p ,但是我们总会碰到这样的问题:如何把vim 里面复制的内容粘贴到vim 之外或者把vim 外面复制的内容粘贴到vim 里面? ...

  9. 《剑指offer》二叉树镜像

    剑指offer简单题,但是能一下写对也需要小心考虑细节. 题目描述 操作给定的二叉树,将其变换为源二叉树的镜像. 输入描述: 二叉树的镜像定义:源二叉树 8 / 6 10 /   / 5 7 9 11 ...

  10. 【LOJ】#2270. 「SDOI2017」天才黑客

    题解 显然要记录每个点来的状态,这样会扩充出点度的平方条边,就gg了 删掉所有的点,把每个边拆成两个点,连一条边权为c 这个时候我们考虑对于原先的每个点,将所有与其相连边所需要的节点(不管是进入还是出 ...