JavaScript箭头函数的使用和this指向

01—箭头函数的基本使用

普通定义函数的方式：function

const aaa = function() {}  
// es6箭头函数
const aaa = () => {}

对象字面量定义函数

const obj = {
  bbb: function() {},
  aaa: function() {}
}
// es6中对象字面量定义函数
const obj = {
  aaa() {},
  bbb() {}
}

什么时候使用箭头函数

准备把一个函数作为参数，传到另一个函数中时，使用的最多。

例如: 定时器

setTimeout(function() {
  
}, 1000)

使用箭头函数后：看起来更加简洁和方便

setTimeout(() => {

}, 1000)

02—箭头函数参数和返回值

es6中的箭头函数(无参)

const ccc = (参数列表) => {}

const aaa = function() {}
// es6箭头函数
const aaa = () => {}

箭头函数参数问题

1. 放入两个参数

   const sum = (num1, num2) => {
     console.log(num1 + num2)
   }
   

2. 放入一个参数，一个参数时括号可以省略 ( )

   const power = (num) => {
     return num * num
   }
   // 只有一个参数时候括号可以省略
   const power = num => {
     return num* num
   }
   

箭头函数中

1. ** 函数中只有一条语句时候可以省略 { }**

   const sum = (num1, num2) => {
     return num1 + num2
   }
   // 一条语句，但函数中只有一行代码时可以省略 { }
   const sum = (num1, num2) => num1 + num2
   

03—箭头函数中this的指向和使用

箭头函数中 this 的使用

setTimeout(function() {
  console.log(this) // Window
})

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

箭头函数的 this 引用的就是最近作用域中的 this

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

obj.aaa()

const obj = {
  aaa() {
    // 定时器中本身没有this ,是通过call传进去的window，所以this是window
    setTimeout(function() {
      console.log(this) 
    })
    // 箭头函数中的this是向外层作用域中层层查找的
    setTimeout(() => {
      console.log(this) 
    })
  }
}

obj.aaa()

练习题目：

const obj = {
  aaa() {
    setTimeout(function() {
      setTimeout(function() {
        console.log("this1==>", this)
      })
      
      setTimeout(() => {
        console.log("this2==>", this)
      })
    })
    
    setTimeout(() => {
      setTimeout(function() {
        console.log("this3==>", this)
      })
      
      setTimeout(() => {
        console.log("this4==>", this)
      })
    })
  }
}

obj.aaa()

正确答案：window, window, window, obj对象

解释：

this1: 普通函数，由call传递进去window，所以this指向window

this2: 箭头函数this向外层查找，外层是一个被传入了普通函数的定时器，有this指向，所以this在外层查找时找到了window

this3：普通函数，也是由call传递进去window，所以this指向window

this4：箭头函数，this向外层查找，外层也是一个箭头函数无this，

const obj = {
  aaa() {
    setTimeout(function() {
      // 由call传递进去window，所以this指向window
      setTimeout(function() {
        console.log("this1==>", this) // window
      })
  
      // 该定时器外部是一个被传入了普通函数的定时器，所以this在外层查找时找的了window
      console.log("普通的定时器指向==>", this) // windows
      setTimeout(() => {
        console.log("this2==>", this) // window
      })
    })
    
    setTimeout(() => {
      // 也是由call传递进去window，所以this指向window
      setTimeout(function() {
        console.log("this3==>", this) // window
      })
      
      // this经过两次向外查找，最终找到obj中的指向，obj对象
      setTimeout(() => {
        console.log("this4==>", this) // obj
      })
    })
    console.log("obj中的this指向==>", this) // obj对象
  }
}

obj.aaa()