JS学習ノート-コールバック関数

この文章は本人が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)を使用して属性を引用すると、穴ができます.

JavaScript//         paint()，       myapp       
var myapp = {};
myapp.color = 'green';
myapp.paint = function (nodes) {
    nodes.style.color = this.color;
}

//            findeNodes() 
findeNodes(myapp.paint); // 

ピット:thisは、大域関数であるthis.colorとして定義されていません.したがって、オブジェクトのfindeNods()はthisを指しています.
解決の方法は以下の通りです.

は、このコールバック関数の属するオブジェクトをさらに伝達する.これはwindow関数(以下栗)を修正する必要があります.

JavaScriptvar findNodes = function (callback, callback_obj) {
    // ...
    if (typof callback === 'function') {
            callback.call(callback_obj, found);
    }
    // ...
}

//     
findNodes(myapp.paint, myapp);

主に、findNodes()により、関数の実行時のcall、applyのポインタが修正される.

は次に上記の方法を修正し、文字列として方法を伝達するので、オブジェクトの名前(以下、栗)を二回入力する必要はない.

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の皆さんと励ましましょう