💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。
非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。💝💝💝 ✨✨ 欢迎订阅本专栏 ✨✨
什么是箭头函数?
1. 箭头函数的基本语法
- 参数列表:如果没有参数,使用空括号
()
。如果只有一个参数,可以省略括号,例如(param) => ...
可以简写为param => ...
- 箭头符号
=>
:箭头符号是箭头函数的核心,表示函数的定义。 - 函数体:可以是单条语句或者多条语句。如果是单条语句,可以省略花括号
{}
和return
关键字。
2. 箭头函数的特性
-
没有自己的
this
:箭头函数没有自己的this
绑定,它会继承外层作用域的this
值。这解决了传统函数中this
绑定造成的一些混淆和问题。 -
没有
arguments
对象:箭头函数也没有自己的arguments
对象,但可以使用...args
语法来获取所有参数。 -
不能用作构造函数:箭头函数不能使用
new
关键字调用,因此不能用作构造函数来创建对象实例。 -
没有
super
关键字:箭头函数也不能使用super
关键字来访问父类的属性或方法。
3. 适用场景
箭头函数主要适用于以下几种场景:
-
回调函数:特别是在处理事件监听器或者数组遍历时,箭头函数可以提供更简洁的写法。
-
简化的函数表达:当函数体较短且逻辑简单时,箭头函数可以让代码更加精炼和易读。
-
保持作用域链:由于箭头函数不会绑定自己的
this
,它可以帮助开发者更清晰地理解和维护代码中的作用域链。
4. 注意事项
-
作用域链的影响:箭头函数继承外层作用域的
this
,可能会导致意外的结果,需要谨慎使用。 -
与传统函数的区别:在一些特定场景下,传统的函数定义方式可能更合适,尤其是涉及到动态
this
绑定、使用arguments
对象等情况。 -
适用范围:尽管箭头函数非常有用,但并不是所有场景都适合使用,需要根据具体情况进行选择。
箭头函数的一些用法
<body>
<script>
// const fn = function () {
// console.log(123)
// }
// 1. 箭头函数 基本语法
// const fn = () => {
// console.log(123)
// }
// fn()
// const fn = (x) => {
// console.log(x)
// }
// fn(1)
// 2. 只有一个形参的时候,可以省略小括号
// const fn = x => {
// console.log(x)
// }
// fn(1)
// // 3. 只有一行代码的时候,我们可以省略大括号
// const fn = x => console.log(x)
// fn(1)
// 4. 只有一行代码的时候,可以省略return
// const fn = x => x + x
// console.log(fn(1))
// 5. 箭头函数可以直接返回一个对象
// const fn = (uname) => ({ uname: uname })
// console.log(fn('刘德华'))
</script>
</body>
总结:
- 箭头函数属于表达式函数,因此不存在函数提升
- 箭头函数只有一个参数时可以省略圆括号
()
- 箭头函数函数体只有一行代码时可以省略花括号
{}
,并自动做为返回值被返回
箭头函数不能使用arguments
箭头函数中没有 arguments
,只能使用 ...
动态获取实参
<body>
<script>
// 1. 利用箭头函数来求和
const getSum = (...arr) => {
let sum = 0
for (let i = 0; i < arr.length; i++) {
sum += arr[i]
}
return sum
}
const result = getSum(2, 3, 4)
console.log(result) // 9
</script>
箭头函数没有独立的this
箭头函数不会创建自己的this,它只会从自己的作用域链的上一层沿用this。
<script>
// 以前this的指向: 谁调用的这个函数,this 就指向谁
// console.log(this) // window
// // 普通函数
// function fn() {
// console.log(this) // window
// }
// window.fn()
// // 对象方法里面的this
// const obj = {
// name: 'andy',
// sayHi: function () {
// console.log(this) // obj
// }
// }
// obj.sayHi()
// 2. 箭头函数的this 是上一层作用域的this 指向
// const fn = () => {
// console.log(this) // window
// }
// fn()
// 对象方法箭头函数 this
// const obj = {
// uname: '大学生小郑',
// sayHi: () => {
// console.log(this) // this 指向谁? window
// }
// }
// obj.sayHi()
const obj = {
uname: '大学生小郑,
sayHi: function () {
console.log(this) // obj
let i = 10
const count = () => {
console.log(this) // obj
}
count()
}
}
obj.sayHi()
</script>
❤️❤️❤️小郑是普通学生水平,如有纰漏,欢迎各位大佬评论批评指正!😄😄😄
💘💘💘如果觉得这篇文对你有帮助的话,也请给个点赞、收藏下吧,非常感谢!👍 👍 👍