高阶函数

在函数式编程中,高阶函数是指以函数作为参数或返回值的函数。简单来说,如果一个函数的参数是另一个函数,那么它就是高阶函数。

下面是一个简单的高阶函数示例

function calculate(a, b, operation) {
  return operation(a, b);
}

function add(x, y) {
  return x + y;
}

function multiply(x, y) {
  return x * y;
}

console.log(calculate(2, 3, add)); // 5
console.log(calculate(2, 3, multiply)); // 6

在这个例子中,calculate函数接受三个参数,其中第三个参数operation是一个函数。calculate内部调用operation,将a和b作为参数传入。这里的add和multiply函数作为参数传给了calculate,体现了高阶函数的特性。

函数和变量的关系

在 JavaScript 中,函数和变量有以下两个重要的关系:

函数名本质上是一个指向函数的变量。我们可以把函数赋值给一个变量,这个变量就指向了这个函数。
函数的参数也可以接收变量,包括函数变量。这意味着我们可以将一个函数作为参数传递给另一个函数。

正是由于这两个特性,JavaScript 支持高阶函数成为可能。

函数化简

利用高阶函数,我们可以对某些函数调用进行化简。比如下面这个例子:

var process = function (fn) {
  return doSomething(function (data) {
    return fn(data);
  });
};

这里的process函数接受一个函数fn作为参数,内部创建了一个匿名函数并将其传给doSomething函数。这个匿名函数内部调用了fn。

我们可以对这个过程进行化简:

var process = function (fn) {
  return doSomething(fn);
};

去掉了中间的匿名函数,直接将fn传给doSomething,代码变得更加简洁。

柯里化

柯里化(Currying)是函数式编程中的一个重要概念。它指的是将一个接受多个参数的函数转换为一系列只接受单一参数的函数的过程。

柯里化的定义如下:

将一个函数从可调用的 f(a, b, c) 转换为可调用的 f(a)(b)(c)。

需要注意的是,柯里化本身不会调用函数,它只是对函数进行转换。

柯里化的作用

柯里化有以下几个主要的作用:

参数复用。柯里化允许我们固定一些参数,然后产生一个更小元的函数。
提前返回。柯里化允许我们在没有足够的参数时,返回一个函数,等待参数的完整传递。
延迟执行。柯里化可以用来延迟一个函数的执行,直到真正需要结果的时候再执行。
功能组合。柯里化可以使多个函数组合成一个函数,每个函数只接受一个参数,这样可以实现更加模块化的代码。

总的来说,柯里化可以使我们的代码更加简洁、灵活和易于组合,提高代码的可读性和可维护性。

柯里化的来源

术语"柯里化"来源于美国数学家和逻辑学家 Haskell Brooks Curry。他在数理逻辑和组合子逻辑方面做出了重要贡献。

简单的柯里化实现

下面是一个简单的两层柯里化的实现:

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

function curry(fn) {
  var args = [].slice.call(arguments, 1);
  return function () {
    var newArgs = args.concat([].slice.call(arguments));
    return fn.apply(this, newArgs);
  };
}

var add2 = curry(add, 1, 2);
console.log(add2(3, 4)); // 10

这里的curry函数接受一个函数fn和一些参数,返回一个新的函数。这个新函数会把之前传入的参数和新传入的参数合并起来,然后调用原来的fn。

参数不定长的柯里化

如果我们希望柯里化的函数支持不定长的参数,可以这样实现:

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

function curry(fn, length) {
  length = length || fn.length;

  return function () {
    if (arguments.length < length) {
      var combined = [fn].concat(Array.prototype.slice.call(arguments));
      return curry(curry.apply(this, combined), length - arguments.length);
    } else {
      return fn.apply(this, arguments);
    }
  };
}

var curriedAdd = curry(add);
console.log(curriedAdd(1)(2)(3)(4)); // 10
console.log(curriedAdd(1, 2)(3, 4)); // 10

这个版本的curry函数会检查传入的参数数量,如果不足则返回一个新的 curry 函数,consumed 掉传入的参数;如果参数足够,则直接调用原函数。

应用:事件封装

我们可以利用柯里化的思想来封装不同浏览器环境下的事件处理:

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

var btn = document.getElementById('button');
addEvent(btn, 'click', function () {
  console.log('Button clicked');
});

这里的addEvent函数根据不同的环境,返回不同的事件处理函数。这些函数都接受相同的参数,但内部的实现不同。这样我们就可以统一不同浏览器下的事件处理方式,提高代码的兼容性。

柯里化是函数式编程中一个非常有用的技巧。通过将多参数函数转换为一系列单参数函数,我们可以更加灵活地组合和复用函数,写出更加简洁和模块化的代码。在实际开发中,合理运用柯里化可以使我们的代码更加优雅和富有表现力。

函数和变量的关系​

函数化简​

柯里化

柯里化的作用​

柯里化的来源​

简单的柯里化实现​

参数不定长的柯里化​

应用:事件封装​