讲师中心 微信公众号
AI工具推荐 视频效率加速

javascript的箭头函数与传统函数有何区别_语法、this与适用场景分析【教程】

胖浩小哥_6604

胖浩小哥_6604

发布时间:2026-01-16 22:25:19

|

315人浏览过

|

来源于php中文网

原创

箭头函数无自有this,继承定义时词法作用域的this;不可作为构造函数,无arguments和prototype;支持隐式返回与剩余参数;不适用于需动态this的DOM事件或对象方法。

javascript的箭头函数与传统函数有何区别_语法、this与适用场景分析【教程】

箭头函数没有自己的 this,它继承外层作用域的 this

这是最核心的区别。传统函数(function)每次调用都会绑定一个新的 this,具体值取决于调用方式(如对象方法调用、call/apply、独立调用等)。而箭头函数不绑定 this,它直接沿用定义时所在词法作用域的 this 值。

常见错误现象:

  • 在对象方法中使用箭头函数,this 指向全局或 undefined(严格模式),而非该对象
  • 给事件监听器或定时器传入箭头函数,本意想访问实例属性,结果 this 是外层函数的上下文

示例对比:

const obj = {
  name: 'Alice',
  regularFunc() {
    console.log(this.name); // 'Alice'
  },
  arrowFunc: () => {
    console.log(this.name); // undefined(严格模式下)
  }
};

适用场景:回调函数中需保持外层 this(如 map、setTimeout、React 事件处理中绑定实例方法);不适用于需要动态 this 的场合(如 Vue 方法、jQuery 插件写法、构造函数)。

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

箭头函数不能作为构造函数,也没有 arguments 和 prototype

箭头函数没有 [[Construct]] 内部方法,因此不能用 new 调用,否则抛出 TypeError: xxx is not a constructor。同时它没有 arguments 对象,也不提供 prototype 属性。

替代方案:

Java注释规范Skills
Java注释规范Skills

当用户要求为 Java 代码添加注释、修改注释、审查注释、整理注释格式,或要求按照代码注释规范处理 Java 文件时,使用本技能。本技能用于统一生成和维护 Java 类注释模板、按 Git 对比 release 判断版本号、补充每行代码上方中文块注释、调整注释空行规则,并保持 Java 文件 UTF-8 无 BOM 编码。典型触发场景包括:补充类注释、更新 @version、检查 @author 来源、整理行尾注释、把注释放到代码上一行、检查注释是否符合规范、构建前检查 Java 注释风格。

下载
  • 需要类/实例行为 → 必须用 function 或 class
  • 需要访问参数列表 → 改用剩余参数 ...args(箭头函数支持)
  • 需要原型链或继承 → 箭头函数完全不适用

示例:

const add = (a, b) => a + b;
// add.prototype // undefined
// new add(1, 2) // TypeError
<p>const sum = (...nums) => nums.reduce((a, b) => a + b, 0); // ✅ 用剩余参数代替 arguments

语法简写带来的隐式返回与单参数省略括号规则

箭头函数在满足特定结构时会隐式返回表达式结果,无需 return 和大括号;但一旦使用大括号,就必须显式写 return,否则返回 undefined。

常见陷阱:

  • x => { x * 2 } 不返回任何值(只是语句块),实际返回 undefined
  • x => ({ id: x }) 需要外层小括号包裹对象字面量,否则会被解析为代码块
  • 单参数时可省略括号,但无参或多个参数必须加括号:() => 1、(a, b) => a + b

示例:

const double1 = x => x * 2;           // ✅ 隐式返回
const double2 = x => { return x * 2 }; // ✅ 显式返回
const double3 = x => { x * 2 };        // ❌ 返回 undefined
const makeObj = x => ({ id: x });       // ✅ 返回对象字面量

箭头函数不适合用于需要动态上下文的 DOM 事件或对象方法

DOM 事件处理器默认将 this 绑定到触发事件的元素,jQuery 的 .each() 也类似。若在此类场景误用箭头函数,this 就不再是目标元素,而是外层作用域的值。

典型场景判断:

  • 用 addEventListener 时:传统函数可直接用 this 访问元素,箭头函数需改用 event.target
  • 在 Vue 选项对象的 methods 中:必须用传统函数,否则 this 指向错误
  • 在 React 类组件中:箭头函数常用于避免手动绑定 this,但仅限于作为回调传入(如 onClick={this.handleClick}),不可用于定义生命周期方法

容易被忽略的一点:箭头函数的“词法 this”是定义时决定的,不是运行时。哪怕把它从一个对象方法里提取出来再调用,它的 this 也不会变——这点和传统函数的“动态绑定”本质不同,调试时尤其要注意上下文来源。

热门AI工具

更多
豆包大模型

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

超级简历WonderCV

一款AI办公效率工具,主要用于免费求职简历模版下载制作,应届生职场人必备简历制作神器,适合需要提升相关任务效率的用户。

UP简历
UP简历 Hot

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

超级麦吉

一款通过数字员工协作完成调研、数据分析与文档制作的AI办公平台。

DeepSeek

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

VibeKnow
VibeKnow Hot

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

UpDream
UpDream Hot

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

WorkBuddy

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

AionClaw
AionClaw Hot

AionClaw是一款面向办公、创作和编程任务的AI桌面智能体。

相关专题

更多
jquery插件有哪些
jquery插件有哪些

jquery插件有jQuery UI、jQuery Validate、jQuery DataTables、jQuery Slick、jQuery LazyLoad、jQuery Countdown、jQuery Lightbox、jQuery FullCalendar、jQuery Chosen和jQuery EasyUI等。本专题为大家提供jquery插件相关的文章、下载、课程内容,供大家免费下载体验。

601

2023.09.12

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

1156

2023.10.13

jquery删除元素的方法
jquery删除元素的方法

jquery可以通过.remove() 方法、 .detach() 方法、.empty() 方法、.unwrap() 方法、.replaceWith() 方法、.html('') 方法和.hide() 方法来删除元素。更多关于jquery相关的问题,详情请看本专题下面的文章。php中文网欢迎大家前来学习。

2242

2023.11.10

jQuery hover()方法的使用
jQuery hover()方法的使用

hover()是jQuery中一个常用的方法,它用于绑定两个事件处理函数,这两个函数将在鼠标指针进入和离开匹配的元素时执行。想了解更多hover()的相关内容,可以阅读本专题下面的文章。

2148

2023.12.04

jquery实现分页方法
jquery实现分页方法

在jQuery中实现分页可以使用插件或者自定义实现。想了解更多jquery分页的相关内容,可以阅读本专题下面的文章。

493

2023.12.06

jquery中隐藏元素是什么
jquery中隐藏元素是什么

jquery中隐藏元素是非常重要的一个概念,在使用jquery隐藏元素之前,需要先了解css样式中关于元素隐藏的属性,比如display、visibility、opacity等属性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

337

2024.02.23

jquery中什么是高亮显示
jquery中什么是高亮显示

jquery中高亮显示是指对页面搜索关键词时进行高亮显示,其实现办法:1、先获取要高亮显示的行,获取搜索的内容,再遍历整行内容,最后添加高亮颜色;2、使用“jquery highlight”高亮插件。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

786

2024.02.23

jQuery 正则表达式相关教程
jQuery 正则表达式相关教程

本专题整合了jQuery正则表达式相关教程大全,阅读专题下面的文章了解更多详细内容。

289

2026.01.13

Gradle插件开发入门教程
Gradle插件开发入门教程

本专题介绍Gradle插件开发的基本流程,涵盖插件类编写、自定义任务注册、扩展参数设计和插件应用方法,帮助你理解插件如何组织构建逻辑,减少多个项目之间的重复配置。

100

2026.10.22

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
uni-app快速上手
uni-app快速上手

共0课时 | 0人学习

Vue 教程
Vue 教程

共42课时 | 17.3万人学习

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

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