JavaScript 高阶函数实战：回调、偏函数与事件控制

回调函数：封装变化，提高复用

回调函数是高阶函数最直观的应用。其核心思想是将易变的业务逻辑抽离封装，将固定的算法流程与具体的执行动作解耦。通过这种方式，开发者只需关注核心逻辑的实现，从而有效减少重复代码。

以数组遍历为例，许多底层实现均依赖回调机制。我们可以自定义一个简化版的 forEach 方法，其结构如下：

array.forEach = function(arr, fn){
  for (var i = 0, len = arr.length; i < len; i++) {
    fn(arr[i], i, arr);
  }
}

在上述代码中，arr 为目标数组，fn 为回调函数。循环体负责控制迭代流程，而具体的操作由外部传入的 fn 决定。这种模式使得同一套遍历代码可以被复用于任何需要对数组元素执行不同操作的场景。

偏函数：预置参数，定制工具

偏函数（Partial Application）是一种创建新函数的技术，它允许将原函数的部分参数预先绑定，并返回一个新的函数供后续调用。这在需要频繁生成功能相似但配置不同的函数时非常有用。

例如，在 JavaScript 中进行精确的类型判断通常比较繁琐。所有对象都有一个内部的类属性（Class），可以通过 Object.prototype.toString 获取，返回值格式通常为 [object ClassName]。如果为每种类型编写独立的判断函数，会产生大量重复代码：

isString = function(obj){
  return Object.prototype.toString.call(obj) === "[object String]";
}
isNumber = function(obj){
  return Object.prototype.toString.call(obj) === "[object Number]";
}

利用偏函数，可以将类型名称作为参数传入一个通用工厂函数，动态生成对应的判断器：

isType = function(type) {
  return function(obj) {
    return Object.prototype.toString.call(obj) === "[object " + type + "]";
  }
}

// 生成特定类型的检测函数
isString = isType('String');
isNumber = isType('Number');

这里 isType 接收字符串参数 type 并返回一个闭包函数。当调用生成的 isString('123') 时，它会使用预设的 'String' 进行比对。这不仅精简了代码，也使得类型检测模块更易于维护。

Curry 化（部分求值）：分批累积参数

Curry 化（也称为柯里化）的核心在于“延迟执行”与“参数累积”。一个 Curry 化的函数在接受到足够的参数之前，不会立即执行运算，而是继续返回一个函数来收集剩余的参数。只有在接收到全部所需参数（或触发最终执行信号）时，才会执行目标函数。

第1步：构建 Curry 化基础结构

为了实现参数分批录入，我们需要一个管理器来保存中间状态。以下是一个通用的 Curry 化工具函数：

var currying = function(fn) {
  var args = [];
  
  return function() {
    // 如果没有传参，视为收集结束，执行原始函数
    if (arguments.length === 0) {
      return fn.apply(this, args);
    } else {
      // 否则将新参数追加到缓存区，并返回自身以继续接收参数
      Array.prototype.push.apply(args, arguments);
      return arguments.callee;
    }
  }
};

第2步：应用 Curry 化实例

以一个计算每日花销总和的场景为例。我们希望可以在不同时间记录每天的花费，月底一次性统计总额。配合上面的 Curry 化工具，可以这样使用：

// 定义累加逻辑
var sumCost = function(){
  var sum = 0;
  for (var i = 0, len = arguments.length; i < len; i++) {
    sum += arguments[i];
  }
  return sum;
};

// 包装为 Curry 化函数
var costTracker = currying(sumCost);

// 第一天花费 100，暂不执行
var result1 = costTracker(100);

// 第二天花费 200，暂不执行
var result2 = costTracker(200);

// 月底统计，传入空参数触发执行
console.log(costTracker()); // 输出: 300

在此过程中，costTracker(100) 和 costTracker(200) 分别被调用并返回同一个函数引用，内部闭包中的 args 数组不断被扩展，直到最后一次调用不传参数，才真正调动 sumCost 完成计算。

事件控制：节流与防抖优化性能

在前端开发中，window.resize、mousemove 等事件触发频率极高。如果绑定的处理函数包含复杂计算或 DOM 操作，会导致浏览器卡顿甚至崩溃。高阶函数通过控制函数执行的时机，能有效平衡性能与功能需求。

第3步：实现节流（Throttle）

节流确保在一个单位时间内，函数只执行一次。它适用于像窗口调整大小这类需要连续反馈但不需要高频率响应的场景。实现思路是设置一个锁标识：

function throttle(fn, interval) {
   var doing = false;
   return function() {
     // 如果正在执行中则忽略本次请求
     if (doing) {
      return;
     }
     doing = true;
     // 执行实际逻辑
     fn.apply(this, arguments);
     // 设定解锁时间
     setTimeout(function() {
      doing = false;
     }, interval);
   }
  }

使用时，将业务逻辑包裹在 throttle 中即可限制其调用频率：window.onresize = throttle(() => console.log('resize'), 500);

第4步：实现防抖（Debounce）

防抖则是如果在一段连续的时间里不断触发事件，则取消之前的延时执行计划，重新计时，直到最后一次触发后不再触发时才执行。这非常适合输入框搜索联想等场景：

function debounce(fn, interval) {
  var timer = null;
  return function() {
    // 每次触发都清除上一次的定时器
    if (timer) {
      clearTimeout(timer);
    }
    // 重新绑定新的执行定时器
    var target = this;
    var args = arguments;
    timer = setTimeout(function(){
     fn.apply(target, args);
    }, interval);
  };
}

通过防抖，只有当事件静默超过指定间隔后，真正的处理函数才会运行，从而最大程度地减少无效的计算次数。