讲师中心 微信公众号

工具推荐

视频效率加速
Seko
Seko

AI短剧一键生成成片

AniShort
AniShort

AI短剧协同制作平台

剧云
剧云

中文短剧剧本制作平台

Laper
Laper

剧本策划到成片协作

箭头函数与传统函数_在javascript中该如何选择?

轻宇吖_1127

轻宇吖_1127

发布时间:2026-01-05 14:25:46

|

1018人浏览过

|

来源于php中文网

原创

箭头函数是语法糖加作用域约束,非传统函数替代品;必须用传统函数的场景包括需动态this、作构造函数、访问arguments;安全场景为不依赖this、不作构造器、不用arguments且上下文确定。

箭头函数与传统函数_在javascript中该如何选择?

箭头函数不是传统函数的升级替代品,而是语法糖 + 作用域约束的组合体;选错会导致 this 绑定错误、无法用作构造函数、丢失 arguments 等问题。

什么时候必须用传统函数?

当需要动态 this、作为构造函数、或访问 arguments 时,只能用 function 声明或函数表达式。

  • 事件监听器中需访问触发元素:
    button.addEventListener('click', function() {
      console.log(this); // 指向 button
    });
    若改用箭头函数,this 指向外层作用域(通常是 window 或 undefined)
  • 定义类方法且需被继承调用:
    class Logger {
      log() {
        console.log(this.level); // 依赖正确绑定的 this
      }
    }
    箭头函数写法 log = () => { ... } 会固化 this,子类重写或借用时行为异常
  • 需要 arguments 处理不定参数:
    function sum() {
      return Array.from(arguments).reduce((a, b) => a + b, 0);
    }
    箭头函数没有 arguments 对象,得改用剩余参数 (...args)

箭头函数适合哪些明确场景?

它真正安全的使用边界是:不依赖 this、不作为构造器、不需 arguments,且上下文已确定。

cn-json-diff
cn-json-diff

比较两个 JSON 文件并显示差异。支持嵌套结构、数组及值变更。纯 Python 标准库实现,无需 API 密钥。

下载
  • 数组方法回调(map/filter/reduce):
    items.map(item => item.name.toUpperCase());
    简洁且无 this 风险
  • 简化短小的异步链式处理:
    fetch('/api/data')
      .then(res => res.json())
      .then(data => console.log(data));
    避免为单行逻辑额外声明函数
  • 闭包中捕获外层变量(无需 bind 或中间变量):
    const userId = 123;
    users.filter(u => u.ownerId === userId);
    箭头函数自动继承外层词法作用域,比 function() {}.bind(this) 更直接

this 绑定差异导致的实际 Bug

这是最常踩的坑——表面语法更短,运行时却静默出错。

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

  • 对象方法内误用箭头函数:
    const obj = {
      value: 42,
      regular() { return this.value; },        // ✅ 返回 42
      arrow: () => this.value                  // ❌ this 指向全局/模块顶层,通常为 undefined
    };
  • 定时器中 this 混乱:
    const timer = {
      count: 0,
      start() {
        setInterval(() => {
          this.count++; // ✅ 箭头函数可访问 timer 实例
        }, 1000);
        // 若写成 setInterval(function() { this.count++; }, 1000);
        // 则 this 指向 global,count 不会递增
      }
    };
    这里箭头函数反而是正确选择,但前提是开发者清楚它“不绑定 this”的本质

关键不在“哪个更新潮”,而在于是否理解 this 的绑定时机:传统函数的 this 在调用时确定,箭头函数的 this 在定义时固化。漏掉这个区别,哪怕只改一个函数字面量,都可能让整个对象状态管理失效。

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
Flowith
Flowith Hot

Flowith是一款基于画布和智能体工作流的 AI 协作工作空间。

花生AI
花生AI Hot

一款AI视频创作工具,主要用于B站推出的AI视频创作工具,适合需要提升相关任务效率的用户。

UP简历
UP简历 Hot

一款AI办公效率工具,主要用于基于AI技术的免费在线简历制作工具,适合需要提升相关任务效率的用户。

蛙蛙写作

一款AI论文写作工具,主要用于超级AI智能写作助手,适合需要提升相关任务效率的用户。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

讯飞智文

一款面向学习和办公场景的AI文档创作工具,可辅助生成PPT与Word文档,提高资料整理和内容制作效率。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

VibeKnow
VibeKnow Hot

一款AI视频创作工具,主要用于全球首个AI知识视频创作平台,文档、文章、网页,一键生成视频,适合需要提升相关任务效率的用户。

相关专题

更多
go语言闭包相关教程大全
go语言闭包相关教程大全

本专题整合了go语言闭包相关数据,阅读专题下面的文章了解更多相关内容。

5073

2025.07.29

golang map内存释放
golang map内存释放

本专题整合了golang map内存相关教程,阅读专题下面的文章了解更多相关内容。

710

2025.09.05

golang map相关教程
golang map相关教程

本专题整合了golang map相关教程,阅读专题下面的文章了解更多详细内容。

343

2025.11.16

golang map原理
golang map原理

本专题整合了golang map相关内容,阅读专题下面的文章了解更多详细内容。

553

2025.11.17

java判断map相关教程
java判断map相关教程

本专题整合了java判断map相关教程,阅读专题下面的文章了解更多详细内容。

323

2025.11.27

undefined是什么
undefined是什么

undefined是代表一个值或变量不存在或未定义的状态。它可以作为默认值来判断一个变量是否已经被赋值,也可以用于设置默认参数值。尽管在不同的编程语言中,undefined可能具有不同的含义和用法,但理解undefined的概念可以帮助我们更好地理解和编写程序。本专题为大家提供undefined相关的各种文章、以及下载和课程。

12285

2023.07.31

网页undefined是什么意思
网页undefined是什么意思

网页undefined是指页面出现了未知错误的意思,提示undefined一般是在开发网站的时候定义不正确或是转换不正确,或是找不到定义才会提示undefined未定义这个错误。想了解更多的相关内容,可以阅读本专题下面的文章。

5547

2024.08.14

网页undefined啥意思
网页undefined啥意思

本专题整合了undefined相关内容,阅读下面的文章了解更多详细内容。后续继续更新。

2516

2025.12.25

Postman身份认证怎么配置
Postman身份认证怎么配置

本专题从实际API接口调试场景出发,讲解Postman身份认证的完整配置流程,包括常见认证协议介绍、授权参数设置、访问令牌填写、OAuth 2.0授权及认证失败排查,帮助用户正确完成接口授权与访问验证。

60

2026.11.06

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.5万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.8万人学习

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

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn