ES6 學習筆記（二） 箭頭函數的 this

那麼在先前已經學習過了箭頭函數的寫法，有沒有又覺得自己又潮了一點，箭頭函數並不只是單純寫法上的改變，另一個好處是箭頭函數的 this 是綁定父級作用域的，這麼說不太清楚不如直接看程式碼比較快。

範例

先來一段常常會見到的錯誤範例

  const person = {

    name: 'jimmy',
    skills: ['html', 'css', 'php', 'js', 'vue', 'drupal', 'wordpress', 'laravel'],
    getSkills: function () {
      this.skills.map(function (skill) {
        // console.log(this) 會是 Window
        console.log(`${this.name}會 ${skill} 技能`)
      })
    }
  }

  person.getSkills()

得到的輸出會是

會 html 技能
會 css 技能
會 php 技能
會 js 技能
會 vue 技能
會 drupal 技能
會 wordpress 技能
會 laravel 技能

當然稍微有踩過地雷的都會知道 this 在這邊會是 Window ，那麼是為什麼呢？因為 map 調用的是回調函數，所以

function (skill) {
        // console.log(this) 會是 Window
        console.log(`${this.name}會 ${skill} 技能`)
      }

這整段是一個單獨的函數，所以他的 this 會指向 Window。

那麼如果我們用箭頭函數來改寫呢？

  const person = {

    name: 'jimmy',
    skills: ['html', 'css', 'php', 'js', 'vue', 'drupal', 'wordpress', 'laravel'],
    getSkills: function () {
      this.skills.map( (skill) => {
        console.log(`${this.name}會 ${skill} 技能`)
      })
    }
  }

結果當然會是

jimmy會 html 技能
jimmy會 css 技能
jimmy會 php 技能
jimmy會 js 技能
jimmy會 vue 技能
jimmy會 drupal 技能
jimmy會 wordpress 技能
jimmy會 laravel 技能

那麼這是為什麼呢？因為 箭頭函數的 this 是會繼承父級作用域的，原本的寫法 this 是動態綁定的 所以我們使用 es6 的箭頭函數就可以不用擔心 this 值會一直變動的問題了