0

0

为什么javascript函数是一等公民_如何利用高阶函数?

幻影之瞳

幻影之瞳

发布时间:2026-01-04 22:04:02

|

897人浏览过

|

来源于php中文网

原创

JavaScript函数是“一等公民”,因其可赋值、传参、返回、存储于数据结构中;高阶函数指接受函数为参数或返回函数的函数,如map、debounce;使用时需注意this绑定与闭包陷阱。

为什么javascript函数是一等公民_如何利用高阶函数?

JavaScript 函数为什么是“一等公民”?

因为函数在 JavaScript 中可以像字符串、数字一样被赋值、传参、返回、存储在数据结构里——没有特殊限制,也不需要额外包装。

这和其他语言(比如 Java 8 之前)明显不同:Java 里你得用 Runnable 或接口封装行为,而 JS 的 function 本身就能直接当值用。

  • const fn = function() {}:可赋值给变量
  • arr.push(function() {}):可存进数组
  • setTimeout(() => {}, 100):可作为参数传给另一个函数
  • function createLogger(prefix) { return function(msg) { console.log(prefix + msg); }; }:可被另一个函数返回

怎么识别一个函数是不是高阶函数?

只要满足下面任一条件,就是高阶函数:接受函数作为参数,或返回一个函数。不是看它“多高级”,而是看它和函数怎么交互。

常见误判:以为必须嵌套多层才算。其实 Array.prototype.map 就是最典型的高阶函数——它不关心你传的 callback 是箭头函数还是普通函数,只确保调用它。

立即学习Java免费学习笔记(深入)”;

豆绘AI
豆绘AI

豆绘AI是国内领先的AI绘图与设计平台,支持照片、设计、绘画的一键生成。

下载
  • mapfilterreduce 都是高阶函数(接收回调)
  • debouncecurryonce 也是(返回新函数)
  • 写错的典型:把 fn()(执行结果)传进去,而不是 fn(函数本身)

高阶函数实战中容易踩的坑

最常出问题的地方不是语法,而是“执行时机”和“this 绑定”。

const obj = {
  name: 'Alice',
  greet: function() { return `Hello, ${this.name}`; }
};
// ❌ 错误:map 里直接用 obj.greet,this 会丢失
['a', 'b'].map(obj.greet); // "Hello, undefined"

// ✅ 正确:绑定 this,或用箭头函数捕获作用域
['a', 'b'].map(obj.greet.bind(obj));
// 或
['a', 'b'].map(() => obj.greet());
// 或提前绑定
const boundGreet = obj.greet.bind(obj);
['a', 'b'].map(boundGreet);
  • 异步场景下,setTimeout(fn, 0) 里的 fn 是高阶使用,但若 fn 依赖外部变量,要注意闭包捕获的是引用还是值
  • React 中 useCallback 本质是高阶函数:它接收函数,返回一个记忆化版本,避免子组件重复渲染
  • 不要在循环里直接定义并传入匿名函数,除非明确需要闭包;否则用 let 或提取到外部

什么时候该自己写高阶函数,而不是硬编码

当你发现同一段逻辑反复出现在多个函数里,且差异仅在于“做什么”,而不是“怎么做”时,就该抽了。

比如日志、错误重试、权限校验、节流防抖——这些横切关注点,用高阶函数封装后,业务代码更干净,也更容易测试和替换。

function withRetry(fn, maxRetries = 3) {
  return async function(...args) {
    for (let i = 0; i <= maxRetries; i++) {
      try {
        return await fn(...args);
      } catch (e) {
        if (i === maxRetries) throw e;
      }
    }
  };
}

const fetchWithRetry = withRetry(fetch);
  • 别为了“函数式”而强行高阶:如果只有 1 处调用,且逻辑简单,直接写更清晰
  • 注意调试难度:高阶函数堆叠后,调用栈变深,错误堆栈可能指向包装器而非原始函数
  • TypeScript 下记得给高阶函数写好泛型,否则 ReturnType 和参数类型容易丢失
函数作为一等公民的价值,不在概念多酷,而在你能否在真实需求里自然地“传递行为”。真正卡住人的,往往不是不会写 const compose = (f, g) => x => f(g(x)),而是没想清楚这个 fg 在当前上下文里该不该有副作用、要不要缓存、是否要处理 Promise。

相关专题

更多
java
java

Java是一个通用术语,用于表示Java软件及其组件,包括“Java运行时环境 (JRE)”、“Java虚拟机 (JVM)”以及“插件”。php中文网还为大家带了Java相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

829

2023.06.15

java正则表达式语法
java正则表达式语法

java正则表达式语法是一种模式匹配工具,它非常有用,可以在处理文本和字符串时快速地查找、替换、验证和提取特定的模式和数据。本专题提供java正则表达式语法的相关文章、下载和专题,供大家免费下载体验。

735

2023.07.05

java自学难吗
java自学难吗

Java自学并不难。Java语言相对于其他一些编程语言而言,有着较为简洁和易读的语法,本专题为大家提供java自学难吗相关的文章,大家可以免费体验。

733

2023.07.31

java配置jdk环境变量
java配置jdk环境变量

Java是一种广泛使用的高级编程语言,用于开发各种类型的应用程序。为了能够在计算机上正确运行和编译Java代码,需要正确配置Java Development Kit(JDK)环境变量。php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

396

2023.08.01

java保留两位小数
java保留两位小数

Java是一种广泛应用于编程领域的高级编程语言。在Java中,保留两位小数是指在进行数值计算或输出时,限制小数部分只有两位有效数字,并将多余的位数进行四舍五入或截取。php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

398

2023.08.02

java基本数据类型
java基本数据类型

java基本数据类型有:1、byte;2、short;3、int;4、long;5、float;6、double;7、char;8、boolean。本专题为大家提供java基本数据类型的相关的文章、下载、课程内容,供大家免费下载体验。

446

2023.08.02

java有什么用
java有什么用

java可以开发应用程序、移动应用、Web应用、企业级应用、嵌入式系统等方面。本专题为大家提供java有什么用的相关的文章、下载、课程内容,供大家免费下载体验。

430

2023.08.02

java在线网站
java在线网站

Java在线网站是指提供Java编程学习、实践和交流平台的网络服务。近年来,随着Java语言在软件开发领域的广泛应用,越来越多的人对Java编程感兴趣,并希望能够通过在线网站来学习和提高自己的Java编程技能。php中文网给大家带来了相关的视频、教程以及文章,欢迎大家前来学习阅读和下载。

16925

2023.08.03

c++主流开发框架汇总
c++主流开发框架汇总

本专题整合了c++开发框架推荐,阅读专题下面的文章了解更多详细内容。

3

2026.01.09

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 3.5万人学习

国外Web开发全栈课程全集
国外Web开发全栈课程全集

共12课时 | 1.0万人学习

React核心原理新老生命周期精讲
React核心原理新老生命周期精讲

共12课时 | 1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号