## 介紹 本篇主要是介紹Function方面使用的一些技巧（上篇），利用Function特性可以編寫出很多非常有意思的代碼，本篇主要包括：回調模式、配置對象、返回函數、分布程序、柯里化（Currying）。 ## 回調函數 在JavaScript中，當一個函數A作為另外一個函數B的其中一個參數時，則函數A稱為回調函數，即A可以在函數B的周期內執行（開始、中間、結束時均可）。 舉例來說，有一個函數用于生成node ~~~ var complexComputation = function () { /* 內部處理，并返回一個node*/}; ~~~ 有一個findNodes函數聲明用于查找所有的節點，然后通過callback回調進行執行代碼。 ~~~ var findNodes = function (callback) { var nodes = []; var node = complexComputation(); // 如果回調函數可用，則執行它 if (typeof callback === "function") { callback(node); } nodes.push(node); return nodes; }; ~~~ 關于callback的定義，我們可以事先定義好來用： ~~~ // 定義callback var hide = function (node) { node.style.display = "none"; }; // 查找node，然后隱藏所有的node var hiddenNodes = findNodes(hide); ~~~ 也可以直接在調用的時候使用匿名定義，如下： ~~~ // 使用匿名函數定義callback var blockNodes = findNodes(function (node) { node.style.display = 'block'; }); ~~~ 我們平時用的最多的，估計就數jQuery的ajax方法的調用了，通過在done/faild上定義callback，以便在ajax調用成功或者失敗的時候做進一步處理，代碼如下(本代碼基于jquery1.8版)： ~~~ var menuId = $("ul.nav").first().attr("id"); var request = $.ajax({ url: "script.php", type: "POST", data: {id : menuId}, dataType: "html" }); //調用成功時的回調處理 request.done(function(msg) { $("#log").html( msg ); }); //調用失敗時的回調處理 request.fail(function(jqXHR, textStatus) { alert( "Request failed: " + textStatus ); }); ~~~ ## 配置對象 如果一個函數（或方法）的參數只有一個參數，并且參數為對象字面量，我們則稱這種模式為配置對象模式。例如，如下代碼： ~~~ var conf = { username:"shichuan", first:"Chuan", last:"Shi" }; addPerson(conf); ~~~ 則在addPerson內部，就可以隨意使用conf的值了，一般用于初始化工作，例如jquery里的ajaxSetup也就是這種方式來實現的： ~~~ // 事先設置好初始值 $.ajaxSetup({ url: "/xmlhttp/", global: false, type: "POST" }); // 然后再調用 $.ajax({ data: myData }); ~~~ 另外，很多jquery的插件也有這種形式的傳參，只不過也可以不傳，不傳的時候則就使用默認值了。 ## 返回函數 返回函數，則是指在一個函數的返回值為另外一個函數，或者根據特定的條件靈活創建的新函數，示例代碼如下： ~~~ var setup = function () { console.log(1); return function () { console.log(2); }; }; // 調用setup 函數 var my = setup(); // 輸出 1 my(); // 輸出 2 // 或者直接調用也可 setup()(); ~~~ 或者你可以利用閉包的特性，在setup函數里記錄一個私有的計數器數字，通過每次調用來增加計數器，代碼如下： ~~~ var setup = function () { var count = 0; return function () { return ++count; }; }; // 用法 var next = setup(); next(); // 返回 1 next(); // 返回 2 next(); // 返回 3 ~~~ ## 偏應用 這里的偏應用，其實是將參數的傳入工作分開進行，在有的時候一系列的操作可能會有某一個或幾個參數始終完全一樣，那么我們就可以先定義一個偏函數，然后再去執行這個函數（執行時傳入剩余的不同參數）。 舉個例子，代碼如下： ~~~ var partialAny = (function (aps) { // 該函數是你們自執行函數表達式的結果，并且賦值給了partialAny變量 function func(fn) { var argsOrig = aps.call(arguments, 1); return function () { var args = [], argsPartial = aps.call(arguments), i = 0; // 變量所有的原始參數集， // 如果參數是partialAny._ 占位符，則使用下一個函數參數對應的值 // 否則使用原始參數里的值 for (; i < argsOrig.length; i++) { args[i] = argsOrig[i] === func._ ? argsPartial.shift() : argsOrig[i]; } // 如果有任何多余的參數，則添加到尾部 return fn.apply(this, args.concat(argsPartial)); }; } // 用于占位符設置 func._ = {}; return func; })(Array.prototype.slice); ~~~ 使用方式如下： ~~~ // 定義處理函數 function hex(r, g, b) { return '#' + r + g + b; } //定義偏函數, 將hex的第一個參數r作為不變的參數值ff var redMax = partialAny(hex, 'ff', partialAny._, partialAny._); // 新函數redMax的調用方式如下，只需要傳入2個參數了： console.log(redMax('11', '22')); // "#ff1122" ~~~ 如果覺得partialAny._太長，可以用__代替哦。 ~~~ var __ = partialAny._; var greenMax = partialAny(hex, __, 'ff'); console.log(greenMax('33', '44')); var blueMax = partialAny(hex, __, __, 'ff'); console.log(blueMax('55', '66')); var magentaMax = partialAny(hex, 'ff', __, 'ff'); console.log(magentaMax('77')); ~~~ 這樣使用，就簡潔多了吧。 ## Currying Currying是函數式編程的一個特性，將多個參數的處理轉化成單個參數的處理，類似鏈式調用。 舉一個簡單的add函數的例子： ~~~ function add(x, y) { var oldx = x, oldy = y; if (typeof oldy === "undefined") { // partial return function (newy) { return oldx + newy; } } return x + y; } ~~~ 這樣調用方式就可以有多種了，比如： ~~~ // 測試 typeof add(5); // "function" add(3)(4); // 7 // 也可以這樣調用 var add2000 = add(2000); add2000(10); // 2010 ~~~ 接下來，我們來定義一個比較通用的currying函數： ~~~ // 第一個參數為要應用的function，第二個參數是需要傳入的最少參數個數 function curry(func, minArgs) { if (minArgs == undefined) { minArgs = 1; } function funcWithArgsFrozen(frozenargs) { return function () { // 優化處理，如果調用時沒有參數，返回該函數本身 var args = Array.prototype.slice.call(arguments); var newArgs = frozenargs.concat(args); if (newArgs.length >= minArgs) { return func.apply(this, newArgs); } else { return funcWithArgsFrozen(newArgs); } }; } return funcWithArgsFrozen([]); } ~~~ 這樣，我們就可以隨意定義我們的業務行為了，比如定義加法： ~~~ var plus = curry(function () { var result = 0; for (var i = 0; i < arguments.length; ++i) { result += arguments[i]; } return result; }, 2); ~~~ 使用方式，真實多種多樣哇。 ~~~ plus(3, 2) // 正常調用 plus(3) // 偏應用，返回一個函數（返回值為3+參數值） plus(3)(2) // 完整應用（返回5） plus()(3)()()(2) // 返回 5 plus(3, 2, 4, 5) // 可以接收多個參數 plus(3)(2, 3, 5) // 同理 ~~~ 如下是減法的例子 ~~~ var minus = curry(function (x) { var result = x; for (var i = 1; i < arguments.length; ++i) { result -= arguments[i]; } return result; }, 2); ~~~ 或者如果你想交換參數的順序，你可以這樣定義 ~~~ var flip = curry(function (func) { return curry(function (a, b) { return func(b, a); }, 2); }); ~~~ 更多資料，可以參考如下地址： [http://www.cnblogs.com/rubylouvre/archive/2009/11/09/1598761.html](http://www.cnblogs.com/rubylouvre/archive/2009/11/09/1598761.html) [http://www.cnblogs.com/sanshi/archive/2009/02/17/javascript_currying.html](http://www.cnblogs.com/sanshi/archive/2009/02/17/javascript_currying.html) ## 總結 JavaScript里的Function有很多特殊的功效，可以利用閉包以及arguments參數特性實現很多不同的技巧，下一篇我們將繼續介紹利用Function進行初始化的技巧。 參考地址：http://shichuan.github.com/javascript-patterns/#function-patterns