箭頭函數中的'this'值

• 2020 年 4 月 7 日
• 筆記

首先我們來看一下，通過以下場景，能夠輸出什麼內容。

const Lucifer = {              name: 'lucifer',              hobbies: ['Eating', 'Sleeping', 'Repeat'],              ZnHobbies: function () {                  this.hobbies.map(function (hobby) {                      console.log(`${this.name} loves ${hobby}`);                  })              }          }  Lucifer.ZnHobbies();

//以下是輸出結果   loves Eating   loves Sleeping   loves Repeat

那麼 為什麼hobby的值輸出成功，而name不能夠輸出呢？是因為lucifer丑嗎？其實那只是其中一個因素，還有一個因素就是在ZnHobbies方法中的this已經不屬於上一個區塊，而這裡的this並沒有name值。所以 解決辦法的其中一個就是在ZnHobbies函數中寫入

var that = this;

然後將this替換成that，所以輸出的結果中，就有了lucifer的名字啦。

還有的一個辦法就是將ZnHobbies函數下的map改寫成箭頭函數：

ZnHobbies: function () {                  this.hobbies.map((hobby)=> {                      console.log(`${this.name} loves ${hobby}`);                  })              }

這樣改寫完，Lucifer的name也可以顯示出來啦！

為什麼箭頭函數可以達到這樣的效果呢？是因為箭頭函數沒有它自己的'this'值。它的this值是繼承於它的父作用域的。所以它不會隨著調用方法的改變而改變，所以這裡的this值就指向它的父級作用域，而上一個this指向的是Lucifer這個Object。所以我們就能準確得到Lucifer的name值啦。