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、在不影响其他代码的情况下,保持代码间接。(比如数组方法中的函数,自行编写的回调函数)

相关推荐
it_remember8 分钟前
新建一个reactnative 0.72.0的项目
javascript·react native·react.js
敲代码的小吉米1 小时前
前端上传el-upload、原生input本地文件pdf格式(纯前端预览本地文件不走后端接口)
前端·javascript·pdf·状态模式
da-peng-song2 小时前
ArcGIS Desktop使用入门(二)常用工具条——数据框工具(旋转视图)
开发语言·javascript·arcgis
低代码布道师3 小时前
第五部分:第一节 - Node.js 简介与环境:让 JavaScript 走进厨房
开发语言·javascript·node.js
满怀10153 小时前
【Vue 3全栈实战】从响应式原理到企业级架构设计
前端·javascript·vue.js·vue
伟笑4 小时前
elementUI 循环出来的表单,怎么做表单校验?
前端·javascript·elementui
确实菜,真的爱4 小时前
electron进程通信
前端·javascript·electron
魔术师ID6 小时前
vue 指令
前端·javascript·vue.js
Clown956 小时前
Go语言爬虫系列教程 实战项目JS逆向实现CSDN文章导出教程
javascript·爬虫·golang
星空寻流年7 小时前
css3基于伸缩盒模型生成一个小案例
javascript·css·css3