JavaScript專題之惰性函數

Jackwoo 發(fā)布于2019-08-20 18:52 / 3302人閱讀

摘要：專題系列第十五篇，講解惰性函數需求我們現在需要寫一個函數，這個函數返回首次調用時的對象，注意是首次。解決四惰性函數不錯，惰性函數就是解決每次都要進行判斷的這個問題，解決原理很簡單，重寫函數。

JavaScript 專題系列第十五篇，講解惰性函數

需求

我們現在需要寫一個 foo 函數，這個函數返回首次調用時的 Date 對象，注意是首次。

解決一：普通方法

var t;
function foo() {
    if (t) return t;
    t = new Date()
    return t;
}

問題有兩個，一是污染了全局變量，二是每次調用 foo 的時候都需要進行一次判斷。

解決二：閉包

我們很容易想到用閉包避免污染全局變量。

var foo = (function() {
    var t;
    return function() {
        if (t) return t;
        t = new Date();
        return t;
    }
})();

然而還是沒有解決調用時都必須進行一次判斷的問題。

解決三：函數對象

函數也是一種對象，利用這個特性，我們也可以解決這個問題。

function foo() {
    if (foo.t) return foo.t;
    foo.t = new Date();
    return foo.t;
}

依舊沒有解決調用時都必須進行一次判斷的問題。

解決四：惰性函數

不錯，惰性函數就是解決每次都要進行判斷的這個問題，解決原理很簡單，重寫函數。

var foo = function() {
    var t = new Date();
    foo = function() {
        return t;
    };
    return foo();
};

更多應用

DOM 事件添加中，為了兼容現代瀏覽器和 IE 瀏覽器，我們需要對瀏覽器環(huán)境進行一次判斷：

// 簡化寫法
function addEvent (type, el, fn) {
    if (window.addEventListener) {
        el.addEventListener(type, fn, false);
    }
    else if(window.attachEvent){
        el.attachEvent("on" + type, fn);
    }
}

問題在于我們每當使用一次 addEvent 時都會進行一次判斷。

利用惰性函數，我們可以這樣做：

function addEvent (type, el, fn) {
    if (window.addEventListener) {
        addEvent = function (type, el, fn) {
            el.addEventListener(type, fn, false);
        }
    }
    else if(window.attachEvent){
        addEvent = function (type, el, fn) {
            el.attachEvent("on" + type, fn);
        }
    }
}

當然我們也可以使用閉包的形式：

var addEvent = (function(){
    if (window.addEventListener) {
        return function (type, el, fn) {
            el.addEventListener(type, fn, false);
        }
    }
    else if(window.attachEvent){
        return function (type, el, fn) {
            el.attachEvent("on" + type, fn);
        }
    }
})();

當我們每次都需要進行條件判斷，其實只需要判斷一次，接下來的使用方式都不會發(fā)生改變的時候，想想是否可以考慮使用惰性函數。

重要參考

Lazy Function Definition Pattern

專題系列

JavaScript專題系列目錄地址：https://github.com/mqyqingfeng/Blog。

JavaScript專題系列預計寫二十篇左右，主要研究日常開發(fā)中一些功能點的實現，比如防抖、節(jié)流、去重、類型判斷、拷貝、最值、扁平、柯里、遞歸、亂序、排序等，特點是研(chao)究(xi) underscore 和 jQuery 的實現方式。

如果有錯誤或者不嚴謹的地方，請務必給予指正，十分感謝。如果喜歡或者有所啟發(fā)，歡迎 star，對作者也是一種鼓勵。

云服務器 GPU云服務器惰性載入函數 javascript專題系列 javascript 函數 javascript函數

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

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

JavaScript專題系列文章

摘要：專題系列共計篇，主要研究日常開發(fā)中一些功能點的實現，比如防抖節(jié)流去重類型判斷拷貝最值扁平柯里遞歸亂序排序等，特點是研究專題之函數組合專題系列第十六篇，講解函數組合，并且使用柯里化和函數組合實現模式需求我們需要寫一個函數，輸入，返回。 JavaScript 專題之從零實現 jQuery 的 extend JavaScritp 專題系列第七篇，講解如何從零實現一個 jQuery 的 ext...

Maxiye 2019-08-21 17:57 評論0 收藏0
JavaScript專題系列20篇正式完結！

摘要：寫在前面專題系列是我寫的第二個系列，第一個系列是深入系列。專題系列自月日發(fā)布第一篇文章，到月日發(fā)布最后一篇，感謝各位朋友的收藏點贊，鼓勵指正。寫在前面 JavaScript 專題系列是我寫的第二個系列，第一個系列是 JavaScript 深入系列。 JavaScript 專題系列共計 20 篇，主要研究日常開發(fā)中一些功能點的實現，比如防抖、節(jié)流、去重、類型判斷、拷貝、最值、扁平、柯里...

sixleaves 2019-08-21 17:15 評論0 收藏0
前端_JavaScript

摘要：為此決定自研一個富文本編輯器。例如當要轉化的對象有環(huán)存在時子節(jié)點屬性賦值了父節(jié)點的引用，為了關于函數式編程的思考作者李英杰，美團金融前端團隊成員。只有正確使用作用域，才能使用優(yōu)秀的設計模式，幫助你規(guī)避副作用。 JavaScript 專題之惰性函數 JavaScript 專題系列第十五篇，講解惰性函數需求我們現在需要寫一個 foo 函數，這個函數返回首次調用時的 Date 對象，注意...

Benedict Evans 2019-08-26 11:39 評論0 收藏0
【進階 6-2 期】深入高階函數應用之柯里化

摘要：引言上一節(jié)介紹了高階函數的定義，并結合實例說明了使用高階函數和不使用高階函數的情況。我們期望函數輸出，但是實際上調用柯里化函數時，所以調用時就已經執(zhí)行并輸出了，而不是理想中的返回閉包函數，所以后續(xù)調用將會報錯。引言上一節(jié)介紹了高階函數的定義，并結合實例說明了使用高階函數和不使用高階函數的情況。后面幾部分將結合實際應用場景介紹高階函數的應用，本節(jié)先來聊聊函數柯里化，通過介紹其定義、比較常見的...

stackvoid 2019-05-22 19:25 評論0 收藏0
2017-08-22 前端日報

摘要：前端日報精選專題之惰性函數中的執(zhí)行上下文和調用棧是什么個人總結新特性緩存機制詳解技術內幕的秘密中文第期給前端工程師講設計終篇行代碼搭建神經網絡知乎專欄版模塊，桌面支付請求，，以及眾成翻譯你應該知道的知乎專欄技術周刊同步代碼書寫異 2017-08-22 前端日報精選 JavaScript專題之惰性函數JavaScript 中的執(zhí)行上下文和調用棧是什么？個人總結（css3新特性） HTT...

Fundebug 2019-08-21 12:04 評論0 收藏0