箭头函数中的this的使用

最新推荐文章于 2024-04-03 22:06:54 发布

小草dym

最新推荐文章于 2024-04-03 22:06:54 发布

阅读量155

点赞数

本文链接：https://blog.csdn.net/qq_39368007/article/details/116784648

版权

什么时候使用箭头函数

问题: 箭头函数中的this是如何查找的了?

答案: 向外层作用域中, 一层层查找this, 直到有this的定义.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<script>
  // 什么时候使用箭头函数
  // setTimeout(function () {
  //   console.log(this);
  // }, 1000)
  //
  // setTimeout(() => {
  //   console.log(this);
  // }, 1000)

  // 问题: 箭头函数中的this是如何查找的了?
  // 答案: 向外层作用域中, 一层层查找this, 直到有this的定义.
  // const obj = {
  //   aaa() {
  //     setTimeout(function () {
  //       console.log(this); // window
  //     })
  //
  //     setTimeout(() => {
  //       console.log(this); // obj对象
  //     })
  //   }
  // }
  //
  // obj.aaa()


  const obj = {
    aaa() {
      setTimeout(function () {
        setTimeout(function () {
          console.log(this); // window
        })

        setTimeout(() => {
          console.log(this); // window
        })
      })

      setTimeout(() => {
        setTimeout(function () {
          console.log(this); // window
        })

        setTimeout(() => {
          console.log(this); // obj
        })
      })
    }
  }

  obj.aaa()
</script>
</body>
</html>