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

javascript中的箭头函数是什么_它与普通函数有何区别【教程】

胖浩小哥_6604

胖浩小哥_6604

发布时间:2026-01-16 22:16:53

|

388人浏览过

|

来源于php中文网

原创

箭头函数无自有this,继承外层非箭头函数的this;不可用作构造函数,无prototype、arguments、caller、callee;单表达式自动返回,多语句需显式return;不支持重复参数名。

javascript中的箭头函数是什么_它与普通函数有何区别【教程】

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

这是最常踩坑的一点。普通函数的 this 取决于调用方式(如 obj.method() 中 this 指向 obj),而箭头函数完全不绑定 this,它只是沿作用域链向上找最近的非箭头函数的 this 值。

典型错误场景:

  • 对象方法写成箭头函数:
    const obj = {
      name: 'Alice',
      say: () => console.log(this.name) // 输出 undefined,不是 'Alice'
    };
  • 事件回调中想访问实例属性,却用了箭头函数导致 this 指向丢失
  • Vue/React 类组件中,生命周期或事件处理函数若用箭头函数声明,this 不再指向组件实例

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

你无法对箭头函数使用 new,调用会直接报错 TypeError: xxx is not a constructor。同时它没有 arguments 对象,也不支持 new.target。

替代方案:

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

  • 需要类实例?必须用 function 声明或 class
  • 需要访问参数列表?改用剩余参数 ...args:
    const sum = (...args) => args.reduce((a, b) => a + b, 0);
  • 需要判断是否被 new 调用?箭头函数天生不支持,别在这儿打主意

简写语法只在单表达式时自动返回,多语句必须加 {} 和 return

很多人误以为箭头函数“总是隐式返回”,其实仅限于形如 params => expression 这种无大括号的写法。一旦用了 {},就必须显式写 return,否则返回 undefined。

Ainative Vue Sdk
Ainative Vue Sdk

使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景:(1) 安装 `@ainative/vue-sdk`,(2) 在 Vue 组件中使用 `useChat` 组合式函数,(3) 提供……

下载

对比示例:

const add = (a, b) => a + b;           // ✅ 返回值
const log = (x) => { console.log(x) }; // ❌ 返回 undefined
const safeLog = (x) => { console.log(x); return x; }; // ✅

常见陷阱:

  • 在 .map() 或 .filter() 中漏写 return,结果数组全是 undefined
  • 把带逻辑判断的单行箭头函数误写成块级结构,导致返回值意外为 undefined

没有 caller、callee,也不支持重复参数名

箭头函数不支持严格模式下已废弃的 arguments.callee,也无法通过 func.caller 追溯调用栈。另外,它不允许同名参数(普通函数在非严格模式下允许):

const bad = (a, a) => a; // SyntaxError: Duplicate parameter name not allowed in this context

这意味着:如果你在写递归工具函数、需要动态调用上下文、或依赖参数重名做兼容处理——别用箭头函数。

真正该用箭头函数的场合很明确:需要简洁闭包、明确绑定外层 this、且不涉及构造、arguments 或复杂控制流的时候。其余时候,老实用 function 更稳妥。

相关文章

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

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

下载

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

热门AI工具

更多
SkildArt
SkildArt Hot

SkildArt是一款AI文本写作工具,一站式 AI 视觉创作平台。

豆包大模型

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

二狗PPT
二狗PPT Hot

一款AI演示文稿工具,主要用于专为中式职场打造的AI PPT生成工具,适合需要提升相关任务效率的用户。

DeepSeek

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

蛙蛙写作

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

UpDream
UpDream Hot

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

WorkBuddy

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

VibeKnow
VibeKnow Hot

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

切问学术

切问学术是一款AI论文写作工具,复旦大学NLP团队推出的AI学术智能体。

相关专题

更多
堆和栈的区别
堆和栈的区别

堆和栈的区别:1、内存分配方式不同;2、大小不同;3、数据访问方式不同;4、数据的生命周期。本专题为大家提供堆和栈的区别的相关的文章、下载、课程内容,供大家免费下载体验。

5567

2023.07.18

堆和栈区别
堆和栈区别

堆(Heap)和栈(Stack)是计算机中两种常见的内存分配机制。它们在内存管理的方式、分配方式以及使用场景上有很大的区别。本文将详细介绍堆和栈的特点、区别以及各自的使用场景。php中文网给大家带来了相关的教程以及文章欢迎大家前来学习阅读。

2408

2023.08.10

class在c语言中的意思
class在c语言中的意思

在C语言中,"class" 是一个关键字,用于定义一个类。想了解更多class的相关内容,可以阅读本专题下面的文章。

3756

2024.01.03

python中class的含义
python中class的含义

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

306

2025.12.06

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

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

4153

2025.07.29

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

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

550

2025.09.05

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

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

323

2025.11.16

golang map原理
golang map原理

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

513

2025.11.17

剧云AI短剧创作教程合集
剧云AI短剧创作教程合集

本专题聚焦剧云AI短剧创作,讲解从短剧灵感、梗概、全局大纲到分集、分场和正文的完整流程及节奏设计方法。

0

2026.10.14

热门下载

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

精品课程

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

共0课时 | 0人学习

Vue 教程
Vue 教程

共42课时 | 17.1万人学习

Vue3.x 工具篇--十天技能课堂
Vue3.x 工具篇--十天技能课堂

共26课时 | 2.5万人学习

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

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