关于柯里化的概念,网上资料也比较多,这里就不再赘述,我们先来看几个简单的例子

需求

求三个数的和

解法:

1、

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

console.log(add(5, 10, 15));
const curryAdd = function(a) {
    return function(b) {
      return function(c) {
        return a + b + c;
      }
    }
}

const curryResult =  curryAdd(5)(10)(15);
 console.log(curryResult);


 const add5 = curryAdd(5);
 const add10 = add5(10);

 console.log(add10(15));

解法2使用了 curry 化,其实柯里化可以简单地理解为将原来接受两个参数的函数变成新的接受一个参数的过程,新的函数返回一个以原有第二个参数为参数的函数。

为什么要使用 curry 化

从前面的例子对比来看,curry 化咋一看比简单的函数使用起来还有复杂,为什么我们还要大费周章去使用它,其实 curry 化有几个有点:

  • 参数复用

clipboard.png
如上面的例子中,返回新的函数保留了对原先函数参数的引用,每次调用计算不必重新传入

  • 提前返回,性能优化

关于这个,我们看个简单的例子--事件绑定

 var addEvent = function() {
  if(window.addEventListener) {

    el.addEventListener(type, function(e) {
      fn.call(el, e);
    }, capture)
      
    }else if(window.attachEvent) {

      el.attachEvent('on' + type, function() {
        fn.call(el, e);
      }, capture)
  }
};

以上例子中需要根据浏览器的兼容性进行事件绑定,每次绑定事件都需要判断一次

改进后:

var addEvent = (function() {
   if(window.addEventListener) {
     return function(el, type, fn, capture) {
       el.addEventListener(type, function(e) {
         fn.call(el, e);
       }, capture)
     }
   }else if(window.attachEvent) {
     return function(el, type, fn, capture) {
       el.attachEvent('on' + type, function() {
         fn.call(el, e);
       }, capture)
     }
   }
 })();

通过自调用函数返回一个新的函数,判断逻辑只执行了一次


默默
5 声望0 粉丝