前言

創(chuàng)建一個純函數(shù)的緩存版本

主要用途：優(yōu)化性能——對于之前運算過一次的內(nèi)容，利用閉包原理，緩存起來，避免重復(fù)調(diào)用，造成性能的浪費

  /**
   * Create a cached version of a pure function.
   */
  function cached (fn) {
    var cache = Object.create(null);
    return (function cachedFn (str) {
      var hit = cache[str];
      return hit || (cache[str] = fn(str))
    })
  }

這一段的源碼很短，但是在源碼中使用了19處！這就顯得這個函數(shù)很重要了

參數(shù)解釋

傳入?yún)?shù)

fn：（函數(shù)類型）

用于執(zhí)行需要緩存的方法

str：字符串類型

傳入函數(shù)fn中的參數(shù)

返回參數(shù)

類型為：函數(shù)類型

源碼解釋

首先通過Object.create創(chuàng)建一個干凈的空對象出來

然后直接返回一個函數(shù)（cachedFn）

函數(shù)內(nèi)首先定義變量，通過傳入的參數(shù)str去訪問創(chuàng)建出來的cache對象

• 若hit擊中了目標(biāo)，即不為undefined——直接返回，不再調(diào)用函數(shù)
• 若未擊中，則訪問傳入的fn函數(shù)，并把函數(shù)返回值賦值給cache對象

實驗解釋

這樣可能比較抽象，我們直接做一個實驗，同樣直接在瀏覽器中做

這一次，我們直接在瀏覽器的源代碼中做——debug

function cached(fn) {
    var cache = Object.create(null)
    return(
        function cachedFn(str) {
            var hit = cache[str];
            return hit || (cache[str] = fn(str));
        }
    )
}
var capitalize = cached(function(str) {
    return str.charAt(0).toUpperCase() + str.slice(1);
})
console.log(capitalize("abc"),"第一次訪問")
console.log(capitalize("abc"),"第二次訪問")

直接打一個斷點，看看會發(fā)生什么

執(zhí)行第一次

在第一次運行時，發(fā)現(xiàn)cache是一個空的object，然后直接進(jìn)入了立即執(zhí)行函數(shù)cacheFn中

這里立即執(zhí)行函數(shù)的作用就是

創(chuàng)建新的作用域，隔離變量——于將var使用變?yōu)?code>let效果一致

str值為abc，也就是傳入?yún)?shù)fn中的參數(shù)

下一步執(zhí)行，當(dāng)然就是執(zhí)行fn函數(shù)了

我們可以看到這里的fn函數(shù)就是對應(yīng)capitalize中的function，將str的參數(shù)傳進(jìn)來

執(zhí)行的結(jié)果就是Abc

右邊執(zhí)行完成后，賦值給左側(cè)的cache[str]

這里的代碼可以翻譯成，或許更好理解

cache[str] = "Abc"

也就是說，這里相當(dāng)于通過方括號屬性訪問器，創(chuàng)建了一個不存在的屬性abc，對應(yīng)的值是fn返回的Abc

在右側(cè)監(jiān)視的cache也明顯的多出了一個屬性abc

執(zhí)行第二次

此時我們看見，cache此時是具有屬性abc的，因此hit的值不再是undefined

第二次時，很明顯的我們可以看見執(zhí)行過程，沒有再次調(diào)用fn函數(shù)，也就是說沒有調(diào)用capitalize中的函數(shù)，而是直接獲取的緩存。

從而也就做到了對性能的優(yōu)化。

源碼疑問

為什么cache是有效的，每次調(diào)用函數(shù)的時候不都創(chuàng)建了新的嗎？

這里其實使用的是閉包的特性。

在調(diào)用cached函數(shù)時，會在當(dāng)前函數(shù)創(chuàng)建一個cache對象

也就是說，其實cache對象是屬于當(dāng)前示例中的capitalize

這個我們可以直接在屬性中看出來

我們重新debug一次，這一次關(guān)注capitalize中的值

第一次執(zhí)行時

第二次執(zhí)行時

在運行完cache[str] = fn(str)后，發(fā)現(xiàn)的確這里的值增加了一個

因此，我們可以得出結(jié)論。

小結(jié)：

在每一次調(diào)用cached時，由于閉包函數(shù)的特性，使得cached中的變量值不會被清空，而且這個值是在對應(yīng)的處理方法中的。

因為cache對象是在內(nèi)部創(chuàng)建的，所以每次調(diào)用cached都將是不同的object

各自擁有獨立的緩存空間，而不是全局共用一個

到此這篇關(guān)于Vue源碼cached解析的文章就介紹到這了,更多相關(guān)Vue cached內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論