JavaScript ES6箭頭函數

箭頭函數

箭頭函數，也是定義函數的一種方式

定義函數方式

方式一：function

const fn = function () {

}

方式二：對象字面量中定義函數

//const obj = {
//  fn: function () {
//  
//  }
//}

const obj = {
  fn() {
  
  }
}

方式三：ES6中的箭頭函數

const fn = (參數列表) => {
  //函數體
}

箭頭函數參數和返回值問題

1、無參數函數

const fn = () => {

}

2、一個參數函數

const fn = (a) => {
 console.log(a)
}

const fn = a => {
  console.log(a)
}

3、多個參數函數

const sum = (num1, num2) => {
    return num1 + num2
}

4、箭頭函數體只有一行代碼的簡寫方式，下面函數定義等同於上面函數

const sum = (num1, num2) => num1 + num2

當箭頭函數體沒有return返回值，則返回undefined

const fn = () => console.log('Hello World')
console.log(fn())//先打印‘Hello World’，後打印fn函數的返回值‘undefined’

箭頭函數中的this使用

箭頭函數一般使用場景爲，把箭頭函數作爲一個參數傳入另外一個函數

setTimeout(function () {
  console.log('超時')
},1000)

//箭頭函數方式
setTimeout(() => {
  console.log('超時')
}, 1000)

箭頭函數中this問題

setTimeout(function () {
  console.log(this)//打印Window
}, 1000)

setTimeout(() => {
  console.log(this)//打印Window
}, 1000)

const obj = {
  fn() {
    setTimeout(function () {
      onsole.log(this)//打印Window
    }, 1000)

    setTimeout(() => {
      console.log(this)//打印obj
    }, 1000)
  }
}

結論：

箭頭函數中的this引用的就是最近作用域中的this(向外層作用域中，一層層查找this，直到有this定義)，而普通function定義函數會通過call方式傳入Window