es6+-箭头函数细节与应用场景

与函数表达式的区别
箭头函数

  • 更简洁的语法:箭头函数允许你用更简洁的方式书写函数。
  • 没有自己的this、arguments、super和new.target:箭头函数不绑定这些关键字,它们从封闭的词法环境中继承这些值。
  • 不能用作构造函数:由于没有自己的this,箭头函数不能用作构造函数,也就是说,不能使用new操作符。
  • 没有原型:由于不能用作构造函数,箭头函数没有prototype属性。
  • 不能改变this的绑定:call、apply和bind方法不能改变箭头函数的this值。
  • 不适用于方法:由于箭头函数不绑定this,它们不适合作为对象的方法使用。
  • 不支持arguments对象:箭头函数不绑定arguments对象,需要使用剩余参数(...rest)来获取所有传入的参数。
  • 匿名函数:箭头函数通常是匿名的,尽管可以为其指定一个名字。

函数表达式

  • 更传统的语法:函数表达式更接近于传统编程语言中函数的定义方式。
  • 有自己的this、arguments、super和new.target:函数表达式有自己的执行上下文,包括this、arguments等。
  • 可以用作构造函数:函数表达式可以用new操作符来创建对象实例。
  • 有原型:函数表达式有prototype属性,可以用来构建对象的原型链。
  • 可以改变this的绑定:可以使用call、apply和bind方法来改变函数表达式的this值。
  • 适用于方法:函数表达式可以用作对象的方法,并且this会指向调用该方法的对象。
  • 支持arguments对象:函数表达式可以访问arguments对象,它包含了函数接收到的所有参数。
  • 可以具名或匿名:函数表达式可以是具名的,也可以是匿名的。

使用场景

1、临时性使用的函数:

  • 事件处理函数
  • 异步处理函数
  • 匿名函数

2、为了绑定外层this的函数(比如定时器层级的this)

3、在不影响其他代码的情况下,保持代码间接。(比如数组方法中的函数,自行编写的回调函数)

相关推荐
yqcoder14 小时前
异步的魔法:深入解析 async/await 原理与编译本质
前端·javascript
taocarts_bidfans15 小时前
2026跨境SaaS工具选型指南:Taoify与Shopify/Shopyy/Ueeshop深度对比
java·前端·javascript·跨境电商·独立站
CAD老兵15 小时前
一张 HTML 走天下:CAD-Viewer 首创的「离线 CAD 看图」
前端·javascript·github
大师兄666816 小时前
HarmonyOS 服务卡片开发之JS 卡片开发
javascript·华为·harmonyos·harmonyos6·formkit
Highcharts.js17 小时前
AI向量知识谱系图表创建示例代码|Highcharts网络图表(networkgraph)搭建案例
开发语言·前端·javascript·网络·信息可视化·编辑器·highcharts
阿正的梦工坊17 小时前
React:构建用户界面的JavaScript库
javascript·react.js·ui
行走的陀螺仪17 小时前
[特殊字符] JavaScript 设计模式完全指南:从入门到精通(含20种模式)
开发语言·javascript·设计模式
胡萝卜术18 小时前
《JavaScript 语言精粹》第三章精读:对象——最基础也最容易被误解的基石
javascript
A南方故人18 小时前
vue3常用指令以及注册
前端·javascript·vue.js
ZC跨境爬虫18 小时前
跟着 MDN 学 HTML day_62:(HTML调试与常见错误修复指南)
java·前端·javascript·ui·html·媒体