javascript -- 回調函數(shù)之美

kbyyd24 發(fā)布于2019-08-26 11:38 / 818人閱讀

javascript -- 回調函數(shù)

在高級語言層出不窮的年代, 各個語言都號稱有著一切皆為對象的自豪說法, 而 js 作為一門腳本語言卻相對于java等傳統(tǒng)面向對象語言有很大的不同之處, 除了 js 詭異的繼承體系之外, 最令人著迷的一個特性就是回調函數(shù), 當然也有很多人對他詬病, 筆者認為回調函數(shù) 和異步是js語言特性的兩大最為突出的店, 當然正如所有優(yōu)點需要滿足自我的需求, 這個世界沒有銀彈, 比如大量的使用回調函數(shù)將會使你的代碼冗余, 錯亂影響代碼人的視覺與思維體驗.

本文是自己對學習回調函數(shù)的的體會, 難免不完善甚至錯誤, 原諒我的無知, 我愿虛心學習, 完善自己.

javascript最獨特的就是 函數(shù) 作為一等公民, 我更愿意將 js 稱為一切皆為變量的一門高級語言, 函數(shù)也是一種變量可以成為其他函數(shù)的參數(shù), 我們喜歡在js中稱之為回調函數(shù), 另外js中的匿名函數(shù)可以作為函數(shù)參數(shù)使得回調函數(shù)的寫法如魚得水.

ps. 回調函數(shù)與 c 語言中的函數(shù)指針類似---指針指針指針!!!重要的事情說三遍

先來看一下回調函數(shù)的定義
In computer programming, a callback is a piece of executable code that is passed as an argument to other code, which is expected to call back (execute) the argument at some convenient time
回調函數(shù)是一段可執(zhí)行的代碼段，它作為一個參數(shù)傳遞給其他的代碼，其作用是在需要的時候方便調用這段（回調函數(shù)）代碼。

回調函數(shù)

    function addSqua(num1, num2, callback){
        var sum = num1 + num2;
        return callback(sum);
    }
    
    function squa(num){
        return num*num;
    }
    
    let num  = addSqua(1, 2, squa);        
    console.log(num);
    //=>9

匿名回調函數(shù)

將匿名函數(shù)直接作為函數(shù)參數(shù)傳遞給函數(shù), 這也是我們編程一般采用的

function addSqua(num1, num2, callback){
  var sum = num1 + num2;
  return callback(sum);
}
let num  = addSqua(1, 2, function squa(num){
  return num*num;
});        
console.log(num); 
//=9

模仿數(shù)組中的every方法

在Array.prototype中添加類似與every一樣的方法

    Array.prototype.myEvery = function (callback) {
      if (typeof callback === "function") {
        for (let i = 0; i < this.length; i++) {
          if (callback(this[i])) {
            return false;
          }      
        }
        return true;
      }
      return true;
    }
    
    let op = [3, 6, "every", 9,"each"];
    op.myEvery(function (value) {
      console.log(value);
    })
    // 3
    // 6
    // "every"
    // 9
    // "each"

回調函數(shù)特點

不會立刻執(zhí)行,
正如定義中給出的一樣回調函數(shù)作為代碼片段可以根據(jù)需要在其特定條件下執(zhí)行, 回調函數(shù)作為參數(shù)傳遞給一個函數(shù)的時候，傳遞的只是函數(shù)的定義并不會立即執(zhí)行。

this
ES6推出了箭頭函數(shù), 箭頭函數(shù)的推出需要在寫回調函數(shù)的時候格外注意, this 是指向所在函數(shù)的上下文對象, 如果在在ES6采用箭頭函數(shù)則需要注意 this使用, 箭頭函數(shù)中this并沒有上下文關系直說, 有興趣的可以查看ES6 阮一峰, 再次奉上傳送門

回調函數(shù)的優(yōu)點和使用場景
是個閉包

回調函數(shù)是閉包的簡單使用，也就是說它能訪問到其外層定義的變量。

回調函數(shù)之美

DRY，避免重復代碼。

可以將通用的邏輯抽象。

業(yè)務邏輯分離 (it"s so beautiful ^-^ ^-^)

提高代碼可維護性和可讀性。

加強代碼可讀性。

分離專職的函數(shù)。

js回調函數(shù)的偉大之處是其他傳統(tǒng)語言所沒有的, 它可以實現(xiàn)業(yè)務邏輯分離, 相當于暴露給外界一個接口, 這一點像極了前后端分離架構中的 API 接口設計理念

這個世界沒有 "銀彈" , 沒有能夠解決所有事情的一種方案, 由于js為異步而生, 回調函數(shù)用的最多的地方, 也是最適合的地方就是異步編程, 然而大量的使用會使得程序員的代碼冗余, 有很大的不可讀行, 體驗極差, 索性讓人高興的事, 人們從來沒有停止過對自己舒適度的追求, 筆者會在另外以前文章中具體簡述 js 的異步解決方案這里送上傳送門 js 異步解決方案

云服務器 GPU云服務器回調函數(shù) 添加回調函數(shù) 回調函數(shù)隊列 js回調函數(shù)

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/107267.html

體驗javascript之美-第五課匿名函數(shù)自執(zhí)行和閉包是一回事兒嗎？

摘要：大家想想怎么做什么是匿名函數(shù)自執(zhí)行并如何在實際庫中應用匿名函數(shù)自執(zhí)行，注意，注意，只有這個名字和沒有其它名字，比如封閉空間，這個是為了讓大家好理解自己造的詞語。通過本節(jié)課你將學到： 1.什么是函數(shù)表達式和函數(shù)聲明 2.first-class function 3.引用和復制的區(qū)別 4.函數(shù)傳參是怎么回事兒 5.關于函數(shù)的this和arguments 6.什么是匿名函數(shù)自執(zhí)行并如何在...

_Suqin 2019-08-20 15:56 評論0 收藏0
體驗javascript之美第四課--函數(shù)、函數(shù)表達式、閉包

摘要：大彬哥版權所有翻錄必究尼古拉斯屌大彬哥群尼古拉斯屌大彬哥函數(shù)聲明函數(shù)表達式是不是簡單的讓人發(fā)指區(qū)別就一句話，函數(shù)聲明，可以在函數(shù)調用之后，因為有函數(shù)預解析。而函數(shù)表達式必須在調用之前。通過前三課講解，大家應該能做到 1.手里有一份隨時能夠換工作自信的簡歷 2.知道了學習js的正確姿勢 3.理解了全局對象、全局上下文、知道有預解析同時做了至少50道面試題 4.能熟練的使用json構建...

Doyle 2019-08-20 15:54 評論0 收藏0
體驗javascript之美第九課-函數(shù)式編程和angular過濾器實現(xiàn)原理

摘要：函數(shù)式編程我在網(wǎng)上看了很多關于的函數(shù)式編程的教程，不過我感覺很多不是照抄的或者就是故弄玄虛。函數(shù)式編程幾分鐘就完事兒了，簡單的讓人發(fā)指。函數(shù)式編程理解這么多就夠了，再實用就可以看源碼了。 JS函數(shù)式編程我在網(wǎng)上看了很多關于javascript的函數(shù)式編程的教程，不過我感覺很多不是照抄的或者就是故弄玄虛。js發(fā)展到今天越來越往瑜伽圈的風氣發(fā)展了，拿腔拿調裝13不好好說話，好像你講的東...

coordinate35 2019-08-20 16:11 評論0 收藏0
體驗javascript之美第五課五分鐘徹底明白匿名函數(shù)自執(zhí)行和閉包

摘要：注意匿名函數(shù)自執(zhí)行只是產(chǎn)生閉包的一種情況，閉包是現(xiàn)象或者情形，不實用匿名函數(shù)自執(zhí)行也有很多情況產(chǎn)生閉包，所以而且根本就是兩回事兒，不能混淆。小測驗，你能看出下面的程序用了閉包嗎閉包在中使用。閉包無處不在，直接看的例子。通過文你將學到： 1.閉包是怎么回事兒？ 2.閉包的原理和在jquery中的應用 3.從一到面試題徹底理解閉包和垃圾回收機制 4.閉包在jquery中的應用概述 ...

HitenDev 2019-08-20 15:56 評論0 收藏0