成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

hightopo / 1504人閱讀

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

1. 高階函數(shù)

高階函數(shù)就是那種輸入?yún)?shù)里面有一個(gè)或者多個(gè)函數(shù)，輸出也是函數(shù)的函數(shù)，這個(gè)在js里面主要是利用閉包實(shí)現(xiàn)的，最簡(jiǎn)單的就是經(jīng)常看到的在一個(gè)函數(shù)內(nèi)部輸出另一個(gè)函數(shù)，比如

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

這個(gè)主要是利用閉包來(lái)保持著作用域：

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

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

如果換一種寫法，比如：

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

這樣的話就會(huì)在之前運(yùn)算結(jié)果基礎(chǔ)上繼續(xù)運(yùn)算，意思就是這兩個(gè) adder 運(yùn)行的時(shí)候都是調(diào)用的同一個(gè) num

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

比如有個(gè)函數(shù)：

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

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

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ù)變成了字符串，并且把它當(dāng)做 cache 的 key，將 add 函數(shù)運(yùn)行的結(jié)果當(dāng)做 value 傳到了 cache 里面，這樣 memorize 的匿名函數(shù)運(yùn)行的時(shí)候會(huì)返回cache[_args]，如果cache[_args]不存在的話就返回fn.apply(fn,args)，把fn.apply(fn, arguments)賦值給cache[_args]并返回。
注意：cache不可以是Map，因?yàn)镸ap的鍵是使用===比較的，[1]！==[1]，因此即使傳入相同的對(duì)象或者數(shù)組，那么還是被存為不同的鍵。

const memorize = function(fn) {        //  X 錯(cuò)誤示范
  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 }

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

JS 抽象工廠模式


JS 工廠模式


JS 建造者模式


JS 原型模式


JS 單例模式


JS 回調(diào)模式


JS 外觀模式


JS 適配器模式


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


JS 狀態(tài)模式


JS 橋接模式


JS 觀察者模式

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

參考： P78

PS：歡迎大家關(guān)注我的公眾號(hào)【前端下午茶】，一起加油吧~

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/92269.html

相關(guān)文章

  • JS 原型模式

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

    Coding01 評(píng)論0 收藏0

  • JS 橋接模式

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

    chemzqm 評(píng)論0 收藏0

  • JS 回調(diào)模式

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

    oliverhuang 評(píng)論0 收藏0

  • JS 單例模式

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

    姘存按 評(píng)論0 收藏0

  • JS 狀態(tài)模式

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

    xingqiba 評(píng)論0 收藏0

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

0條評(píng)論

hightopo

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<