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

javascript箭头函数是什么_它和普通函数有哪些区别?

胖枫小哥_6423

胖枫小哥_6423

发布时间:2026-01-04 22:38:31

|

280人浏览过

|

来源于php中文网

原创

箭头函数没有自己的this,继承外层词法作用域的this;不能用作构造函数,无prototype、arguments、caller、callee、yield,也不支持new调用,适用于无需独立this和构造能力的场景。

javascript箭头函数是什么_它和普通函数有哪些区别?

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

这是最常踩坑的一点。普通函数的 this 在调用时动态绑定(取决于怎么调用),而箭头函数压根不绑定 this,它直接从定义时的词法作用域向上查找 this 值。

典型问题场景:给 DOM 元素绑定事件、在对象方法中使用定时器、Vue/React 组件里写回调。

  • 普通函数:
    const obj = {
      name: 'Alice',
      say: function() { console.log(this.name) }
    }
    obj.say() // 'Alice';但 setTimeout(obj.say, 100) 会输出 <code>undefined</code>(因为 <code>this</code> 指向全局)
  • 箭头函数:
    const obj = {
      name: 'Alice',
      say: () => { console.log(this.name) } // 这里的 <code>this</code> 是定义时外层的 <code>this</code>,不是 <code>obj</code>
    }
    // 即使调用 obj.say(),也几乎肯定不是你想要的结果

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

它没有 [[Construct]] 内部方法,所以不能用 new 调用;同时没有 prototype 属性,也不能被原型链继承;也没有独立的 arguments 对象(得靠 rest 参数 ...args 替代)。

  • 报错示例:
    const Arrow = () => {}
    new Arrow() // TypeError: Arrow is not a constructor
  • 替代 arguments:
    function old(a, b) { console.log(arguments[0]) }
    const arrow = (...args) => { console.log(args[0]) }

箭头函数没有 arguments、caller、callee,也不支持 yield

这些是普通函数的特有属性或能力。箭头函数设计初衷就是“轻量级函数表达式”,不承担构造、动态参数捕获或协程职责。

Reactivation Specialist · 流失召回
Reactivation Specialist · 流失召回

适用于用户提出以下需求时:“构建赢回活动(win-back campaign)”、“重新激活已流失订阅者(re-engage lapsed subscribers)”、“执行重新授权 / 重新同意(re-permission / re-consent)清理”或“清理无效联系人列表(sunset my dead list)”;输出一个闭环式再激活方案——包括:流失用户群组(lapsed-cohort)定义、分阶段优惠阶梯(staged offer ladder)、重新授权(re-consent / re-p

下载

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

  • arguments 不可用 → 必须用 rest 参数;
  • caller/callee 在严格模式下本就禁用,但箭头函数彻底没这俩属性;
  • yield 不能用 → 要写生成器必须用 function*,不能写 () => yield;
  • 没有 name 属性(或为 ""),调试时堆栈里显示为 anonymous。

什么时候该用箭头函数?记住两个关键信号

一是「不需要自己的 this」,二是「不需要被 new 调用」。常见于:数组方法回调(map/filter/reduce)、事件监听器(当需要闭包访问外层变量时)、Promise 链中的 then 回调。

  • 推荐用法:
    [1, 2, 3].map(x => x * 2)
    button.addEventListener('click', () => this.handleClick()) // this 指向组件实例
  • 不该用的场景:
    const utils = {
      now() { return Date.now() },
      delay: () => setTimeout(this.now, 100) // ❌ this.now 是 undefined,因为箭头函数的 this 不是 utils

真正容易被忽略的是:箭头函数的简洁性会掩盖它对执行上下文的“无感”——它不关心你怎么调用它,只认自己出生的地方。写之前先问一句:这里需要自己的 this 吗?需要被 new 吗?需要动态参数吗?答案只要有一个“是”,就别用箭头函数。

相关文章

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

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

下载

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

热门AI工具

更多
WorkBuddy

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

PixPix
PixPix Hot

PixPix是一款面向电商视觉生产的AI商品图生成工具。

豆包大模型

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

Loomy
Loomy Hot

一款AI工具,主要用于科大讯飞发布的桌面级 AI 助理,比 OpenClaw 更易用、更安全!,适合需要提升相关任务效率的用户。

Flowith
Flowith Hot

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

码上飞
码上飞 Hot

一款基于自然语言的AI应用开发平台,可根据用户描述自动生成应用程序,帮助个人和团队快速完成应用原型与开发。

二狗PPT
二狗PPT Hot

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

小橡皮AI

一款AI工具,主要用于小橡皮一键去AI味,将机器味重的内容改得更有活人感,防止因为 AI 内容被平台打上 AI 标签,以及限流,适合需要提升相关任务效率的用户。

DeepSeek

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

相关专题

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

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

6587

2023.07.18

堆和栈区别
堆和栈区别

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

2748

2023.08.10

堆和栈的区别
堆和栈的区别

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

6587

2023.07.18

堆和栈区别
堆和栈区别

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

2748

2023.08.10

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

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

4893

2025.07.29

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

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

690

2025.09.05

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

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

343

2025.11.16

golang map原理
golang map原理

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

553

2025.11.17

DBeaver怎么导入数据
DBeaver怎么导入数据

DBeaver数据导入专题,整理Excel、CSV、SQL、TXT等常见文件的数据导入方法,涵盖目标数据库选择、数据表创建、字段映射、数据类型设置及导入参数配置等操作,帮助用户将本地文件中的数据写入数据库,并了解批量导入、重复数据处理和导入失败等常见问题的解决方法。

0

2026.11.05

热门下载

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

精品课程

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

共0课时 | 0人学习

Vue 教程
Vue 教程

共42课时 | 17.4万人学习

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

共26课时 | 2.6万人学习

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

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