javascript 理解和使用回調函數(shù)

caozhijian 發(fā)布于2019-08-01 17:39 / 3099人閱讀

摘要：下面我們再看幾種回調函數(shù)。方法將會調用或執(zhí)行我們傳遞給它們的回調函數(shù)。這個例子就是一個典型的回調函數(shù)的方式。講作為參數(shù)傳遞給了，在函數(shù)內，使用回調值，在中處理這個值。使用含有對象的回調函數(shù)。出現(xiàn)這種現(xiàn)象是因為在全局函數(shù)中對象指向了對象。

在javascript中，function是內置的類對象，也就是說它是一種類型的對象，可以和其他String、Array、Number、Objec類的對象一樣用于內置對象的管理。因為function實際上是一種對象，它可以“存儲在變量中，通過參數(shù)傳遞給（另一個）函數(shù)（function），在函數(shù)內部創(chuàng)建，從函數(shù)中返回結果值”。
因為函數(shù)名本身是變量，所以函數(shù)也可以作為值來使用。也就是說，不僅可以像傳遞參數(shù)一樣把一個函數(shù)傳遞給另一個函數(shù)，而且可以將一個函數(shù)作為另一個函數(shù)的結果返回。

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()函數(shù)是通用的，即無論第一個參數(shù)中傳遞進來的是什么函數(shù)，它都返回執(zhí)行第一個參數(shù)后的結果。要訪問函數(shù)的指針而不執(zhí)行函數(shù)的話，必須去掉函數(shù)名后的那對括號。因此上面的列子中傳遞給callSomeFunction（）的是add和getGreeting，而不是執(zhí)行它們之后的結果。

下面我們再看幾種回調函數(shù)。
在jQuery中常用的函數(shù)：

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

如上面的例子，我們傳遞了一個匿名函數(shù)給click方法的形參。click方法將會調用（或執(zhí)行）我們傳遞給它們的回調函數(shù)。這個例子就是一個典型的回調函數(shù)的方式。
再看一個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作為參數(shù)傳遞給了getSome，在函數(shù)內，使用callback回調值，在calFunction中處理這個值。這樣就形成了一個很好的函數(shù)處理過程。將各段處理都分開。
使用含有this對象的回調函數(shù)。當回調函數(shù)是一個含有this對象的方法時，我們必須修改執(zhí)行回調函數(shù)的方法以保護this對象的內容。否則this對象將會指向全局的window對象，或者指向包含函數(shù)。

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被執(zhí)行時，this.name 不會設置obj 對象的name，而是設置window對象中的name，因為getName是一個全局函數(shù)。出現(xiàn)這種現(xiàn)象是因為在全局函數(shù)中this對象指向了window對象。
這個時候我們可以使用Call和Apply函數(shù)保護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函數(shù)正確的設置this對象，現(xiàn)在我們可以正確的執(zhí)行回調函數(shù)并它正確地設置obj對象中的name。使用apply也是一樣的。
多重回調函數(shù)也是可以得。一個典型的例子就是jQuery的ajax函數(shù)。

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  
  
});

學習前端的同學注意了！！！
學習過程中遇到什么問題或者想獲取學習資源的話，歡迎加入前端學習交流群461593224，我們一起學前端！

云服務器 GPU云服務器使用Javascript和DOM 回調函數(shù) 添加回調函數(shù) 回調函數(shù)隊列

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://www.ezyhdfw.cn/yun/51290.html

javascript 回調函數(shù) 整理

摘要：回調函數(shù)不是由該函數(shù)的實現(xiàn)方直接調用，而是在特定的事件或條件發(fā)生時由另外的一方調用的，用于對該事件或條件進行響應。若是使用回調函數(shù)進行處理，代碼就可以繼續(xù)進行其他任務，而無需空等。參考理解回調函數(shù)理解與使用中的回調函數(shù)這篇相當不錯回調函數(shù) 為什么寫回調函數(shù) 對于javascript中回調函數(shù) 一直處于理解，但是應用不好的階段，總是在別人家的代碼中看到很巧妙的回調，那時候會有wow c...

xiaowugui666 2019-08-21 12:29 評論0 收藏0
理解與使用Javascript中的回調函數(shù)

摘要：在閱讀本文之后你能了解怎樣使用回調函數(shù)。這是中回調函數(shù)的典型用法，它在中廣泛被使用。這意味著回調函數(shù)本質上是一個閉包。使用命名或匿名函數(shù)作為回調在前面的例子以及的例子中，我們使用了再參數(shù)位置定義的匿名函數(shù)作為回調函數(shù)。轉自：張小俊128：http://www.html-js.com/articl..._luxiao：http://luxiao1223.blog.51cto.... j...

Pandaaa 2019-08-20 15:57 評論0 收藏0
理解異步JavaScript

摘要：當函數(shù)結束，將會被從調用棧移出。事件循環(huán)事件循環(huán)的責任就是查看調用棧并確定調用棧是否為空。事件循環(huán)會再次檢查調用棧是否為空，如果為空的話，它會把事件回調壓入棧中，然后回調函數(shù)則被執(zhí)行。寫在文章前這篇文章是翻譯自Sukhjinder Arora的Understanding Asynchronous JavaScript。這篇文章描述了異步和同步JavaScript是如何在運行環(huán)境中，...

ixlei 2019-08-23 13:58 評論0 收藏0
夯實基礎-JavaScript異步編程

摘要：調用棧被清空，消息隊列中并無任務，線程停止，事件循環(huán)結束。不確定的時間點請求返回，將設定好的回調函數(shù)放入消息隊列。調用棧執(zhí)行完畢執(zhí)行消息隊列任務。請求并發(fā)回調函數(shù)執(zhí)行順序無法確定。異步編程 JavaScript中異步編程問題可以說是基礎中的重點，也是比較難理解的地方。首先要弄懂的是什么叫異步？我們的代碼在執(zhí)行的時候是從上到下按順序執(zhí)行，一段代碼執(zhí)行了之后才會執(zhí)行下一段代碼，這種方式...

shadowbook 2019-08-22 17:16 評論0 收藏0
ES6-7

摘要：的翻譯文檔由的維護很多人說，阮老師已經(jīng)有一本關于的書了入門，覺得看看這本書就足夠了。前端的異步解決方案之和異步編程模式在前端開發(fā)過程中，顯得越來越重要。為了讓編程更美好，我們就需要引入來降低異步編程的復雜性。 JavaScript Promise 迷你書（中文版）超詳細介紹promise的gitbook，看完再不會promise...... 本書的目的是以目前還在制定中的ECMASc...

mudiyouyou 2019-08-21 18:40 評論0 收藏0
javascript 理解和使用回調函數(shù)

摘要：下面我們再看幾種回調函數(shù)。方法將會調用或執(zhí)行我們傳遞給它們的回調函數(shù)。這個例子就是一個典型的回調函數(shù)的方式。講作為參數(shù)傳遞給了，在函數(shù)內，使用回調值，在中處理這個值。使用含有對象的回調函數(shù)。出現(xiàn)這種現(xiàn)象是因為在全局函數(shù)中對象指向了對象。在javascript中，function是內置的類對象，也就是說它是一種類型的對象，可以和其他String、Array、Number、Objec類的...

youkede 2019-08-22 11:11 評論0 收藏0