JS 箭头函数详解

码喽小郑

于 2024-07-11 14:28:32 发布

阅读量1.1k

点赞数 20

分类专栏：零基础学JS 文章标签： javascript

本文链接：https://blog.csdn.net/m0_74948742/article/details/140350798

版权

零基础学JS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。

非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。💝💝💝 ✨✨ 欢迎订阅本专栏 ✨✨

什么是箭头函数?

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>