摘要：面对这种问题的解决方法是采用回调模式，可以将因此节点逻辑以回调函数方式传递给并委托执行下面是栗子。解决的方法有另外传递该回调函数的所属对象。
什么是回调函数本文章记录本人在学习 JavaScript 中看书理解到的一些东西，加深记忆和并且整理记录下来，方便之后的复习。
在js里函数都是对象，这表示它们可以作为参数传递给其他的函数。举例：当函数b()作为参数传递给函数a()，那么在某一时刻函数a()可能会执行或者调用函数b()。这种情况下，函数b()就被称为回调函数，也可以简称叫做回调(下面是栗子)。
JavaScript"use strict";
function a(callback) {
callback();
}
function b() {
console.log("hello callback");
}
a(b); // 注意 b() 作为参数传递给 a() 的时候是不需要带括号的
回调函数示例
假设有一个通用的函数执行一些复杂的处理工作，并且返回结果为一个大块数据(下面是栗子)。
JavaScriptvar findeNodes = function () {
var i = 10000,
node = [],
found;
while (i) {
i -= 1;
node.push(found);
}
return nodes;
}
上面代码定义函数findNodes()，它的任务是抓取页面的dom tree，并返回一个你要的页面元素数组。
在定义一个函数hide()，顾名思义它的作用是隐藏页面中的节点(下面是栗子)。
JavaScriptvar hide = function (nodes) {
for (var i = 0; i < nodes.length; i += 1) {
nodes[i].style.display = "block";
}
}
// 执行函数
hide(findeNodes());
好了，要的效果都实现了，但是实现却是低效的。因为hide()必须再次循环由findNodes()返回的数组节点。如果能避免这种循环，只需要在findNodes()中选择便可隐藏节点，那么这将是更高效的方式。但是如果在findNodes()中实现隐藏逻辑的话，由于检索和修改逻辑耦合，那么他不再是通用的函数。面对这种问题的解决方法是采用回调模式，可以将因此节点逻辑以回调函数方式传递给findNodes()并委托执行(下面是栗子)。
JavaScript// 重构 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的实现就简单多了，因为它不需要再去循环遍历所有的节点了(下面是栗子)。
JavaScript// 回调函数
var hide = function (nodes) {
nodes.style.display = "none";
}
// 找到指定的节点，并在后续执行中隐藏
findeNodes(hide);
回调函数与作用域
在上一个栗子中，回调函数执行的语句是这样的：callback(parameters)。
虽然上面那句在大多数的场景上都是有效的，但是总会有一些场景，其回调函数并不是一次性的匿名函数或者全局函数，而是对象的方法。如果该函数使用this来引用它所的属性，这可能有是一个坑了（下面是栗子）。
JavaScript// 假设回调函数是 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()函数（下面是栗子）。
JavaScriptvar findNodes = function (callback, callback_obj) {
// ...
if (typof callback === "function") {
callback.call(callback_obj, found);
}
// ...
}
// 执行函数
findNodes(myapp.paint, myapp);
主要是通过call、apply来修改函数运行时的this指向。
然后接着修改上面的方法，将方法作为字符串传递，因此就不用两次输入该对象的名称（下面是栗子）。
JavaScriptvar 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各位共勉！
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/85780.html
摘要：如果有疑惑的地方，欢迎讨论，我是初学，希望能切磋和得到指点加载会阻塞页面加载默认异步加载文件方法一把放到页面底部加载方法二支持定义全局相对路径方法一自定义属性指定网页程序的主模块文件定义整个网页代码的入口文件的相对位置，以后此文件 如果有疑惑的地方，欢迎讨论，我是初学，希望能切磋和得到指点； js加载会阻塞页面加载： //requirejs默认异步加载js文件； 方法一...
摘要：它通过数据模型进行键值绑定及事件处理，通过模型集合器提供一套丰富的用于枚举功能，通过视图来进行事件处理及与现有的通过接口进行交互。 本人兼职前端付费技术顾问，如需帮助请加本人微信hawx1993或QQ345823102，非诚勿扰 1.为初学前端而不知道怎么做项目的你指导 2.指导并扎实你的JavaScript基础 3.帮你准备面试并提供相关指导性意见 4.为你的前端之路提供极具建设性的...
摘要：观察者模式也称发布订阅模式它的作用就是当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知，自动刷新对象状态举个生活比较常见常见的例子比如你去面试之后，面试官看你表现不错，最后会跟你要联系方式，以便之后可以联系你。 观察者模式也称发布-订阅模式,它的作用就是当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知，自动刷新对象状态 举个生活比较常见常见的例子,比如你去面试之后，...
摘要：回调函数成功回调处理器失败回调处理器用户发送一个向百度服务器获取数据的异步请求无阻塞高并发的的诞生更加严重的依赖异步操作才能完成无阻赛高并发的特性。 Promise Promise 是什么？ 词语本意： 发音：[ˈprɒmɪs] 词性：名词， 翻译：许诺，允诺。 MDN解释 Promise 对象用于一个异步操作。 一个Promise表示一个现在，将来或永不可能可用的值。 按照书写方...
阅读 618·2021-10-13 09:39
阅读 1400·2021-09-09 11:53
阅读 2617·2019-08-29 13:55
阅读 701·2019-08-28 18:08
阅读 2569·2019-08-26 13:54
阅读 2386·2019-08-26 11:44
阅读 1819·2019-08-26 11:41
阅读 3702·2019-08-26 10:15
