普通函數(shù)與箭頭函數(shù)
普通函數(shù)指的是用 function 定義的函數(shù)：
var hello = function() {
????console.log("Hello, Fundebug!");
};
箭頭函數(shù)指的是用=>定義的函數(shù)：
var hello = () => {
????console.log("Hello, Fundebug!");
};
箭頭函數(shù)與普通函數(shù)不只是寫法上的區(qū)別，它們還有一些微妙的不同點，其中一個不同點就是 this村象。箭頭函數(shù)沒有自己的 this 值肝劲，箭頭函數(shù)中所使用的 this 來自于函數(shù)作用域鏈宽堆。
this 到底是什么透揣？
JavaScript 是一門比較奇特的語言，它的 this 與其他語言不一樣焕妙，并且它的取值還取決于代碼是否為嚴(yán)格模式(“use strict”)以及函數(shù)中的 this 值取決于這個函數(shù)是怎樣被調(diào)用的拴事。this就是代碼執(zhí)行時當(dāng)前的context object沃斤。代碼沒有在任何函數(shù)中執(zhí)行，而是在全局作用域中執(zhí)行時刃宵，this 的值就是 global 對象衡瓶，對于瀏覽器來說，this 就是 window牲证。
當(dāng)函數(shù)作為對象的方法被調(diào)用時哮针，它的 this 值就是該對象：
var circle = {
????radius:10,
? ? getRadius() {
????????console.log(this.radius);
? ? }
};
circle.getRadius();????// 打印 10
當(dāng)我們需要在對象方法中嵌套一個內(nèi)層函數(shù)時，this的指向就會給我們帶來實際的困擾了，這時就需要使用一個臨時變量self去保存這個this：
var circle = {
????radius:10,
? ? outerDiameter() {
????????var self = this;
????????var innerDiameter = function() {
????????????console.log(2* self.radius);
????????????console.log(this === window);
? ? ? ? };
? ? ? ? innerDiameter();
? ? }
};
circle.outerDiameter();????// 分別打印20和true
outerDiameter 函數(shù)是 circle 對象的方法十厢，因此其 this 值就是 circle 對象等太。但內(nèi)層函數(shù)innerDiameter并不會繼承外層函數(shù) outerDiameter 的 this 值。因此outerDiameter 函數(shù)的 this 值就是 circle 對象蛮放，this.radius 等于 10缩抡。但是innerDiameter函數(shù)的this值不是circle對象。
因此包颁，如果我們直接在 innerDiameter 函數(shù)中使用 this 的話瞻想，就會問題了：
// 使用普通函數(shù)
var circle = {
????radius:10,
? ? outerDiameter() {
????????varinnerDiameter =function(){
????????????console.log(2*this.radius);
? ? ????};
? ? ????innerDiameter();
? ? }
};
circle.outerDiameter();????// 打印NaN
.bind(this)
我們也可以使用.bind(this)來綁定this：
var circle = {
????radius:10,
? ? outerDiameter() {
????????varinnerDiameter = function() {
????????????console.log(2*this.radius);
? ? ? ? };
????????innerDiameter = innerDiameter.bind(this);
? ? ? ? innerDiameter();
? ? }
};
circle.outerDiameter();????// 打印20
箭頭函數(shù)
箭頭函數(shù)的 this 取值，規(guī)則非常簡單娩嚼，因為 this 在箭頭函數(shù)中蘑险，可以看做一個普通變量。箭頭函數(shù)沒有自己的 this 值岳悟，箭頭函數(shù)中所使用的 this 都是來自函數(shù)作用域鏈佃迄，它的取值遵循普通普通變量一樣的規(guī)則，在函數(shù)作用域鏈中一層一層往上找贵少。
對于需要使用object.method()方式調(diào)用的函數(shù)呵俏，使用普通函數(shù)定義，不要使用箭頭函數(shù)春瞬。對象方法中所使用的 this 值有確定的含義柴信，指的就是 object 本身。其他情況下宽气，使用箭頭函數(shù)。
varcircle = {
????radius:10,
? ? outerDiameter() {
????????varinnerDiameter = () => {
????????????console.log(2*this.radius);
? ? ? ? };
? ? ? ? innerDiameter();
? ? }
};
circle.outerDiameter();????// 打印20
對于內(nèi)層函數(shù) innerDiameter潜沦，它本身并沒有 this 值萄涯，其使用的 this 來自作用域鏈，來自更高層函數(shù)的作用域唆鸡。innerDiameter 的外層函數(shù) outerDiameter 是普通函數(shù)涝影，它是有 this 值的，它的 this 值就是 circle 對象争占。因此燃逻，innerDiameter 函數(shù)中所使用的 this 來自 outerDiameter 函數(shù)，其值為 circle 對象臂痕。
文章來源：https://blog.fundebug.com/2019/06/18/arrow-function-this/
