摘要:下面我們再看幾種回調函數。方法將會調用或執行我們傳遞給它們的回調函數。這個例子就是一個典型的回調函數的方式。講作為參數傳遞給了,在函數內,使用回調值,在中處理這個值。使用含有對象的回調函數。出現這種現象是因為在全局函數中對象指向了對象。
在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 });
學習前端的同學注意了!!!
學習過程中遇到什么問題或者想獲取學習資源的話,歡迎加入前端學習交流群461593224,我們一起學前端!
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/51290.html
摘要:回調函數不是由該函數的實現方直接調用,而是在特定的事件或條件發生時由另外的一方調用的,用于對該事件或條件進行響應。若是使用回調函數進行處理,代碼就可以繼續進行其他任務,而無需空等。參考理解回調函數理解與使用中的回調函數這篇相當不錯回調函數 為什么寫回調函數 對于javascript中回調函數 一直處于理解,但是應用不好的階段,總是在別人家的代碼中看到很巧妙的回調,那時候會有wow c...
摘要:在閱讀本文之后你能了解怎樣使用回調函數。這是中回調函數的典型用法,它在中廣泛被使用。這意味著回調函數本質上是一個閉包。使用命名或匿名函數作為回調在前面的例子以及的例子中,我們使用了再參數位置定義的匿名函數作為回調函數。 轉自:張小俊128:http://www.html-js.com/articl..._luxiao:http://luxiao1223.blog.51cto.... j...
摘要:當函數結束,將會被從調用棧移出。事件循環事件循環的責任就是查看調用棧并確定調用棧是否為空。事件循環會再次檢查調用棧是否為空,如果為空的話,它會把事件回調壓入棧中,然后回調函數則被執行。 寫在文章前 這篇文章是翻譯自Sukhjinder Arora的Understanding Asynchronous JavaScript。這篇文章描述了異步和同步JavaScript是如何在運行環境中,...
摘要:調用棧被清空,消息隊列中并無任務,線程停止,事件循環結束。不確定的時間點請求返回,將設定好的回調函數放入消息隊列。調用棧執行完畢執行消息隊列任務。請求并發回調函數執行順序無法確定。 異步編程 JavaScript中異步編程問題可以說是基礎中的重點,也是比較難理解的地方。首先要弄懂的是什么叫異步? 我們的代碼在執行的時候是從上到下按順序執行,一段代碼執行了之后才會執行下一段代碼,這種方式...
摘要:的翻譯文檔由的維護很多人說,阮老師已經有一本關于的書了入門,覺得看看這本書就足夠了。前端的異步解決方案之和異步編程模式在前端開發過程中,顯得越來越重要。為了讓編程更美好,我們就需要引入來降低異步編程的復雜性。 JavaScript Promise 迷你書(中文版) 超詳細介紹promise的gitbook,看完再不會promise...... 本書的目的是以目前還在制定中的ECMASc...
摘要:下面我們再看幾種回調函數。方法將會調用或執行我們傳遞給它們的回調函數。這個例子就是一個典型的回調函數的方式。講作為參數傳遞給了,在函數內,使用回調值,在中處理這個值。使用含有對象的回調函數。出現這種現象是因為在全局函數中對象指向了對象。 在javascript中,function是內置的類對象,也就是說它是一種類型的對象,可以和其他String、Array、Number、Objec類的...
閱讀 2993·2021-10-13 09:39
閱讀 2694·2021-09-27 13:34
閱讀 2031·2019-08-30 15:55
閱讀 3260·2019-08-30 15:43
閱讀 3631·2019-08-30 11:16
閱讀 1748·2019-08-26 18:28
閱讀 1284·2019-08-26 13:56
閱讀 915·2019-08-26 13:35