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 相关文章推荐
JavaScript中也使用$美元符号来代替document.getElementById
Jun 19 Javascript
input按钮的事件处理大全
Dec 10 Javascript
jquery读取xml文件实现省市县三级联动的方法
May 29 Javascript
javascript中数组方法汇总
Jul 07 Javascript
javascript顺序加载图片的方法
Jul 18 Javascript
jQuery给元素添加样式的方法详解
Dec 30 Javascript
echart简介_动力节点Java学院整理
Aug 11 Javascript
微信小程序实现折叠面板
Jan 31 Javascript
JS实现全屏预览F11功能的示例代码
Jul 23 Javascript
vue+vuex+json-seiver实现数据展示+分页功能
Apr 11 Javascript
vue使用高德地图根据坐标定位点的实现代码
Aug 22 Javascript
vue 源码解析之虚拟Dom-render
Aug 26 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
为php4加入动态flash文件的生成的支持
2006/10/09 PHP
PHP函数篇详解十进制、二进制、八进制和十六进制转换函数说明
2011/12/05 PHP
简单的自定义php模板引擎
2016/08/26 PHP
PHP中empty,isset,is_null用法和区别
2017/02/19 PHP
PHP实现腾讯短网址生成api接口实例
2020/12/08 PHP
javascript Excel操作知识点
2009/04/24 Javascript
jquery 弹出层实现代码
2009/10/30 Javascript
基于jquery的direction图片渐变动画效果
2010/05/24 Javascript
鼠标右击事件代码(asp.net后台)
2011/01/27 Javascript
javascript学习(一)构建自己的JS库
2013/01/02 Javascript
简单介绍JavaScript的变量和数据类型
2015/06/03 Javascript
浅谈javascript函数式编程
2015/09/06 Javascript
Java Mybatis框架入门基础教程
2015/09/21 Javascript
关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法
2016/06/13 Javascript
Bootstrap模态框禁用空白处点击关闭
2016/10/20 Javascript
JS克隆,属性,数组,对象,函数实例分析
2016/11/26 Javascript
解决webpack+Vue引入iView找不到字体文件的问题
2018/09/28 Javascript
原生js实现日期选择插件
2020/05/21 Javascript
Javascript表单序列化原理及实现代码详解
2020/10/30 Javascript
[01:52]2014DOTA2西雅图邀请赛 V社开大会你不知道的小秘密
2014/07/08 DOTA
python基础教程之数字处理(math)模块详解
2014/03/25 Python
Python用imghdr模块识别图片格式实例解析
2018/01/11 Python
Pycharm 创建 Django admin 用户名和密码的实例
2018/05/30 Python
Django 自定义404 500等错误页面的实现
2020/03/08 Python
Sephora丝芙兰印尼官方网站:购买化妆品和护肤品
2018/07/02 全球购物
女士鞋子、包包和服装在线,第一款10美元:ShoeDazzle
2019/07/26 全球购物
飞利信loadrunner和软件测试笔试题
2012/09/22 面试题
社区戒毒工作方案
2014/06/04 职场文书
纪检干部个人对照检查材料
2014/09/23 职场文书
销售简历自我评价怎么写
2014/09/26 职场文书
党员批评与自我批评材料
2014/10/14 职场文书
介绍信样本
2015/01/31 职场文书
保卫工作个人总结
2015/03/03 职场文书
党支部考察意见范文
2015/06/02 职场文书
CSS3常见动画的实现方式
2021/04/14 HTML / CSS
浅谈mysql增加索引不生效的几种情况
2021/06/23 MySQL