《JS編程全解》—— 回調(diào)函數(shù)

mj 發(fā)布于2019-08-20 17:18 / 555人閱讀

摘要：事件驅(qū)動正是一種回調(diào)函數(shù)設(shè)計模式。由于不支持多線程，所以為了實現(xiàn)并行處理，不得不使用回調(diào)函數(shù)，這逐漸成為了一種慣例。上面的回調(diào)函數(shù)只是單純的函數(shù)而不具有狀態(tài)。如果回調(diào)函數(shù)具有狀態(tài)，就能得到更為廣泛的應(yīng)用。

回調(diào)函數(shù)模式 回調(diào)函數(shù)與控制反轉(zhuǎn)

回調(diào)函數(shù)是程序設(shè)計的一種方法。這種方法是指，在傳遞了可能會進行調(diào)用的函數(shù)或?qū)ο笾?，在需要時再分別對其進行調(diào)用。由于調(diào)用方與被調(diào)用方的依賴關(guān)系與通常相反，所以也成為控制反轉(zhuǎn)（IoC,Inversion of Control）。
由于歷史原因，在JavaScript開發(fā)中我們常常會用到回調(diào)函數(shù)這一方法，這是多種因素導(dǎo)致的。第一個原因是在客戶端JavaScript中基本都是GUI程序設(shè)計。GUI程序設(shè)計是一種很適合使用所謂事件驅(qū)動的程序設(shè)計方式。事件驅(qū)動正是一種回調(diào)函數(shù)設(shè)計模式?？蛻舳薐avaScript程序設(shè)計是一種基于DOM的事件驅(qū)動式程序設(shè)計。
第二個原因是，源于客戶端無法實現(xiàn)多線程程序設(shè)計（最近HTML5 Web Works支持多線程了）。而通過將回調(diào)函數(shù)與異步處理相結(jié)合，就能夠?qū)崿F(xiàn)并行處理。由于不支持多線程，所以為了實現(xiàn)并行處理，不得不使用回調(diào)函數(shù)，這逐漸成為了一種慣例。最后一個原因與JavaScript中的函數(shù)聲明表達式和閉包有關(guān)。

JavaScript與回調(diào)函數(shù)

    var emitter = {
        // 為了能夠注冊多個回調(diào)函數(shù)而通過數(shù)組管理
        callbacks:[],
        // 回調(diào)函數(shù)的注冊方法
        register:function (fn) {
            this.callbacks.push(fn);
        },
        // 事件的觸發(fā)處理
        onOpen:function () {
            for (var f in this.callbacks) {
                this.callbacks[f]();
            }
        }
    };
    emitter.register(function () {alert("event handler1 is called");})
    emitter.register(function () {alert("event handler2 is called");})
    
    emitter.onOpen();    
    // "event handler1 is called"
    // "event handler2 is called"

定義的兩個匿名函數(shù)就是回調(diào)函數(shù)，它們的調(diào)用由emitter.onOpen()完成。

　對emitter來說，這僅僅是對注冊的函數(shù)進行了調(diào)用，不過根據(jù)回調(diào)函數(shù)的定義，更應(yīng)該關(guān)注使用了emitter部分的情況。從這個角度來看，注冊過的回調(diào)函數(shù)與之形成的是一種調(diào)用與被調(diào)用的關(guān)系。

上面的回調(diào)函數(shù)只是單純的函數(shù)而不具有狀態(tài)。如果回調(diào)函數(shù)具有狀態(tài)，就能得到更為廣泛的應(yīng)用。下面我們把回調(diào)方改為了對象，于是emitter變?yōu)榱私邮芊椒▊鬟f的形式。

    function MyClass(msg) {
        this.msg = msg;
        this.show = function () {alert(this.msg+" is called");}
    }
    // 將方法注冊為回調(diào)函數(shù)
    var obj = new MyClass("listener1");
    var obj2 = new MyClass("listener2");
    emitter.register(obj.show);
    emitter.register(obj2.show);
    
    emitter.onOpen();
    // undefined is called
    // undefined is called

我們發(fā)現(xiàn)，調(diào)用回調(diào)函數(shù)無法正確顯示this.msg，錯誤原因在于JavaScript內(nèi)的this引用。解決方法有兩種，一種是使用bind，一種是不使用方法而是用對象進行注冊。后者在JavaScript中并不常用。

    emitter.register(obj.show.bind(obj));
    emitter.register(obj2.show.bind(obj2));
    
    emitter.onOpen();
    // "listener1 is called"
    // "listener2 is called"

bind是ES5新增的功能，是Function.prototype對象的方法。bind的作用和apply與call相同，都是用于明確指定出方法調(diào)用時的this引用。對于函數(shù)來說，調(diào)用了bind之后會返回一個新函數(shù)，新的函數(shù)會執(zhí)行與原函數(shù)相同的內(nèi)容，不過其this引用是被指定為它的第一個參數(shù)的對象。在調(diào)用apply與call時將會立即調(diào)用目標函數(shù)，而在調(diào)用bind時則不會如此，而是會返回一個函數(shù)（閉包）。
如果使用了apply或call，就能對bind進行獨立的實現(xiàn)。事實上在ES5才推出之前，在prototype.js等知名的庫中就通過apply/call提供了bind自己的實現(xiàn)。

腦補的bind的內(nèi)部實現(xiàn)？

    Function.prototype.bind = null;
    Function.prototype.bind = function (obj) {
        var f = this;
        return function () {
            f.call(obj);
        }
    }
    var obj = {
        x:"這是    obj.x    ?。?！",
        fn:function () {
            alert(this.x);
        }
    };
    var obj2 = {x:"obj2.x    對啦?。?！"};
    
    var testfn = obj.fn.bind(obj2);
    testfn();    // "obj2.x    對啦?。?！"

閉包與回調(diào)函數(shù)

    emitter.register(
        (function () {
            var msg = "closure1";
            return function () {alert(msg+" is called;")};
        }())
    );
    emitter.register(
        (function () {
            var msg = "closure2";
            return function () {alert(msg+" is called;")};
        }())
    )
    
    emitter.onOpen();
    // "closure1 is called"
    // "closure2 is called"

借助閉包，前面繁復(fù)的說明仿佛不在存在，可以很輕松的實現(xiàn)回調(diào)函數(shù)，并且還能像對象一樣具有狀態(tài)。

GPU云服務(wù)器云服務(wù)器 js回調(diào)函數(shù) js回調(diào)函數(shù)視頻 js中回調(diào)函數(shù)問題 js函數(shù)式編程視頻

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/83473.html

發(fā)表評論

登陸后可評論

0條評論

mj

男|高級講師

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

TA的文章

2021-09-29

閱讀 3387·2021-09-30 09:47
C++之vector：靈活的數(shù)組

閱讀 2404·2021-09-10 10:51
??《小黃鴨調(diào)試法》程序員必備技能?。???

閱讀 2006·2021-09-08 09:36
前端學(xué)習(xí)之路

閱讀 2998·2019-08-30 12:56
Vue+CSS3實現(xiàn)轉(zhuǎn)盤抽獎

閱讀 3124·2019-08-30 11:16
阿里巴巴2018秋招總結(jié)

閱讀 2690·2019-08-29 16:40
前端每日實戰(zhàn)：27# 視頻演示如何用純 CSS 創(chuàng)作一個精彩的彩虹 loading 特效

閱讀 3054·2019-08-29 15:25
web-style文檔

閱讀 1691·2019-08-29 11:02

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

《JS編程全解》—— 回調(diào)函數(shù)

相關(guān)文章

JavaScript編程全解 —— 基礎(chǔ)

JavaScript 中優(yōu)雅的實現(xiàn)順序執(zhí)行異步函數(shù)

html-webpack-plugin用法全解

前端20個真正靈魂拷問，吃透這些你就是中級前端工程師【上篇】

前端20個真正靈魂拷問，吃透這些你就是中級前端工程師【上篇】

發(fā)表評論

0條評論

mj

男|高級講師

TA的文章

2021-09-29

C++之vector：靈活的數(shù)組

??《小黃鴨調(diào)試法》程序員必備技能?。???

前端學(xué)習(xí)之路

Vue+CSS3實現(xiàn)轉(zhuǎn)盤抽獎

阿里巴巴2018秋招總結(jié)

前端每日實戰(zhàn)：27# 視頻演示如何用純 CSS 創(chuàng)作一個精彩的彩虹 loading 特效

web-style文檔

最新活動

資訊專欄INFORMATION COLUMN

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

《JS編程全解》—— 回調(diào)函數(shù)

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

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