脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → Javascript函数缓存

Javascript函数缓存的实现及应用场景

 更新时间：2023年12月11日 10:33:56   作者：前端青山  
Javascript函数缓存是一种提高网页性能的重要技术,通过将函数结果存储在缓存中,避免重复计算,从而提高页面加载速度和响应速度,本文主要介绍了Javascript函数缓存的实现及应用场景,具有一定的参考价值,感兴趣的可以了解一下

一、是什么

函数缓存，就是将函数运算过的结果进行缓存

本质上就是用空间（缓存存储）换时间（计算过程）

常用于缓存数据计算结果和缓存对象

const add = (a,b) => a+b;
const calc = memoize(add); // 函数缓存
calc(10,20);// 30
calc(10,20);// 30 缓存

缓存只是一个临时的数据存储，它保存数据，以便将来对该数据的请求能够更快地得到处理

二、如何实现

实现函数缓存主要依靠闭包、柯里化、高阶函数，这里再简单复习下：

闭包

闭包可以理解成，函数 + 函数体内可访问的变量总和

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

add函数本身，以及其内部可访问的变量，即 a = 1，这两个组合在⼀起就形成了闭包

柯里化

把接受多个参数的函数转换成接受一个单一参数的函数

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

将一个二元函数拆分成两个一元函数

高阶函数

通过接收其他函数作为参数或返回其他函数的函数

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

函数 foo 如何返回另一个函数 bar，baz 现在持有对 foo 中定义的bar 函数的引用。由于闭包特性，a的值能够得到

下面再看看如何实现函数缓存，实现原理也很简单，把参数和对应的结果数据存在一个对象中，调用时判断参数对应的数据是否存在，存在就返回对应的结果数据，否则就返回计算结果

如下所示

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]
  }
}

调用方式也很简单

const calc = memoize(add);
const num1 = calc(100,200)
const num2 = calc(100,200) // 缓存得到的结果

过程分析：

  • 在当前函数作用域定义了一个空对象，用于缓存运行结果

  • 运用柯里化返回一个函数，返回的函数由于闭包特性，可以访问到cache

  • 然后判断输入参数是不是在cache的中。如果已经存在，直接返回cache的内容，如果没有存在，使用函数func对输入参数求值，然后把结果存储在cache中

三、应用场景

虽然使用缓存效率是非常高的，但并不是所有场景都适用，因此千万不要极端的将所有函数都添加缓存

以下几种情况下，适合使用缓存：

  • 对于昂贵的函数调用，执行复杂计算的函数

  • 对于具有有限且高度重复输入范围的函数

  • 对于具有重复输入值的递归函数

  • 对于纯函数，即每次使用特定输入调用时返回相同输出的函数

new操作符具体干了什么？

一、是什么

在JavaScript中，new操作符用于创建一个给定构造函数的实例对象

例子

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 通过构造函数 Person 创建出来的实例可以访问到构造函数中的属性

  • new 通过构造函数 Person 创建出来的实例可以访问到构造函数原型链中的属性（即实例与构造函数通过原型链连接了起来）

现在在构建函数中显式加上返回值，并且这个返回值是一个原始类型

function Test(name) {
  this.name = name
  return 1
}
const t = new Test('xxx')
console.log(t.name) // 'xxx'
可以发现，构造函数中返回一个原始值，然而这个返回值并没有作用

下面在构造函数中返回一个对象

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'

从上面可以发现，构造函数如果返回值为一个对象，那么这个返回值会被正常使用

二、流程

从上面介绍中，我们可以看到new关键字主要做了以下的工作：

  • 创建一个新的对象obj

  • 将对象与构建函数通过原型链连接起来

  • 将构建函数中的this绑定到新建的对象obj上

  • 根据构建函数返回类型作判断，如果是原始值则被忽略，如果是返回对象，需要正常处理

举个例子：

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操作符

现在我们已经清楚地掌握了new的执行过程

那么我们就动手来实现一下new

function mynew(Func, ...args) {
    // 1.创建一个新对象
    const obj = {}
    // 2.新对象原型指向构造函数原型对象
    obj.__proto__ = Func.prototype
    // 3.将构建函数的this指向新对象
    let result = Func.apply(obj, args)
    // 4.根据返回值判断
    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

可以发现，代码虽然很短，但是能够模拟实现new

到此这篇关于Javascript函数缓存的实现及应用场景的文章就介绍到这了,更多相关Javascript函数缓存内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 基于Bootstrap使用jQuery实现输入框组input-group的添加与删除

    基于Bootstrap使用jQuery实现输入框组input-group的添加与删除

    这篇文章主要介绍了基于Bootstrap使用jQuery实现输入框组input-group的添加与删除的相关资料,需要的朋友可以参考下
    2016-05-05
  • JS代码判断IE6,IE7,IE8,IE9的函数代码

    JS代码判断IE6,IE7,IE8,IE9的函数代码

    JS代码判断浏览器版本,支持IE6,IE7,IE8,IE9！做网页有时候会用到JS检测IE的版本，下面是检测Microsoft Internet Explorer版本的三种代码
    2013-08-08
  • layui实现点击按钮给table添加一行

    layui实现点击按钮给table添加一行

    想实现点击按钮在表格添加一行的功能，但发现layui并未集成该工具栏，因此，需要自己手动添加这个功能；这篇文章主要介绍了layui点击按钮给table添加一行,需要的朋友可以参考下
    2018-08-08
  • 利用ECharts.js画K线图的方法示例

    利用ECharts.js画K线图的方法示例

    这篇文章主要给大家介绍了关于利用ECharts.js画K线图的相关资料,，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
    2018-01-01
  • 原生js+canvas实现验证码

    原生js+canvas实现验证码

    这篇文章主要为大家详细介绍了原生js+canvas实现验证码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-11-11
  • JavaScript中变量提升机制示例详解

    JavaScript中变量提升机制示例详解

    这篇文章主要给大家介绍了关于JavaScript中变量提升机制的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用JavaScript具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-12-12
  • 使用Chrome调试JavaScript的断点设置和调试技巧

    使用Chrome调试JavaScript的断点设置和调试技巧

    这篇文章主要介绍了使用Chrome调试JavaScript的断点设置和调试技巧,需要的朋友可以参考下
    2014-12-12
  • 基于JS实现网页中的选项卡（两种方法）

    基于JS实现网页中的选项卡（两种方法）

    这篇文章主要介绍了用js语句实现网页中的选项卡（两种方法），非常不错，具有参考借鉴价值,需要的朋友可以参考下
    2017-06-06
  • JavaScript代码里的判断小结

    JavaScript代码里的判断小结

    在JavaScript代码中，多多少少会有判断语句。业务越复杂，逻辑就越复杂，判断就越多。今天给大家整理下JavaScript中代码里常会用到的那些判断，有需要的可以参考借鉴。
    2016-08-08
  • 改变layer confirm弹窗按钮的颜色方法

    改变layer confirm弹窗按钮的颜色方法

    今天小编就为大家分享一篇改变layer confirm弹窗按钮的颜色方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09

最新评论