【轉】詳解JS函數柯里化

時間 2019-11-12

原文原文鏈接

第一次看到柯里化這個詞的時候，仍是在看一篇算法相關的博客提到把函數柯里化，那時一看這個詞就感受很高端，實際上當你瞭解了後才發現其實就是高階函數的一個特殊用法。果真是無論做用怎麼樣都要有個高端的名字纔有用。html

首先看看柯里化究竟是什麼？

維基百科上說道：柯里化，英語：Currying(果真是滿滿的英譯中的既視感)，是把接受多個參數的函數變換成接受一個單一參數（最初函數的第一個參數）的函數，而且返回接受餘下的參數並且返回結果的新函數的技術。

看這個解釋有一點抽象，咱們就拿被作了無數次示例的add函數，來作一個簡單的實現。git

// 普通的add函數
function add(x, y) {
    return x + y
}

// Currying後
function curryingAdd(x) {
    return function (y) {
        return x + y
    }}

add(1, 2)           // 3
curryingAdd(1)(2)   // 3

實際上就是把add函數的x，y兩個參數變成了先用一個函數接收x而後返回一個函數去處理y參數。如今思路應該就比較清晰了，就是隻傳遞給函數一部分參數來調用它，讓它返回一個函數去處理剩下的參數。程序員

可是問題來了費這麼大勁封裝一層，到底有什麼用處呢？沒有好處想讓咱們程序員多幹事情是不可能滴，這輩子都不可能.面試

來列一列Currying有哪些好處呢？

參數複用

// 正常正則驗證字符串 
reg.test(txt)

// 函數封裝後
function check(reg, txt) {
    return reg.test(txt)
}

check(/\d+/g, 'test')       //false
check(/[a-z]+/g, 'test')    //true

// Currying後
function curryingCheck(reg) {
    return function(txt) {
        return reg.test(txt)
    }}

var hasNumber = curryingCheck(/\d+/g)var hasLetter = curryingCheck(/[a-z]+/g)

hasNumber('test1')      // true
hasNumber('testtest')   // false
hasLetter('21212')      // false

上面的示例是一個正則的校驗，正常來講直接調用check函數就能夠了，可是若是我有不少地方都要校驗是否有數字，其實就是須要將第一個參數reg進行復用，這樣別的地方就可以直接調用hasNumber，hasLetter等函數，讓參數可以複用，調用起來也更方便。算法

提早確認

var on = function(element, event, handler) {
    if (document.addEventListener) {
        if (element && event && handler) {
            element.addEventListener(event, handler, false);
        }
    } else {
        if (element && event && handler) {
            element.attachEvent('on' + event, handler);
        }
    }}

var on = (function() {
    if (document.addEventListener) {
        return function(element, event, handler) {
            if (element && event && handler) {
                element.addEventListener(event, handler, false);
            }
        };
    } else {
        return function(element, event, handler) {
            if (element && event && handler) {
                element.attachEvent('on' + event, handler);
            }
        };
    }})();

//換一種寫法可能比較好理解一點，上面就是把isSupport這個參數給先肯定下來了
var on = function(isSupport, element, event, handler) {
    isSupport = isSupport || document.addEventListener;
    if (isSupport) {
        return element.addEventListener(event, handler, false);
    } else {
        return element.attachEvent('on' + event, handler);
    }}

咱們在作項目的過程當中，封裝一些dom操做能夠說再常見不過，上面第一種寫法也是比較常見，可是咱們看看第二種寫法，它相對一第一種寫法就是自執行而後返回一個新的函數，這樣其實就是提早肯定了會走哪個方法，避免每次都進行判斷。數組

延遲運行

Function.prototype.bind = function (context) {
    var _this = this
    var args = Array.prototype.slice.call(arguments, 1)
 
    return function() {
        return _this.apply(context, args)
    }
}

像咱們js中常用的bind，實現的機制就是Currying.說了這幾點好處以後，發現還有個問題，難道每次使用Currying都要對底層函數去作修改，瀏覽器

有沒有什麼通用的封裝方法？

// 初步封裝var currying = function(fn) {
    // args 獲取第一個方法內的所有參數
    var args = Array.prototype.slice.call(arguments, 1)
    return function() {
        // 將後面方法裏的所有參數和args進行合併
        var newArgs = args.concat(Array.prototype.slice.call(arguments))
        // 把合併後的參數經過apply做爲fn的參數並執行
        return fn.apply(this, newArgs)
    }
}

這邊首先是初步封裝,經過閉包把初步參數給保存下來，而後經過獲取剩下的arguments進行拼接，最後執行須要currying的函數。閉包

可是好像還有些什麼缺陷，這樣返回的話其實只能多擴展一個參數，currying(a)(b)(c)這樣的話，貌似就不支持了（不支持多參數調用），通常這種狀況都會想到使用遞歸再進行封裝一層。app

// 支持多參數傳遞function progressCurrying(fn, args) {

    var _this = this
    var len = fn.length;
    var args = args || [];

    return function() {
        var _args = Array.prototype.slice.call(arguments);
        Array.prototype.push.apply(args, _args);

        // 若是參數個數小於最初的fn.length，則遞歸調用，繼續收集參數
        if (_args.length < len) {
            return progressCurrying.call(_this, fn, _args);
        }

        // 參數收集完畢，則執行fn
        return fn.apply(this, _args);
    }
}

這邊實際上是在初步的基礎上，加上了遞歸的調用，只要參數個數小於最初的fn.length，就會繼續執行遞歸。dom

好處說完了，通用方法也有了，讓咱們來關注下curry的性能

curry的一些性能問題你只要知道下面四點就差很少了：

存取arguments對象一般要比存取命名參數要慢一點
一些老版本的瀏覽器在arguments.length的實現上是至關慢的
使用fn.apply( … ) 和 fn.call( … )一般比直接調用fn( … ) 稍微慢點
建立大量嵌套做用域和閉包函數會帶來花銷，不管是在內存仍是速度上

其實在大部分應用中，主要的性能瓶頸是在操做DOM節點上，這js的性能損耗基本是能夠忽略不計的，因此curry是能夠直接放心的使用。

最後再擴展一道經典面試題

// 實現一個add方法，使計算結果可以知足以下預期：
add(1)(2)(3) = 6;
add(1, 2, 3)(4) = 10;
add(1)(2)(3)(4)(5) = 15;

function add() {
    // 第一次執行時，定義一個數組專門用來存儲全部的參數
    var _args = Array.prototype.slice.call(arguments);

    // 在內部聲明一個函數，利用閉包的特性保存_args並收集全部的參數值
    var _adder = function() {
        _args.push(...arguments);
        return _adder;
    };

    // 利用toString隱式轉換的特性，當最後執行時隱式轉換，並計算最終的值返回
    _adder.toString = function () {
        return _args.reduce(function (a, b) {
            return a + b;
        });
    }
    return _adder;
 }

add(1)(2)(3)                // 6
add(1, 2, 3)(4)             // 10
add(1)(2)(3)(4)(5)          // 15
add(2, 6)(1)                // 9