Javascript Memoizer淺析

更新時(shí)間：2014年10月16日 09:20:37 作者：四火

這篇文章主要介紹了Javascript Memoizer淺析,Memoizer貌似是一種緩存方法調(diào)用結(jié)果的功能,小編也沒有太懂,需要的朋友參考下吧

以下來自John Hann的實(shí)現(xiàn)，這段代碼引起了我的注意，它用巧妙的方法把方法調(diào)用的結(jié)果緩存起來了。

代碼解析：

// memoize: 使用memoization來緩存的通用方法 

// func: 要被緩存的方法 

// context: 方法執(zhí)行上下文 

// Note: 方法必須是外部可訪問的，參數(shù)是可字符序列化的 

function memoize (func, context) { 

    function memoizeArg (argPos) { //參數(shù)表示原始方法中參數(shù)的位置 

        var cache = {}; //這個(gè)緩存的key是參數(shù)，value是執(zhí)行結(jié)果 

        return function () { //返回一個(gè)函數(shù)閉包 

            if (argPos == 0) { //第一個(gè)參數(shù)，如果參數(shù)在緩存的key中不存在，就執(zhí)行原始函數(shù)并且存儲(chǔ)執(zhí)行結(jié)果 

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

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

                } 

                return cache[arguments[argPos]]; 

            } 

            else { //不是第一個(gè)參數(shù)，如果參數(shù)在緩存的key中不存在，就遞歸執(zhí)行memoizeArg方法，原始方法中參數(shù)的位置-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參數(shù)的長度，javascript中用length屬性，其它的用arity屬性 

    return memoizeArg(arity - 1); //從最后一個(gè)參數(shù)開始遞歸 

}

使用：

復(fù)制代碼代碼如下:

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));

看似簡單，再一看好像也并不易懂，可是如果能對(duì)閉包的使用比較熟悉的話，就很好理解了。經(jīng)過上面幾次mem.call的調(diào)用之后，形成的是一棵樹，每個(gè)節(jié)點(diǎn)都是一個(gè)閉包，每個(gè)閉包內(nèi)有一個(gè)cache，每個(gè)cache的key都是樹分支：

（注：上面圖中的“結(jié)果”也是一個(gè)閉包，只不過argPos為0而已）

不過方法有諸多，比如limboy說：

復(fù)制代碼代碼如下:

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

    }; 

}

實(shí)現(xiàn)更簡易，不過把參數(shù)push到一個(gè)數(shù)組內(nèi)，再把數(shù)組當(dāng)key，而key是只支持字符串型的，因此這點(diǎn)在使用上需要注意（比如一個(gè)對(duì)象tostring之后可能只看到”[object Object]“了），它的功能比上面那個(gè)要弱一些。

改進(jìn)這一點(diǎn)也不難，把參數(shù)另立一個(gè)對(duì)象即可，而原cache對(duì)象和這個(gè)另立的參數(shù)對(duì)象使用一個(gè)ID關(guān)聯(lián)起來：

復(fù)制代碼代碼如下:

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

    }; 

}

還有一些其他的辦法，都可以寫成簡潔的函數(shù)式方法。