JS 箭头函数 =>

发布时间:2024年01月17日

箭头函数介绍

箭头函数是一种声明函数的简洁语法,它与普通函数并无本质的区别,差异性更多体现在语法格式上。

目的 : 引入箭头函数的目的是更简短的函数写法并且不绑定this,箭头函数的语法比函数表达式更简洁

使用场景 : 箭头函数更适用于那些本来需要匿名函数的地方

箭头函数基本语法

//1. 箭头函数 基本语法
const fun = () => {
     console.log(123)
}


//这个箭头函数相当于下面这个普通函数
 const fn = function () {
   console.log(123)
 }
    

一些特殊语法?

1、只有一个形参的时候,可以省略小括号
<body>
  <script>

    // 2. 只有一个形参的时候,可以省略小括号
     const fn = x => {
       console.log(x)
     }
    
  </script>
</body>
2、?只有一行代码的时候,我们可以省略大括号
<body>
  <script>
 
    // // 3. 只有一行代码的时候,我们可以省略大括号
     const fn = x => console.log(x)
     fn(1)
   
  </script>
</body>
3、 只有一行代码的时候,可以省略return
<body>
  <script>
 
    // 4. 只有一行代码的时候,可以省略return
     const fn = x => x + x
     console.log(fn(1))
   
  </script>
</body>
?4、箭头函数可以直接返回一个对象?
<body>
  <script>

    // 5. 箭头函数可以直接返回一个对象 要加一个()包起来
     const fn = (uname) => ({ uname: uname })
     console.log(fn("刘德华"))

  </script>
</body>

总结:

  1. 箭头函数属于表达式函数,因此不存在函数提升
  2. 箭头函数只有一个参数时可以省略圆括号 ()
  3. 箭头函数函数体只有一行代码时可以省略花括号 {},并自动做为返回值被返回

箭头函数参数

箭头函数中没有 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>
</body>

箭头函数 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: "pink老师",
    //   sayHi: () => {
    //     console.log(this)  // this 指向谁? window
    //   }
    // }
    // obj.sayHi()

    const obj = {
      uname: "pink老师",
      sayHi: function () {
        console.log(this)  // obj
        let i = 10
        const count = () => {
          console.log(this)  // obj 
        }
        count()
      }
    }
    obj.sayHi()

</script>

在开发中【使用箭头函数前需要考虑函数中this 的值】,事件回调函数使用箭头函数时,this为全局的 window,因此DOM事件回调函数为了简便,还是不太推荐使用箭头函数

文章来源:https://blog.csdn.net/christmassss/article/details/135652233
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。