javascript柯里化

最新推荐文章于 2022-01-26 21:16:20 发布

原创最新推荐文章于 2022-01-26 21:16:20 发布 · 224 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

js 专栏收录该内容

2 篇文章

订阅专栏

柯里化是一种将接受多个参数的函数转换为接受单一参数并返回新函数的技术，常用于性能优化和提高代码可读性。例如，将一个三参数的add函数转换为多次调用的形式。在实际开发中，柯里化可用于预定义模板数据，如在跨浏览器事件处理函数中。此外，react-redux的connect方法也利用柯里化提升代码可读性，将state和action注入组件。connect方法的柯里化形式使得mapStateToProps和mapDispatchToProps成为可选参数，提高了代码的灵活性。

什么是柯里化

如果一个函数可以接收多个参数，将这个函数转化为每次只接收一部分参数的函数的多次调用形式，就是柯里化。文字上理解比较困难，先来看看下面的代码：

function add(a, b, c) {
    return a + b + c;
}

这个add函数接收3个参数，返回3个参数相加的结果。可以通过以下2种形式对其进行柯里化：

function addOne(a) {
    return function(b) {
        return function(c) {
            return a + b + c;
            }
        }
    }
}

function addTwo(a,b) {
    return function(c) {
        return a + b + c;
    }
}

add(1, 2, 3);        // return 6
addOne(1)(2)(3);     // return 6
addTwo(1, 2)(3);     // return 6

使用场景

-性能优化(可以预定义一些模版数据)

function addCrossBrowserEvent() {
    if (window.addEventListener) {
        return function(el, sType, fn, capture) {
            el.addEventListener(sType, function(e) {
                fn.call(el, e);
            }, (capture));
        };
    } else if (window.attachEvent) {
        return function(el, sType, fn, capture) {
            el.attachEvent("on" + sType, function(e) {
                fn.call(el, e);
            });
        };
    }
}

var addEvent = addCrossBrowserEvent();

addEvent(element, "click", handleClick, true);

便于理解
react-redux的connect方法，就是使用了柯里化增加代码的可读性:

let Container = connect(mapStateToProps, mapDispatchToProps)(Component);

在这里，connect的作用就是将Component要用到的state切面和action注入到它的property中，达到展示型组件和容器组件分离的目的。如果将这个方法的定义改为:

let Container = connect(mapStateToProps, mapDispatchToProps, Component);

就没那么好理解了。而且，mapStateToProps和mapDispatchToProps实际上也是可选参数，在不传它们的情况下传入Component会显得很恶心: connect(null, null, Component)。