JS 利用高階函數(shù)實現(xiàn)函數(shù)緩存(備忘模式)

hightopo 發(fā)布于2019-08-22 11:22 / 1556人閱讀

摘要：所以這里可以利用高階函數(shù)的思想來實現(xiàn)一個簡單的緩存，我可以在函數(shù)內部用一個對象存儲輸入的參數(shù)，如果下次再輸入相同的參數(shù)，那就比較一下對象的屬性，把值從這個對象里面取出來。

1. 高階函數(shù)

高階函數(shù)就是那種輸入參數(shù)里面有一個或者多個函數(shù)，輸出也是函數(shù)的函數(shù)，這個在js里面主要是利用閉包實現(xiàn)的，最簡單的就是經?？吹降脑谝粋€函數(shù)內部輸出另一個函數(shù)，比如

var test = function() {
    return function() {}
}

這個主要是利用閉包來保持著作用域：

var add = function() {
    var num = 0;
    return function(a) {
        return num = num + a;
    }
}
add()(1);      // 1
add()(2);      // 2

這里的兩個add()(1)和add()(2)不會互相影響，可以理解為每次運行add函數(shù)后返回的都是不同的匿名函數(shù)，就是每次add運行后return的function其實都是不同的，所以運行結果也是不會影響的。

如果換一種寫法，比如：

var add = function() {
    var num = 0;
    return function(a) {
        return num = num + a;
    }
}
var adder = add();
adder(1); // 1
adder(2); // 3

這樣的話就會在之前運算結果基礎上繼續(xù)運算，意思就是這兩個 adder 運行的時候都是調用的同一個 num

2. 高階函數(shù)實現(xiàn)緩存(備忘模式)

比如有個函數(shù)：

var add = function(a) {
    return a + 1;
}

每次運行add(1)的時候都會輸出2，但是輸入1每次還是會計算一下1+1，如果是開銷很大的操作的話就比較消耗性能了，這里其實可以對這個計算進行一次緩存。
所以這里可以利用高階函數(shù)的思想來實現(xiàn)一個簡單的緩存，我可以在函數(shù)內部用一個對象存儲輸入的參數(shù)，如果下次再輸入相同的參數(shù)，那就比較一下對象的屬性，把值從這個對象里面取出來。

const memorize = function(fn) {
  const cache = {}
  return function(...args) {
    const _args = JSON.stringify(args)
    return cache[_args] || (cache[_args] = fn.apply(fn, args))
  }
}
const add = function(a) {
  return a + 1
}
const adder = memorize(add)
adder(1)    // 2    cache: { "[1]": 2 }
adder(1)    // 2    cache: { "[1]": 2 }
adder(2)    // 3    cache: { "[1]": 2, "[2]": 3 }

用JSON.stringify把傳給 adder 函數(shù)的參數(shù)變成了字符串，并且把它當做 cache 的 key，將 add 函數(shù)運行的結果當做 value 傳到了 cache 里面，這樣 memorize 的匿名函數(shù)運行的時候會返回cache[_args]，如果cache[_args]不存在的話就返回fn.apply(fn,args)，把fn.apply(fn, arguments)賦值給cache[_args]并返回。
注意：cache不可以是Map，因為Map的鍵是使用===比較的，[1]！==[1]，因此即使傳入相同的對象或者數(shù)組，那么還是被存為不同的鍵。

const memorize = function(fn) {        //  X 錯誤示范
  const cache = new Map()
  return function(...args) {
    return cache.get(args) || cache.set(args, fn.apply(fn, args)).get(args)
  }
}
const add = function(a) {
  return a + 1
}
const adder = memorize(add)
adder(1)    // 2    cache: { [ 1 ] => 2 }
adder(1)    // 2    cache: { [ 1 ] => 2, [ 1 ] => 2 }
adder(2)    // 3    cache: { [ 1 ] => 2, [ 1 ] => 2, [ 2 ] => 3 }

本文是系列文章，可以相互參考印證，共同進步~

JS 抽象工廠模式
JS 工廠模式
JS 建造者模式
JS 原型模式
JS 單例模式
JS 回調模式
JS 外觀模式
JS 適配器模式
JS 利用高階函數(shù)實現(xiàn)函數(shù)緩存(備忘模式)
JS 狀態(tài)模式
JS 橋接模式
JS 觀察者模式

網上的帖子大多深淺不一，甚至有些前后矛盾，在下的文章都是學習過程中的總結，如果發(fā)現(xiàn)錯誤，歡迎留言指出~

參考： P78

PS：歡迎大家關注我的公眾號【前端下午茶】，一起加油吧~

另外可以加入「前端下午茶交流群」微信群，長按識別下面二維碼即可加我好友，備注加群，我拉你入群～

GPU云服務器云服務器高階函數(shù) 高階函數(shù)應用函數(shù)模式函數(shù)模式整理

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

轉載請注明本文地址：http://m.hztianpu.com/yun/92269.html

JS 原型模式

摘要：你可以使用像下面這樣的代碼為上面的例子來實現(xiàn)車輛模具是福特總結原型模式在里的使用簡直是無處不在，其它很多模式有很多也是基于的，這里大家要注意的依然是淺拷貝和深拷貝的問題，免得出現(xiàn)引用問題。 1. 簡介原型模式(Prototype pattern)，用原型實例指向創(chuàng)建對象的類，使用于創(chuàng)建新的對象的類的共享原型的屬性與方法。 2. 實現(xiàn) 對于原型模式，我們可以利用JavaScript特有...

Coding01 2019-08-22 11:17 評論0 收藏0
JS 橋接模式

摘要：簡介橋接模式將抽象部分與它的實現(xiàn)部分分離，使它們都可以獨立地變化。同時橋接模式也有自己的缺點大量的類將導致開發(fā)成本的增加，同時在性能方面可能也會有所減少。 1. 簡介橋接模式（Bridge）將抽象部分與它的實現(xiàn)部分分離，使它們都可以獨立地變化。其實就是函數(shù)的封裝，比如要對某個DOM元素添加color和backgroundColor，可以封裝個changeColor函數(shù)，這樣可以在多個...

chemzqm 2019-08-21 18:19 評論0 收藏0
JS 回調模式

摘要：對這種問題的解決方法是采用回調模式?？梢詫⒐?jié)點隱藏邏輯以回調函數(shù)的方式傳遞給并委托執(zhí)行檢查參數(shù)是否為可調用復雜邏輯，篩選出符合的元素那么現(xiàn)在回調函數(shù)可選，重構后加入回調函數(shù)參數(shù)的仍然可以像以前一樣使用，而不會破壞舊的原始代碼。 1. 回調示例如果有個模塊 findeNodes() ，任務是找到期望的 DOM 元素并使用 hide() 處理： function findNodes() ...

oliverhuang 2019-08-22 11:18 評論0 收藏0
JS 單例模式

摘要：但是如何在對構造函數(shù)使用操作符創(chuàng)建多個對象的時候僅獲取一個單例對象呢。單例的實例引用單例構造函數(shù)單例私有屬性和方法暴露出來的對象改進之前在構造函數(shù)中重寫自身會丟失所有在初始定義和重定義之間添加到其中的屬性。 1. 單例模式單例模式 (Singleton) 的實現(xiàn)在于保證一個特定類只有一個實例，第二次使用同一個類創(chuàng)建新對象的時候，應該得到與第一次創(chuàng)建對象完全相同的對象。當創(chuàng)建一個新對象...

姘存按 2019-08-22 11:18 評論0 收藏0
JS 狀態(tài)模式

摘要：簡介狀態(tài)模式允許一個對象在其內部狀態(tài)改變的時候改變它的行為，對象看起來似乎修改了它的類。狀態(tài)通常為一個或多個枚舉常量的表示。簡而言之，當遇到很多同級或者的時候，可以使用狀態(tài)模式來進行簡化。 1. 簡介狀態(tài)模式(State)允許一個對象在其內部狀態(tài)改變的時候改變它的行為，對象看起來似乎修改了它的類。其實就是用一個對象或者數(shù)組記錄一組狀態(tài)，每個狀態(tài)對應一個實現(xiàn)，實現(xiàn)的時候根據狀態(tài)挨個去運...

xingqiba 2019-08-22 11:22 評論0 收藏0