JS进修笔记 - 回调函数

2019年8月26日 188次阅读 来源: _我已经从中二毕业了

本文章记录本人在进修 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://segmentfault.com/a/1190000002932447
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞