快捷導(dǎo)航

Javascript函數(shù)緩存的實現(xiàn)及應(yīng)用場景

更新時間：2023年12月11日 10:33:56 作者：前端青山

Javascript函數(shù)緩存是一種提高網(wǎng)頁性能的重要技術(shù),通過將函數(shù)結(jié)果存儲在緩存中,避免重復(fù)計算,從而提高頁面加載速度和響應(yīng)速度,本文主要介紹了Javascript函數(shù)緩存的實現(xiàn)及應(yīng)用場景,具有一定的參考價值,感興趣的可以了解一下

一、是什么

函數(shù)緩存，就是將函數(shù)運算過的結(jié)果進行緩存

本質(zhì)上就是用空間（緩存存儲）換時間（計算過程）

常用于緩存數(shù)據(jù)計算結(jié)果和緩存對象

const add = (a,b) => a+b;
const calc = memoize(add); // 函數(shù)緩存
calc(10,20);// 30
calc(10,20);// 30 緩存

緩存只是一個臨時的數(shù)據(jù)存儲，它保存數(shù)據(jù)，以便將來對該數(shù)據(jù)的請求能夠更快地得到處理

二、如何實現(xiàn)

實現(xiàn)函數(shù)緩存主要依靠閉包、柯里化、高階函數(shù)，這里再簡單復(fù)習(xí)下：

閉包

閉包可以理解成，函數(shù) + 函數(shù)體內(nèi)可訪問的變量總和

(function() {
    var a = 1;
    function add() {
        const b = 2
        let sum = b + a
        console.log(sum); // 3
    }
    add()
})()

add函數(shù)本身，以及其內(nèi)部可訪問的變量，即 a = 1，這兩個組合在?起就形成了閉包

柯里化

把接受多個參數(shù)的函數(shù)轉(zhuǎn)換成接受一個單一參數(shù)的函數(shù)

// 非函數(shù)柯里化
var add = function (x,y) {
    return x+y;
}
add(3,4) //7
?
// 函數(shù)柯里化
var add2 = function (x) {
    //**返回函數(shù)**
    return function (y) {
        return x+y;
    }
}
add2(3)(4) //7

將一個二元函數(shù)拆分成兩個一元函數(shù)

高階函數(shù)

通過接收其他函數(shù)作為參數(shù)或返回其他函數(shù)的函數(shù)

function foo(){
  var a = 2;
?
  function bar() {
    console.log(a);
  }
  return bar;
}
var baz = foo();
baz();//2

函數(shù) foo 如何返回另一個函數(shù) bar，baz 現(xiàn)在持有對 foo 中定義的bar 函數(shù)的引用。由于閉包特性，a的值能夠得到

下面再看看如何實現(xiàn)函數(shù)緩存，實現(xiàn)原理也很簡單，把參數(shù)和對應(yīng)的結(jié)果數(shù)據(jù)存在一個對象中，調(diào)用時判斷參數(shù)對應(yīng)的數(shù)據(jù)是否存在，存在就返回對應(yīng)的結(jié)果數(shù)據(jù)，否則就返回計算結(jié)果

如下所示

const memoize = function (func, content) {
  let cache = Object.create(null)
  content = content || this
  return (...key) => {
    if (!cache[key]) {
      cache[key] = func.apply(content, key)
    }
    return cache[key]
  }
}

調(diào)用方式也很簡單

const calc = memoize(add);
const num1 = calc(100,200)
const num2 = calc(100,200) // 緩存得到的結(jié)果

過程分析：

在當(dāng)前函數(shù)作用域定義了一個空對象，用于緩存運行結(jié)果
運用柯里化返回一個函數(shù)，返回的函數(shù)由于閉包特性，可以訪問到cache
然后判斷輸入?yún)?shù)是不是在cache的中。如果已經(jīng)存在，直接返回cache的內(nèi)容，如果沒有存在，使用函數(shù)func對輸入?yún)?shù)求值，然后把結(jié)果存儲在cache中

三、應(yīng)用場景

雖然使用緩存效率是非常高的，但并不是所有場景都適用，因此千萬不要極端的將所有函數(shù)都添加緩存

以下幾種情況下，適合使用緩存：

對于昂貴的函數(shù)調(diào)用，執(zhí)行復(fù)雜計算的函數(shù)
對于具有有限且高度重復(fù)輸入范圍的函數(shù)
對于具有重復(fù)輸入值的遞歸函數(shù)
對于純函數(shù)，即每次使用特定輸入調(diào)用時返回相同輸出的函數(shù)

new操作符具體干了什么？

一、是什么

在JavaScript中，new操作符用于創(chuàng)建一個給定構(gòu)造函數(shù)的實例對象

例子

function Person(name, age){
    this.name = name;
    this.age = age;
}
Person.prototype.sayName = function () {
    console.log(this.name)
}
const person1 = new Person('Tom', 20)
console.log(person1)  // Person {name: "Tom", age: 20}
t.sayName() // 'Tom'

從上面可以看到：

new 通過構(gòu)造函數(shù) Person 創(chuàng)建出來的實例可以訪問到構(gòu)造函數(shù)中的屬性
new 通過構(gòu)造函數(shù) Person 創(chuàng)建出來的實例可以訪問到構(gòu)造函數(shù)原型鏈中的屬性（即實例與構(gòu)造函數(shù)通過原型鏈連接了起來）

現(xiàn)在在構(gòu)建函數(shù)中顯式加上返回值，并且這個返回值是一個原始類型

function Test(name) {
  this.name = name
  return 1
}
const t = new Test('xxx')
console.log(t.name) // 'xxx'
可以發(fā)現(xiàn)，構(gòu)造函數(shù)中返回一個原始值，然而這個返回值并沒有作用

下面在構(gòu)造函數(shù)中返回一個對象

function Test(name) {
  this.name = name
  console.log(this) // Test { name: 'xxx' }
  return { age: 26 }
}
const t = new Test('xxx')
console.log(t) // { age: 26 }
console.log(t.name) // 'undefined'

從上面可以發(fā)現(xiàn)，構(gòu)造函數(shù)如果返回值為一個對象，那么這個返回值會被正常使用

二、流程

從上面介紹中，我們可以看到new關(guān)鍵字主要做了以下的工作：

創(chuàng)建一個新的對象obj
將對象與構(gòu)建函數(shù)通過原型鏈連接起來
將構(gòu)建函數(shù)中的this綁定到新建的對象obj上
根據(jù)構(gòu)建函數(shù)返回類型作判斷，如果是原始值則被忽略，如果是返回對象，需要正常處理

舉個例子：

function Person(name, age){
    this.name = name;
    this.age = age;
}
const person1 = new Person('Tom', 20)
console.log(person1)  // Person {name: "Tom", age: 20}
t.sayName() // 'Tom'

三、手寫new操作符

現(xiàn)在我們已經(jīng)清楚地掌握了new的執(zhí)行過程

那么我們就動手來實現(xiàn)一下new

function mynew(Func, ...args) {
    // 1.創(chuàng)建一個新對象
    const obj = {}
    // 2.新對象原型指向構(gòu)造函數(shù)原型對象
    obj.__proto__ = Func.prototype
    // 3.將構(gòu)建函數(shù)的this指向新對象
    let result = Func.apply(obj, args)
    // 4.根據(jù)返回值判斷
    return result instanceof Object ? result : obj
}

測試一下

function mynew(func, ...args) {
    const obj = {}
    obj.__proto__ = func.prototype
    let result = func.apply(obj, args)
    return result instanceof Object ? result : obj
}
function Person(name, age) {
    this.name = name;
    this.age = age;
}
Person.prototype.say = function () {
    console.log(this.name)
}
?
let p = mynew(Person, "huihui", 123)
console.log(p) // Person {name: "huihui", age: 123}
p.say() // huihui

可以發(fā)現(xiàn)，代碼雖然很短，但是能夠模擬實現(xiàn)new

到此這篇關(guān)于Javascript函數(shù)緩存的實現(xiàn)及應(yīng)用場景的文章就介紹到這了,更多相關(guān)Javascript函數(shù)緩存內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: