在现代JavaScript开发中，function的进阶用法核心在于将函数视为一等公民，通过闭包、高阶函数、柯里化等技巧，让代码从”能跑”进化到”优雅”。
重新认识函数：一等公民的底层逻辑
很多开发者写了几年代码，对函数的理解还停留在”封装一段逻辑”的层面，JavaScript中的函数和数字、字符串一样，可以赋值给变量、作为参数传递、作为返回值返回,这个特性是所有进阶用法的基础。
函数表达式的灵活性
function关键字声明的函数会提升到作用域顶部，而函数表达式不会,这意味着：
- 函数声明可以在定义之前调用
- 函数表达式只能在赋值之后调用
- 箭头函数没有自己的
this，适合回调场景
// 函数声明
sayHello(); // 正常执行
function sayHello() {
console.log('Hello');
}
// 函数表达式
sayHi(); // TypeError: sayHi is not a function
const sayHi = function() {
console.log('Hi');
};
理解这个差异,是掌握闭包和高阶函数的前提。
闭包的底层机制与内存泄漏处理方案
闭包是JavaScript进阶路上绕不开的坎。闭包的本质是函数与其词法作用域的绑定关系，当内部函数引用了外部函数的变量时,这个变量就不会被垃圾回收机制释放。
闭包在真实业务中的典型场景
私有变量模拟。 ES6之前没有class关键字,闭包是唯一能实现数据封装的手段。
事件监听器。 回调函数会长期持有外部变量,这也是内存泄漏的高发区。
javascript闭包内存泄漏怎么解决
这是高频面试题，也是实战中的真实痛点，内存泄漏的根源在于：闭包引用的变量被长期持有,无法触发垃圾回收。
常见的解决思路：
- 在闭包使用完毕后，手动将引用置为
null - 避免在循环中创建闭包，改用
let块级作用域 - 使用
WeakMap替代普通对象存储闭包数据
function createCounter() {
let count = 0;
return function() {
count++;
return count;
};
}
const counter = createCounter();
counter(); // 1
// 当不再需要时
counter = null; // 让count可以被回收
行业共识认为，闭包内存泄漏在单页应用中的占比相当大,尤其是在事件监听和定时器场景中。
高阶函数的分类与实际应用场景
高阶函数是接收函数作为参数，或者返回函数的函数，JavaScript数组的map、filter、reduce都是高阶函数的典型代表。
javascript高阶函数有哪些应用场景
数据转换。 处理接口返回的数据时，用map批量格式化字段。
条件过滤。 用filter筛掉无效数据，比for循环加if判断可读性高数倍。
累计计算。 用reduce实现分组、求和、扁平化数组。
const orders = [
{ product: '键盘', price: 299, category: '外设' },
{ product: '鼠标', price: 199, category: '外设' },
{ product: '显示器', price: 1499, category: '显示' }
];
// 按分类分组
const grouped = orders.reduce((acc, cur) => {
(acc[cur.category] = acc[cur.category] || []).push(cur);
return acc;
}, {});
函数组合的威力
将多个简单函数组合成一个复杂函数，是函数式编程的核心思想。compose函数可以按从右到左的顺序执行：
const compose = (...fns) => (arg) =>
fns.reduceRight((acc, fn) => fn(acc), arg);
const addTax = (price) => price 1.13;
const formatPrice = (price) => `¥${price.toFixed(2)}`;
const formatOrder = compose(formatPrice, addTax);
formatOrder(299); // "¥337.87"
柯里化技术：从理论到落地
柯里化将多参数函数转换为一系列单参数函数，它让函数复用变得更加灵活,尤其在配置场景中价值巨大。
柯里化的实现原理
核心是收集参数,直到参数数量满足原函数要求才执行：
const curry = (fn, ...args) =>
args.length >= fn.length
? fn(...args)
: (...newArgs) => curry(fn, ...args, ...newArgs);
const fetchRequest = curry((method, url, params) => {
return fetch(url, { method, body: JSON.stringify(params) });
});
const getRequest = fetchRequest('GET');
const postRequest = fetchRequest('POST');
// 复用配置
const getUser = getRequest('/api/user');
const updateUser = postRequest('/api/user');
柯里化在价格计算中的落地
在处理价格计算时，柯里化能优雅地处理固定折扣和动态价格的组合逻辑，例如电商系统的优惠计算，基础折扣率固定，商品单价动态变化，柯里化可以预先绑定折扣率,后续只需传入商品价格即可得到最终结果。
回调函数与Promise的对比选型
回调函数是异步编程最原始的表达方式，而Promise是对回调的语法糖封装,两者的选择直接影响代码的可维护性。
javascript回调函数和promise区别
回调用嵌套表达依赖关系，读起来是”向右增长”的缩进地狱，Promise用链式调用表达顺序，逻辑是”向下生长”的线性结构。
| 对比维度 | 回调函数 | Promise |
|---|---|---|
| 错误处理 | 每个回调单独传err参数 | 统一catch捕获 |
| 并发控制 | 需要手动计数器 | Promise.all/Promise.race |
| 可读性 | 嵌套层级深 | 链式平铺 |
| 取消能力 | 无法取消 | 通过AbortController |
实际项目中的选型建议
多数情况下，新项目优先使用Promise或async/await，只有处理一次性事件监听、或者对接老旧API时才需要裸回调。
函数的this指向问题
this是函数调用时确定的，与定义位置无关,这个特性让很多开发者栽跟头。
四种调用规则
- 普通函数调用：this指向window（严格模式为undefined）
- 对象方法调用：this指向该对象
- call/apply/bind调用：this指向指定对象
- 构造函数调用：this指向新实例
箭头函数不绑定this，它继承外层作用域的this，这个特性在React类组件中特别有用,但也要警惕在对象方法中误用箭头函数。
常见问题解答
为什么我的闭包变量总是被意外修改？
闭包捕获的是变量的引用而非值，如果循环中使用var声明变量，所有闭包共享同一个变量，改用let声明，或使用IIFE立即执行函数,即可获得每次迭代的独立副本。
高阶函数会影响性能吗？
map、filter、reduce比for循环多出函数调用开销，但在处理万级以下数据时差异可忽略，对于百万级数据，优先考虑用普通循环或Web Worker优化,而不是纠结高阶函数。
函数式编程和面向对象怎么选？
函数式编程擅长数据处理和无状态逻辑，面向对象适合建模实体和状态管理，现代前端框架中，React偏向函数式，Vue偏向面向对象加响应式,但两者都在互相借鉴。
首发原创文章，作者：王坚，如若转载，请注明出处：https://test.idctop.com/article/561063.html
