Javascript Memoizer浅析


Posted in Javascript onOctober 16, 2014

以下来自John Hann的实现,这段代码引起了我的注意,它用巧妙的方法把方法调用的结果缓存起来了。

代码解析:

// memoize: 使用memoization来缓存的通用方法 

// func: 要被缓存的方法 

// context: 方法执行上下文 

// Note: 方法必须是外部可访问的,参数是可字符序列化的 

function memoize (func, context) { 

    function memoizeArg (argPos) { //参数表示原始方法中参数的位置 

        var cache = {}; //这个缓存的key是参数,value是执行结果 

        return function () { //返回一个函数闭包 

            if (argPos == 0) { //第一个参数,如果参数在缓存的key中不存在,就执行原始函数并且存储执行结果 

                if (!(arguments[argPos] in cache)) { 

                    cache[arguments[argPos]] = func.apply(context, arguments); 

                } 

                return cache[arguments[argPos]]; 

            } 

            else { //不是第一个参数,如果参数在缓存的key中不存在,就递归执行memoizeArg方法,原始方法中参数的位置-1 

                if (!(arguments[argPos] in cache)) { 

                    cache[arguments[argPos]] = memoizeArg(argPos - 1); 

                } 

                return cache[arguments[argPos]].apply(this, arguments); 

            } 

        } 

    } 

    var arity = func.arity || func.length; //func参数的长度,javascript中用length属性,其它的用arity属性 

    return memoizeArg(arity - 1); //从最后一个参数开始递归 

}

使用:

var mem = memoize(func, this);   

alert(mem.call(this,1,1,2));   

alert(mem.call(this,2,1,2));   

alert(mem.call(this,3,1,3));   

alert(mem.call(this,2,2,4));

看似简单,再一看好像也并不易懂,可是如果能对闭包的使用比较熟悉的话,就很好理解了。经过上面几次mem.call的调用之后,形成的是一棵树,每个节点都是一个闭包,每个闭包内有一个cache,每个cache的key都是树分支:

Javascript Memoizer浅析

(注:上面图中的“结果”也是一个闭包,只不过argPos为0而已)

不过方法有诸多,比如limboy说:

function Memoize(fn){ 

    var cache = {}; 

    return function(){ 

        var key = []; 

        for( var i=0, l = arguments.length; i < l; i++ ) 

            key.push(arguments[i]); 

        if( !(key in cache) ) 

            cache[key] = fn.apply(this, arguments); 

        return cache[key]; 

    }; 

}

实现更简易,不过把参数push到一个数组内,再把数组当key,而key是只支持字符串型的,因此这点在使用上需要注意(比如一个对象tostring之后可能只看到”[object Object]“了),它的功能比上面那个要弱一些。

改进这一点也不难,把参数另立一个对象即可,而原cache对象和这个另立的参数对象使用一个ID关联起来:

function Memoize(fn){ 

    var cache = {}, args = {}; 

    return function(){ 

        for( var i=0, key = args.length; i < key; i++ ) { 

            if( equal( args[i], arguments ) ) 

                return cache[i]; 

        } 

        args[key] = arguments; 

        cache[key] = fn.apply(this, arguments); 

        return cache[key]; 

    }; 

}

还有一些其他的办法,都可以写成简洁的函数式方法。

Javascript 相关文章推荐
jQuery Ajax使用 全解析
Dec 15 Javascript
javascript面向对象入门基础详细介绍
Sep 05 Javascript
innerHTML与jquery里的html()区别介绍
Oct 12 Javascript
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
Apr 08 Javascript
你必须知道的Javascript知识点之&quot;this指针&quot;的应用
Apr 23 Javascript
javascript动态添加样式(行内式/嵌入式/外链式等规则)
Jun 24 Javascript
JavaScript编写推箱子游戏
Jul 07 Javascript
跟我学习javascript的undefined与null
Nov 17 Javascript
使用snowfall.jquery.js实现爱心满屏飞的效果
Jan 05 Javascript
轻量级JS Cookie插件js-cookie的使用方法
Mar 22 Javascript
vue3+typescript实现图片懒加载插件
Oct 26 Javascript
nuxt 页面路由配置,主页轮播组件开发操作
Nov 05 Javascript
让JavaScript和其它资源并发下载的方法
Oct 16 #Javascript
JavaScript实现继承的4种方法总结
Oct 16 #Javascript
JavaScript实现网页截图功能
Oct 16 #Javascript
JavaScript跨域方法汇总
Oct 16 #Javascript
js阻止事件追加的具体实现
Oct 15 #Javascript
用原生js做个简单的滑动效果的回到顶部
Oct 15 #Javascript
原生的html元素选择器类似jquery选择器
Oct 15 #Javascript
You might like
一个简单的自动发送邮件系统(一)
2006/10/09 PHP
PHPnow安装服务[apache_pn]失败的问题的解决方法
2010/09/10 PHP
解析:使用php mongodb扩展时 需要注意的事项
2013/06/18 PHP
Thinkphp+smarty+uploadify实现无刷新上传
2015/07/30 PHP
PHP中SESSION过期设置
2021/03/09 PHP
最短的IE判断代码
2011/03/13 Javascript
jQuery中绑定事件的命名空间详解
2011/04/05 Javascript
jQuery EasyUI API 中文文档 - Menu菜单
2011/10/03 Javascript
JS控件的生命周期介绍
2012/10/22 Javascript
探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行
2013/07/09 Javascript
IE与FireFox的JavaScript兼容问题解决办法
2013/12/31 Javascript
jQuery 仿百度输入标签插件附效果图
2014/07/04 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
2015/03/28 Javascript
js实现炫酷的左右轮播图
2017/01/18 Javascript
H5上传本地图片并预览功能
2017/05/08 Javascript
使用AngularJS对表单提交内容进行验证的操作方法
2017/07/12 Javascript
JS简单实现滑动加载数据的方法示例
2017/10/18 Javascript
使用async await 封装 axios的方法
2018/07/09 Javascript
JavaScript简易计算器制作
2020/01/17 Javascript
如何在Vue.JS中使用图标组件
2020/08/04 Javascript
TensorFlow saver指定变量的存取
2018/03/10 Python
python判断设备是否联网的方法
2018/06/29 Python
python中嵌套函数的实操步骤
2019/02/27 Python
简单瞅瞅Python vars()内置函数的实现
2019/09/27 Python
python matplotlib如何给图中的点加标签
2019/11/14 Python
Python配置pip国内镜像源的实现
2020/08/20 Python
python类共享变量操作
2020/09/03 Python
CSS3 text-shadow实现文字阴影效果
2016/02/24 HTML / CSS
英国排名第一的LED灯泡网站:LED Bulbs
2019/09/03 全球购物
应届护士求职信范文
2014/01/26 职场文书
入股协议书范本
2014/04/14 职场文书
街道党工委党的群众路线教育实践活动对照检查材料思想汇报
2014/10/05 职场文书
2015年基层党建工作汇报材料
2015/06/25 职场文书
React中的Context应用场景分析
2021/06/11 Javascript
浅谈python中的多态
2021/06/15 Python
Win11远程连接不上怎么办?Win11远程桌面用不了的解决方法
2022/08/05 数码科技