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 相关文章推荐
JS代码格式化和语法着色V2
Oct 14 Javascript
JQuery Tips(2) 关于$()包装集你不知道的
Dec 14 Javascript
jquery中获取select选中值的代码
Jun 27 Javascript
Html5的placeholder属性(IE兼容)实现代码
Aug 30 Javascript
详解Javascript 装载和执行
Nov 17 Javascript
jQuery实现自定义下拉列表
Jan 05 Javascript
jQuery插件jquery-barcode实现条码打印的方法
Nov 25 Javascript
JavaScript DOM节点操作方法总结
Aug 23 Javascript
js实现下一页页码效果
Mar 07 Javascript
带你快速理解javascript中的事件模型
Aug 14 Javascript
微信小程序webview与h5通过postMessage实现实时通讯的实现
Aug 20 Javascript
微信小程序 flexbox layout快速实现基本布局的解决方案
Mar 24 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
配置支持SSI
2006/11/25 PHP
PHP开发中常用的三个表单验证函数使用小结
2010/03/03 PHP
php上传图片存入数据库示例分享
2014/03/11 PHP
PHP房贷计算器实例代码,等额本息,等额本金
2017/04/01 PHP
jquery imgareaselect 使用利用js与程序结合实现图片剪切
2009/07/30 Javascript
JavaScript中json使用自己总结
2013/08/13 Javascript
jquery日历控件实现方法分享
2014/03/07 Javascript
jQuery的cookie插件实现保存用户登陆信息
2014/04/15 Javascript
实例详解jQuery结合GridView控件的使用方法
2016/01/04 Javascript
JQuery中解决重复动画的方法
2016/10/17 Javascript
js css自定义分页效果
2017/02/24 Javascript
微信小程序 功能函数小结(手机号验证*、密码验证*、获取验证码*)
2017/12/08 Javascript
JavaScript中的事件与异常捕获详析
2019/02/24 Javascript
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
2019/03/06 Javascript
vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法
2019/11/05 Javascript
Vue退出登录时清空缓存的实现
2019/11/12 Javascript
微信小程序实现锚点功能
2019/11/20 Javascript
JavaScript实现拖拽盒子效果
2020/02/06 Javascript
Python时间戳与时间字符串互相转换实例代码
2013/11/28 Python
Python爬虫框架scrapy实现downloader_middleware设置proxy代理功能示例
2018/08/04 Python
Python超越函数积分运算以及绘图实现代码
2019/11/20 Python
关于pytorch中全连接神经网络搭建两种模式详解
2020/01/14 Python
python实现坦克大战
2020/04/24 Python
Python实现疫情通定时自动填写功能(附代码)
2020/05/27 Python
python实现录音功能(可随时停止录音)
2020/10/26 Python
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
2014/06/23 HTML / CSS
西班牙电子产品购物网站:Electronicamente
2018/07/26 全球购物
迟到检讨书1000字
2014/01/15 职场文书
技校毕业生个人学习的自我评价
2014/02/21 职场文书
平面设计专业大学生职业规划书
2014/03/12 职场文书
教师新年寄语
2014/04/03 职场文书
网络工程专业大学生求职信
2014/10/01 职场文书
颐和园英文导游词
2015/01/30 职场文书
三好学生个人总结
2015/02/15 职场文书
安全生产先进个人总结
2015/02/15 职场文书
2016八一建军节慰问信
2015/11/30 职场文书