javascriptコールバック関数

コールバックや高級関数は何ですか?
JavaScripでは、functionは、変数に格納され、パラメータを介して別の関数に伝達され、関数に実行が遅延され、実行後に戻ってきます.コールバック関数は、パラメータとして他の関数(これは「otherFunction」と呼ばれる)に渡される高度な関数であると考えられています.コールバック関数は、otherFunction内で呼び出されます.コールバック関数の本質はモード(一般的な問題を解決するモード)であるため、コールバック関数はコールバックモードとも呼ばれる.
jQueryでよく使われるコールバック関数:

//Note that the item in the click method's parameter is a function, not a variable.
//The item is a callback function
$("#btn_1").click(function() {
  alert("Btn 1 Clicked");
});

前の例では、click法に対する関数のイメージを伝達し、click法はそれらに伝達されるコール(または実行)バック関数を呼び出す.この例はJavaScriptにおけるコールバック関数を使用する典型的な方法を示し、jQueryに広く適用されている.
JavaScriptの典型例:

var friends = ["Mike", "Stacy", "Andy", "Rick"];

friends.forEach(function (eachName, index){
console.log(index + 1 + ". " + eachName); // 1. Mike, 2. Stacy, 3. Andy, 4. Rick
});

forEach()メソッド:配列の各要素を巡回し、要素をコールバック関数に伝達します.
コールバック関数の原理
変数を使うように関数を使用して、別の関数のパラメータとして、他の関数で戻りの結果として、他の関数で呼び出します.パラメータとして他の関数にフィードバック関数を渡すと、この関数の定義だけが伝達され、パラメータでは実行されませんでした.
関数がパラメータで定義されたコールバック関数を持つと、いつでもコールできます.
これは、コールバック関数がすぐに実行されるのではなく、関数を含む関数の内部で指定された位置にある「コールバック」であることを示しています.ですから、最初のjQueryの例でもこう見えます.

//The anonymous function is not being executed there in the parameter. 
//The item is a callback function
$("#btn_1").click(function() {
  alert("Btn 1 Clicked");
});

匿名関数は、click関数の関数体内で呼び出され、名前がなくても、関数を含んでargmentsオブジェクトを介してアクセスすることができます.
コールバック関数は閉じられています.パラメータとして他の関数にフィードバック関数を伝達すると、コールバック関数は関数を含む関数内のある位置で実行されます.コールバック関数が関数を含む関数内で定義されるように.このことはコールバック関数がクローズドであることを意味する.クローズド関数は関数を含むスコープにアクセスできますので、コールバック関数は関数を含む変数、さらにはグローバル変数にアクセスできます.
例
前の例はすべて、コールバック関数として名前関数または匿名関数を使用しています.これはコールバック関数を使用する一般的な形式の一つです.
他のよく使われる形式は、バンド名を定義する関数であり、関数名をパラメータとして他の関数に渡す.

//     
var allUserData = [];

//     
function logStuff (userData) {
    if ( typeof userData === "string")
    {
        console.log(userData);
    }
    else if ( typeof userData === "object")
    {
        for (var item in userData) {
            console.log(item + ": " + userData[item]);
        }
    }
}

//      
function getInput (options, callback) {
    allUserData.push (options);
    callback (options);
}

//    ，       logStuff
getInput ({name:"Rich", speciality:"JavaScript"}, logStuff);
//  name: Rich
// speciality: JavaScript

実行前にコールバックが必要とされる関数であることを確認し、パラメータを通して伝達されるコールバックが必要な関数であることを確認することは、通常は賢明である.また、コールバック関数はオプションであり、良い実践でもあります.
上記の例のgetInput関数を再構成して、適切な調査を行ったことを確認します.

function getInput(options, callback) {
    allUserData.push(options);

    // Make sure the callback is a function
    if (typeof callback === "function") {
    // Call it, since we have confirmed it is callable
        callback(options);
    }
}

getInput関数が適切な検査をしていない場合(calbackが関数かどうか、またはパラメータを通して伝達されたかどうか)、私たちのコードは運行時のエラーを引き起こします.
thisオブジェクトを含むコールバック関数を使用する問題
チューニング関数がthisオブジェクトを含む方法である場合は、チューニング関数を実行する方法を変更して、thisオブジェクトの内容を保護しなければなりません.thisオブジェクトは、グローバルのwindowオブジェクトを指します.(もし、コールバック関数が大域関数に伝達されたら)、または関数を含む方向を指します.下のコードを見てみましょう.

// Define an object with some properties and a method
// We will later pass the method as a callback function to another function
var clientData = {
    id: 094545,
    fullName: "Not Set",
    // setUserName is a method on the clientData object
    setUserName: function (firstName, lastName)  {
        // this refers to the fullName property in this object
      this.fullName = firstName + " " + lastName;
    }
}

function getUserInput(firstName, lastName, callback)  {
    // Do other stuff to validate firstName/lastName here

    // Now save the names
    callback (firstName, lastName);
}

以下の例示的なコードでは、clientData.setsUserNameが実行されるとき、this.fullNameはclientDataオブジェクト中の属性fullNameを設定しないで、windowオブジェクト中のfullNameを設定します.この現象は全体関数でthisオブジェクトがwindowオブジェクトを指しているからです.

getUserInput ("Barack", "Obama", clientData.setUserName);

console.log (clientData.fullName);// Not Set

// The fullName property was initialized on the window object
console.log (window.fullName); // Barack Obama

解決方法:CallまたはAppley関数を使ってthisオブジェクトを保護します.

//Note that we have added an extra parameter for the callback object, called "callbackObj"
function getUserInput(firstName, lastName, callback, callbackObj)  {
    // Do other stuff to validate name here

    // The use of the Apply function below will set the this object to be callbackObj
    callback.apply (callbackObj, [firstName, lastName]);
}

Apple関数によって正確にthisオブジェクトを設定して、現在は正確にチューニング関数を実行して、clientDataオブジェクトのfullName属性を正しく設定することができます.

// We pass the clientData.setUserName method and the clientData object as parameters. The clientData object will be used by the Apply function to set the this object
getUserInput ("Barack", "Obama", clientData.setUserName, clientData);

// the fullName property on the clientData was correctly set
console.log (clientData.fullName); // Barack Obama

このブロガーの文章の出所を参考にします.