快捷導(dǎo)航

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

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

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

一、是什么

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

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

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

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

緩存只是一個(gè)臨時(shí)的數(shù)據(jù)存儲(chǔ)，它保存數(shù)據(jù)，以便將來(lái)對(duì)該數(shù)據(jù)的請(qǐng)求能夠更快地得到處理

二、如何實(shí)現(xiàn)

實(shí)現(xiàn)函數(shù)緩存主要依靠閉包、柯里化、高階函數(shù)，這里再簡(jiǎn)單復(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，這兩個(gè)組合在?起就形成了閉包

柯里化

把接受多個(gè)參數(shù)的函數(shù)轉(zhuǎn)換成接受一個(gè)單一參數(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

將一個(gè)二元函數(shù)拆分成兩個(gè)一元函數(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 如何返回另一個(gè)函數(shù) bar，baz 現(xiàn)在持有對(duì) foo 中定義的bar 函數(shù)的引用。由于閉包特性，a的值能夠得到

下面再看看如何實(shí)現(xiàn)函數(shù)緩存，實(shí)現(xiàn)原理也很簡(jiǎn)單，把參數(shù)和對(duì)應(yīng)的結(jié)果數(shù)據(jù)存在一個(gè)對(duì)象中，調(diào)用時(shí)判斷參數(shù)對(duì)應(yīng)的數(shù)據(jù)是否存在，存在就返回對(duì)應(yīng)的結(jié)果數(shù)據(jù)，否則就返回計(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)用方式也很簡(jiǎn)單

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

過程分析：

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

三、應(yīng)用場(chǎng)景

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

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

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

new操作符具體干了什么？

一、是什么

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

例子

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)建出來(lái)的實(shí)例可以訪問到構(gòu)造函數(shù)中的屬性
new 通過構(gòu)造函數(shù) Person 創(chuàng)建出來(lái)的實(shí)例可以訪問到構(gòu)造函數(shù)原型鏈中的屬性（即實(shí)例與構(gòu)造函數(shù)通過原型鏈連接了起來(lái)）

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

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è)原始值，然而這個(gè)返回值并沒有作用

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

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ù)如果返回值為一個(gè)對(duì)象，那么這個(gè)返回值會(huì)被正常使用

二、流程

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

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

舉個(gè)例子：

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í)行過程

那么我們就動(dòng)手來(lái)實(shí)現(xiàn)一下new

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

測(cè)試一下

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)，代碼雖然很短，但是能夠模擬實(shí)現(xiàn)new

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

您可能感興趣的文章: