JavaScript基础--23-高阶函数详解

📃个人主页：编程的一拳超人

⛺️ 欢迎关注：👍点赞 👂🏽留言 😍收藏 💞 💞 💞

于高山之巅，方见大河奔涌；于群峰之上，更觉长风浩荡。 ——《人民日报》

---

---

1. 高阶函数核心概念

1.1 高阶函数定义

高阶函数（Higher-Order Function）需满足以下条件之一：

• 接受一个或多个函数作为参数
• 返回一个新函数

其本质是对其他函数进行操作的函数，体现了JavaScript中"函数是一等公民"的特性。

1.2 核心特点

• 抽象行为：通过参数传递实现逻辑复用
• 延迟执行：函数作为返回值时，可控制执行时机
• 组合能力：通过函数嵌套实现复杂逻辑解耦

---

2. 高阶函数类型与示例

2.1 函数作为参数

// 日志记录高阶函数
function withLog(fn) {
  return function(...args) {
    console.log(`开始执行 ${fn.name}`);
    const result = fn(...args);
    console.log(`执行完成，结果：${result}`);
    return result;
  };
}

const sum = (a, b) => a + b;
const sumWithLog = withLog(sum);
sumWithLog(3, 5);

/* 打印结果：
开始执行 sum
执行完成，结果：8
*/

2.2 函数作为返回值

// 权限校验高阶函数
function requireAuth(apiFunc) {
  return function(...args) {
    if (checkLoginStatus()) {
      return apiFunc(...args);
    }
    alert('请先登录！');
    redirectToLogin();
  };
}

const fetchUserData = () => {/* API调用 */};
const protectedFetch = requireAuth(fetchUserData);
protectedFetch(); // 自动校验权限

---

3. 内置高阶函数详解

3.1 Array.prototype.map

const numbers = [1, 2, 3];
const squares = numbers.map(x => {
  console.log(`处理元素: ${x}`);
  return x ** 2;
});
console.log(squares); // [1, 4, 9]

/* 打印结果：
处理元素: 1
处理元素: 2
处理元素: 3
[1, 4, 9]
*/

3.2 Array.prototype.filter

const users = [
  {name: 'Alice', age: 25},
  {name: 'Bob', age: 17},
  {name: 'Charlie', age: 30}
];

const adults = users.filter(user => {
  console.log(`校验年龄: ${user.name}`);
  return user.age >= 18;
});
console.log(adults); 

/* 打印结果：
校验年龄: Alice
校验年龄: Bob
校验年龄: Charlie
[{name: 'Alice', age: 25}, {name: 'Charlie', age: 30}]
*/

3.3 Array.prototype.reduce

const purchases = [29.99, 15.5, 9.99];
const total = purchases.reduce((acc, curr, index) => {
  console.log(`第${index+1}次累计: ${acc} + ${curr}`);
  return acc + curr;
}, 0);
console.log(`总金额: ${total}`);

/* 打印结果：
第1次累计: 0 + 29.99
第2次累计: 29.99 + 15.5
第3次累计: 45.49 + 9.99
总金额: 55.48
*/

---

4. 高阶函数高级应用

4.1 解决回调地狱（结合Promise）

function asyncOperation(timeout) {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log(`完成${timeout}ms操作`);
      resolve(timeout);
    }, timeout);
  });
}

// 高阶函数生成器
function createSequence(...funcs) {
  return funcs.reduce((chain, func) => {
    return chain.then(result => {
      console.log(`接收到上一步结果: ${result}`);
      return func();
    });
  }, Promise.resolve(-1));
}

const sequence = createSequence(
  () => asyncOperation(500),
  () => asyncOperation(300),
  () => asyncOperation(200)
);

sequence.then(finalResult => {
  console.log(`最终结果: ${finalResult}`);
});

/* 打印结果：
完成500ms操作
接收到上一步结果: -1
完成300ms操作
接收到上一步结果: 500
完成200ms操作
最终结果: 300
*/

4.2 柯里化(Currying)实现

function curry(fn) {
  return function curried(...args) {
    if (args.length >= fn.length) {
      return fn.apply(this, args);
    } else {
      return function(...moreArgs) {
        return curried.apply(this, args.concat(moreArgs));
      };
    }
  };
}

const sumThree = (a, b, c) => a + b + c;
const curriedSum = curry(sumThree);

console.log(curriedSum(1)(2)(3)); // 6
console.log(curriedSum(1, 2)(3)); // 6
console.log(curriedSum(1)(2, 3)); // 6

---

5. 高阶函数与设计模式

5.1 装饰器模式

function withPerformanceMetrics(fn) {
  return function(...args) {
    const start = performance.now();
    const result = fn(...args);
    const end = performance.now();
    console.log(`${fn.name} 执行时间: ${(end - start).toFixed(2)}ms`);
    return result;
  };
}

const heavyCalculation = () => {
  let sum = 0;
  for(let i = 0; i < 1e6; i++) sum += Math.random();
  return sum;
};

const monitoredCalc = withPerformanceMetrics(heavyCalculation);
monitoredCalc();

5.2 React高阶组件(HOC)

function withLoadingIndicator(WrappedComponent) {
  return class extends React.Component {
    state = { loading: true };

    componentDidMount() {
      setTimeout(() => {
        this.setState({ loading: false });
      }, 2000);
    }

    render() {
      return this.state.loading ? (
        <div className="loader">Loading...</div>
      ) : (
        <WrappedComponent {...this.props} />
      );
    }
  };
}

// 使用示例
const EnhancedComponent = withLoadingIndicator(MyComponent);

---

6. 闭包与内存管理

6.1 闭包应用场景

// 私有变量实现
function createCounter() {
  let count = 0;
  return {
    increment: () => ++count,
    decrement: () => --count,
    getCount: () => count
  };
}

const counter = createCounter();
console.log(counter.increment()); // 1
console.log(counter.increment()); // 2
console.log(counter.getCount());  // 2

6.2 内存管理机制

function createLargeObject() {
  const bigArray = new Array(1000000).fill('data');
  return () => bigArray.length;
}

let getLength = createLargeObject();
console.log(getLength()); // 1000000

// 手动释放内存
getLength = null; 
// bigArray将在下一次GC时被回收

---

7. 箭头函数与普通函数差异

7.1 闭包中的this绑定

const obj = {
  value: '实例属性',
  normalMethod: function() {
    setTimeout(function() {
      console.log(this.value); // undefined（非严格模式指向window）
    }, 100);
  },
  arrowMethod: function() {
    setTimeout(() => {
      console.log(this.value); // '实例属性'
    }, 100);
  }
};

obj.normalMethod(); 
obj.arrowMethod();

---

8. 最佳实践与注意事项

1. 避免过度抽象：层级过深的高阶函数会降低可读性
2. 内存泄漏防范：及时解除不再使用的闭包引用
3. 性能优化：避免在循环内创建高阶函数
4. 类型提示：使用TypeScript增强类型安全
5. 错误处理：完善Promise链的catch处理

// 安全的高阶函数示例
function safeAsync(fn) {
  return async function(...args) {
    try {
      return await fn(...args);
    } catch (error) {
      console.error('操作失败:', error);
      throw error;
    }
  };
}

---

总结：高阶函数能力矩阵

能力维度	典型应用场景	对应示例
行为抽象	统一处理异步回调	array.map/filter
逻辑组合	函数管道/中间件	compose/pipe函数
状态封装	创建私有变量环境	闭包计数器
模式复用	框架中的HOC/装饰器	React高阶组件
控制反转	依赖注入/策略模式	接收回调的配置函数

通过合理使用高阶函数，开发者可以显著提升代码的可维护性和表现力，但也需注意避免过度抽象导致的可读性下降问题。