很多在擼代碼的時候，涉及到this總會出現一些問題，無法得到我們想要的值。大多數時候是我們沒有弄清楚this的指向到底是什麼，所以在某些情況下，this得到的不是我們想要的值。最近學習了一下函數中this指向的問題，在此分享出來也方便自己日後鞏固學習。
普通函數與ES6中箭頭函數裏，this指向的問題
一、普通函數中this
（1）總是代表着它的直接調用者，如obj.fn，fn裏的最外層this就是指向obj
（2）默認情況下，沒有直接調用者，this指向window
（3）嚴格模式下（設置了’use strict’），this爲undefined
（4）當使用call，apply，bind（ES5新增）綁定的，this指向綁定對象
註釋：
-
call 方法第一個參數是this的指向，後面傳入的是一個參數列表。當第一個參數爲null、undefined的時候，默認指向window。如：getColor.call(obj, ‘yellow’, ‘blue’, ‘red’)
-
apply 方法接受兩個參數，第一個參數是this的指向，第二個參數是一個參數數組。當第一個參數爲null、undefined的時候，默認指向window。如：getColor.apply(obj, [‘yellow’, ‘blue’, ‘red’])
-
bind 方法和 call 方法很相似，第一個參數是this的指向，從第二個參數開始是接收的參數列表。區別在於bind方法返回值是函數以及bind接收的參數列表的使用。低版本瀏覽器沒有該方法，需要自己手動實現
-
以上 call，apply，bind 方法是ES5新增，如果想要了解更多可以自行百度谷歌研究一下(▽)
二、ES6箭頭函數中this
更短的函數，相當於匿名函數，簡化了函數的定義
（1）默認指向定義它時，所處上下文的對象的this指向。即ES6箭頭函數裏this的指向就是上下文裏對象this指向，偶爾沒有上下文對象，this就指向window
（2）即使是call，apply，bind等方法也不能改變箭頭函數this的指向
一些實例加深印象
（1）hello是全局函數，沒有直接調用它的對象，也沒有使用嚴格模式，this指向window
function hello() {
console.log(this); // window
}
hello();
（2）hello是全局函數，沒有直接調用它的對象，但指定了嚴格模式（‘use strict’），this指向undefined
function hello() {
'use strict';
console.log(this); // undefined
}
hello();
（3）hello直接調用者是obj，第一個this指向obj，setTimeout裏匿名函數沒有直接調用者，this指向window
const obj = {
num: 10,
hello: function () {
console.log(this); // obj
setTimeout(function () {
console.log(this); // window
});
}
}
obj.hello();
（4）hello直接調用者是obj，第一個this指向obj，setTimeout箭頭函數，this指向最近的函數的this指向，即也是obj
const obj = {
num: 10,
hello: function () {
console.log(this); // obj
setTimeout(() => {
console.log(this); // obj
});
}
}
obj.hello();
（5）diameter是普通函數，裏面的this指向直接調用它的對象obj。perimeter是箭頭函數，this應該指向上下文函數this的指向，這裏上下文沒有函數對象，就默認爲window，而window裏面沒有radius這個屬性，就返回爲NaN。
const obj = {
radius: 10,
diameter() {
return this.radius * 2
},
perimeter: () => 2 * Math.PI * this.radius
}
console.log(obj.diameter()) // 20
console.log(obj.perimeter()) // NaN
以上就是ES6箭頭函數與普通函數裏，this的指向區別。相信在項目開發過程中，會有一定幫助，避免陷入坑裏耽擱項目進程。