程序员社区

箭头函数的使用和this指向

目录

1.基本使用

箭头函数也是一种定义函数的方式

定义函数的方式:
①用function
const aaa = function() {}
②用对象字面量
const obj = {
bbb: function() {},
bbb() {}
}
③ES6里面的箭头函数
const ccc = (参数列表) => {}
没参数: const obj = () => {}
有参数:
有一个参数: const product = num => { return num * num }
有两个参数: const sum = (num1,num2) => {return num1 + num2}
当函数体中只有一行代码时,可以这样简写:
const sum = (num1,num2) => num1 + num2
不用写return,因为它会自动帮你返回

2.箭头函数里面的this指向

箭头函数里面的this指向的是最近作用域的this
setTimeout() 是属于window 的方法,函数中的this会指向window对象

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Title</title>
</head>
<body>
<script>
  setTimeout(function () {
    console.log(this)   //window
  }, 1000)
  setTimeout(() => {
    console.log(this)   //window
  }, 1000)

  const obj = {
    aaa(){
      setTimeout(function () {
        console.log(this) //window
      }, 1000)
      setTimeout(() => {
        console.log(this) //obj
      }, 1000)
    },
    bbb(){
      setTimeout(function () {
        setTimeout(function () {
          console.log(this)   //window
        }, 1000)
        setTimeout(() => {
          console.log(this)   //window
        }, 1000)
      }, 1000)

      setTimeout(() => {
        setTimeout(function () {
          console.log(this)   //window
        }, 1000)    
        setTimeout(() => {
          console.log(this)   //obj
        }, 1000)
      }, 1000)
    }
  }
  obj.aaa()
  obj.bbb()
</script>
</body>
</html>

在这里插入图片描述

赞(0) 打赏
未经允许不得转载:IDEA激活码 » 箭头函数的使用和this指向

一个分享Java & Python知识的社区