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

caohaoyu 發(fā)布于2019-08-29 13:29 / 1598人閱讀

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

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

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;

這個(gè)calSomeFunction()函數(shù)是通用的，即無論第一個(gè)參數(shù)中傳遞進(jìn)來的是什么函數(shù)，它都返回執(zhí)行第一個(gè)參數(shù)后的結(jié)果。要訪問函數(shù)的指針而不執(zhí)行函數(shù)的話，必須去掉函數(shù)名后的那對括號(hào)。因此上面的列子中傳遞給callSomeFunction（）的是add和getGreeting，而不是執(zhí)行它們之后的結(jié)果。

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

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

如上面的例子，我們傳遞了一個(gè)匿名函數(shù)給click方法的形參。click方法將會(huì)調(diào)用（或執(zhí)行）我們傳遞給它們的回調(diào)函數(shù)。這個(gè)例子就是一個(gè)典型的回調(diào)函數(shù)的方式。
再看一個(gè)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);

返回的結(jié)果是CSDN：Javascript。
講callFunction作為參數(shù)傳遞給了getSome，在函數(shù)內(nèi)，使用callback回調(diào)值，在calFunction中處理這個(gè)值。這樣就形成了一個(gè)很好的函數(shù)處理過程。將各段處理都分開。
使用含有this對象的回調(diào)函數(shù)。當(dāng)回調(diào)函數(shù)是一個(gè)含有this對象的方法時(shí)，我們必須修改執(zhí)行回調(diào)函數(shù)的方法以保護(hù)this對象的內(nèi)容。否則this對象將會(huì)指向全局的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

當(dāng)obj.setName被執(zhí)行時(shí)，this.name 不會(huì)設(shè)置obj 對象的name，而是設(shè)置window對象中的name，因?yàn)間etName是一個(gè)全局函數(shù)。出現(xiàn)這種現(xiàn)象是因?yàn)樵谌趾瘮?shù)中this對象指向了window對象。
這個(gè)時(shí)候我們可以使用Call和Apply函數(shù)保護(hù)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ù)正確的設(shè)置this對象，現(xiàn)在我們可以正確的執(zhí)行回調(diào)函數(shù)并它正確地設(shè)置obj對象中的name。使用apply也是一樣的。
多重回調(diào)函數(shù)也是可以得。一個(gè)典型的例子就是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  
  
});

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

GPU云服務(wù)器云服務(wù)器使用Javascript和DOM 回調(diào)函數(shù) 添加回調(diào)函數(shù) 回調(diào)函數(shù)隊(duì)列

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/112640.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

caohaoyu

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

CloudCone：便宜VPS年付$17.99起，洛杉磯MC機(jī)房，優(yōu)化線路

閱讀 3010·2021-10-08 10:18
前端每日實(shí)戰(zhàn)：143# 視頻演示如何用 CSS 的 Grid 布局創(chuàng)作一枚小松鼠郵票

閱讀 730·2019-08-30 15:54
CSS垂直居中，你會(huì)多少種寫法？

閱讀 1061·2019-08-29 18:43
Codepen 每周精選：本周最值得推薦的 23 個(gè)頁面特效（2018-5-28）

閱讀 2433·2019-08-29 15:33
前端基礎(chǔ)之CSS（1）

閱讀 1298·2019-08-29 15:29
javascript 理解和使用回調(diào)函數(shù)

閱讀 1599·2019-08-29 13:29
一個(gè)奇葩問題引發(fā)的"吐血"

閱讀 1022·2019-08-26 13:46
高級(jí) Angular 組件模式 (6)

閱讀 1693·2019-08-26 11:55

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

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

相關(guān)文章

javascript 回調(diào)函數(shù) 整理

理解與使用Javascript中的回調(diào)函數(shù)

理解異步JavaScript

**夯實(shí)基礎(chǔ)-JavaScript異步編程**

ES6-7