1. 程式人生 > >箭頭函數中的this

箭頭函數中的this

寫法 doc 節點 lis key 特殊 span this 函數返回

箭頭函數中 this 的值等同於箭頭函數當前所處作用域下的 this。

  箭頭函數的一些不易理解場景

var inputTest = document.getElementsByTagName(‘input‘)
inputTest[0].addEventListener(‘click‘, function() {
  console.log(this) // 指向 input
})
inputTest[0].addEventListener(‘click‘, () => {
  console.log(this) // window
})
上述這段是為 dom 節點綁定事件的常見寫法, 但是 this 指向就很奇怪了, ES5 中指向了 input;
, ES6 中卻指向了 window。至於原因, 其實是回調函數引起的坑(得看瀏覽器觸發事件時的代碼)。再加上箭頭函數的特殊性所以產生以上迷惑的代碼片段。

當箭頭函數返回的結果是對象時, 註意下寫法的細節:
const result1 = () => ({ a: 1 })
const result2 = () => { return { a: 1 } }
 

箭頭函數中的this