本文章记录本人在进修 JavaScript 中看书明白到的一些东西,加深影象和而且整顿记录下来,轻易以后的温习。
什么是回调函数
在js
里函数都是对象,这示意它们能够作为参数通报给其他的函数。举例:当函数b()
作为参数通报给函数a()
,那末在某一时刻函数a()
可能会实行或许挪用函数b()
。这类情况下,函数b()
就被称为回调函数,也能够简称叫做回调(下面是栗子)。
JavaScript
'use strict'; function a(callback) { callback(); } function b() { console.log('hello callback'); } a(b); // 注重 b() 作为参数通报给 a() 的时刻是不须要带括号的
回调函数示例
假定有一个通用的函数实行一些庞杂的处理工作,而且返回结果为一个大块数据(下面是栗子)。
JavaScript
var findeNodes = function () { var i = 10000, node = [], found; while (i) { i -= 1; node.push(found); } return nodes; }
上面代码定义函数findNodes()
,它的使命是抓取页面的dom tree
,并返回一个你要的页面元素数组。
在定义一个函数hide()
,望文生义它的作用是隐蔽页面中的节点(下面是栗子)。
JavaScript
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()
并托付实行(下面是栗子)。
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()
函数(下面是栗子)。
JavaScript
var findNodes = function (callback, callback_obj) { // ... if (typof callback === 'function') { callback.call(callback_obj, found); } // ... } // 实行函数 findNodes(myapp.paint, myapp);
主如果经由过程call、apply
来修正函数运转时的this
指向。
- 然后接着修正上面的要领,将要领作为字符串通报,因而就不必两次输入该对象的称号(下面是栗子)。
JavaScript
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列位共勉!