javascript 理解和使用回調函數

在javascript中，function是內置的類對象，也就是說它是一種類型的對象，可以和其他String、Array、Number、Objec類的對象一樣用於內置對象的管理。因爲function實際上是一種對象，它可以“存儲在變量中，通過參數傳遞給（另一個）函數（function），在函數內部創建，從函數中返回結果值”。

因爲函數名本身是變量，所以函數也可以作爲值來使用。也就是說，不僅可以像傳遞參數一樣把一個函數傳遞給另一個函數，而且可以將一個函數作爲另一個函數的結果返回。

function callSomeFunction(someFunction, somaArgument) {
    return someFunction(somaArgument);
  }

  function add(num) {
    return num + 10;
  }
  var result1 = callSomeFunction(add, 10);
  console.log(result1); // 20;

  function getGreeting(name) {
    return "hello "+ name;
  }

  var result2 = callSomeFunction(getGreeting, "world");
  console.log(result2); // hello world;

這個calSomeFunction()函數是通用的，即無論第一個參數中傳遞進來的是什麼函數，它都返回執行第一個參數後的結果。要訪問函數的指針而不執行函數的話，必須去掉函數名後的那對括號。因此上面的列子中傳遞給callSomeFunction（）的是add和getGreeting，而不是執行它們之後的結果。

下面我們再看幾種回調函數。

在jQuery中常用的函數：

$("#btn").click(function() {
  alert("Btn  Clicked");
});

如上面的例子，我們傳遞了一個匿名函數給click方法的形參。click方法將會調用（或執行）我們傳遞給它們的回調函數。這個例子就是一個典型的回調函數的方式。

再看一個javascript的典型例子：

function callFunction(something) {
    for (var item in something) {
      console.log(item + ": " + something[item]);
    }

  }

  function getSome(obj, callback) {
    callback(obj);
  }

  getInput({name: "CSDN", lang: "Javascript"}, callFunction);

返回的結果是CSDN：Javascript。

講callFunction作爲參數傳遞給了getSome，在函數內，使用callback回調值，在calFunction中處理這個值。這樣就形成了一個很好的函數處理過程。將各段處理都分開。

使用含有this對象的回調函數。當回調函數是一個含有this對象的方法時，我們必須修改執行回調函數的方法以保護this對象的內容。否則this對象將會指向全局的window對象，或者指向包含函數。

var obj = {
    name: null,
    setName: function (firstName, lastName) {
      this.name = firstName + "-" + lastName;
    }
  }

  function getName(firstName, lastName, callback) {
    callback(firstName, lastName);
  }

  getName('Tom','Jony',obj.setName);
  console.log(obj.name); // null
  console.log(window.name); // Tom-Jony

當obj.setName被執行時，this.name 不會設置obj 對象的name，而是設置window對象中的name，因爲getName是一個全局函數。出現這種現象是因爲在全局函數中this對象指向了window對象。
這個時候我們可以使用Call和Apply函數保護this對象。

var obj = {
    name: null,
    setName: function (firstName, lastName) {
      this.name = firstName + "-" + lastName;
    }
  }

  function getName(firstName, lastName, callback, callbackObj) {
    callback.call(callbackObj, firstName, lastName);
    // callback.apply(callbackObj, [firstName, lastName]);
  }

  getName('Tom', 'Jony', obj.setName, obj);
  console.log(obj.name); // Tom-Jony

這樣就可以通過call函數正確的設置this對象，現在我們可以正確的執行回調函數並它正確地設置obj對象中的name。使用apply也是一樣的。

多重回調函數也是可以得。一個典型的例子就是jQuery的ajax函數。

function successCallback() {
    // Do stuff before send
}

function successCallback() {
    // Do stuff if success message received
}

function completeCallback() {
    // Do stuff upon completion
}

function errorCallback() {
    // Do stuff if error received
}

$.ajax({
    url:"http://favicon.png",
    success:successCallback,
    complete:completeCallback,
    error:errorCallback

});