JS 箭头函数 =＞-Toy模板网

这篇具有很好参考价值的文章主要介绍了JS 箭头函数 =＞。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

箭头函数介绍

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

目的 : 引入箭头函数的目的是更简短的函数写法并且不绑定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>

总结：

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

箭头函数参数

箭头函数中没有 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://www.toymoban.com/news/detail-800425.html

到了这里，关于JS 箭头函数 =＞的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！