JavaScript箭頭函數(shù)中的this詳解

前言

箭頭函數(shù)極大地簡化了this的取值規(guī)則。

普通函數(shù)與箭頭函數(shù)

普通函數(shù)指的是用function定義的函數(shù)：

var hello = function () {
console.log("Hello, Fundebug!");
}

箭頭函數(shù)指的是用=>定義的函數(shù)：

var hello = () => {
console.log("Hello, Fundebug!");
}

JavaScript箭頭函數(shù)與普通函數(shù)不只是寫法上的區(qū)別，它們還有一些微妙的不同點，其中一個不同點就是this。

箭頭函數(shù)沒有自己的this值，箭頭函數(shù)中所使用的this來自于函數(shù)作用域鏈。

這句話很簡單，不過聽著稍微有點莫名其妙，得從頭說起。

this到底是什么？

關于this的文章也夠多了，有時候越描越黑，我就不再添亂了，我只負責搬運一下MDN文檔：this，感興趣的可以仔細閱讀一下，我摘錄一些最重要的話就好了。

A function's this keyword behaves a little differently in JavaScript compared to other languages. It also has some differences between strict mode and non-strict mode.

JavaScript是一門比較奇特的語言，它的this與其他語言不一樣，并且它的取值還取決于代碼是否為嚴格模式("use strict")。

this的值是什么？

The JavaScript context object in which the current code is executing.

this就是代碼執(zhí)行時當前的context object。

Global context

In the global execution context (outside of any function), this refers to the global object whether in strict mode or not.

代碼沒有在任何函數(shù)中執(zhí)行，而是在全局作用域中執(zhí)行時，this的值就是global對象，對于瀏覽器來說，this就是window。

這一條規(guī)則還是比較容易接受的。

Function context

Inside a function, the value of this depends on how the function is called.

函數(shù)中的this值取決于這個函數(shù)是怎樣被調(diào)用的，這一條規(guī)則就有點變態(tài)了，也是很容易出BUG的地方。

另外，this的值還與函數(shù)是否為嚴格模式("use strict")有關，這就非常的喪心病狂了...

大家如果好奇的話，出門左轉看MDN文檔，我多說無益，只說明一種簡單的情況。

As an object method

When a function is called as a method of an object, its this is set to the object the method is called on.

當函數(shù)作為對象的方法被調(diào)用時，它的this值就是該對象。

var circle = {
radius: 10,
getRadius() {
console.log(this.radius);
}
};
circle.getRadius(); // 打印 10

self = this？

當我們需要在對象方法中嵌套一個內(nèi)層函數(shù)時，this就會給我們帶來實際的困擾了，大家應該寫過這樣的代碼：

// 使用臨時變量self
var circle = {
radius: 10,
outerDiameter() {
var self = this;
var innerDiameter = function() {
console.log(2 * self.radius);
};
innerDiameter();
}
};
circle.outerDiameter(); // 打印20

outerDiameter函數(shù)是circle對象的方法，因此其this值就是circle對象。

那我們直接寫this.radius多好啊，可惜不能這么寫，因為內(nèi)層函數(shù)innerDiameter并不會繼承外層函數(shù)outerDiameter的this值。outerDiameter函數(shù)的this值就是circle對象，this.radius等于10。

但是，innerDiameter函數(shù)的this值不是circle對象，那它到底是啥？它是innerDiameter函數(shù)執(zhí)行時當前的context object，這個context object又是啥？其實我也暈了，所以不妨測試一下：

// innerDiameter函數(shù)中的this是window
var circle = {
radius: 10,
outerDiameter() {
var innerDiameter = function() {
console.log(this === window);
};
innerDiameter();
}
};
circle.outerDiameter(); // 打印true

innerDiameter函數(shù)中的this是window，為啥是window這個不去管它，反正不是circle對象。

因此，如果我們直接在innerDiameter函數(shù)中使用this的話，就出問題了：

// 使用普通函數(shù)
var circle = {
radius: 10,
outerDiameter() {
var innerDiameter = function() {
console.log(2 * this.radius);
};
innerDiameter();
}
};
circle.outerDiameter(); // 打印NaN

于是，我們不得不使用一個臨時變量self將外層函數(shù)outerDiameter的this值搬運到內(nèi)層函數(shù)innerDiameter。

.bind(this)

我們也可以使用.bind(this)來規(guī)避this變來變?nèi)サ膯栴}：

// 使用.bind(this)
var circle = {
radius: 10,
outerDiameter() {
var innerDiameter = function() {
console.log(2 * this.radius);
};
innerDiameter = innerDiameter.bind(this);
innerDiameter();
}
};
circle.outerDiameter(); // 打印20

但是，無論是使用臨時變量self，還是使用.bind(this)，都不是什么很簡潔的方式。

總之，普通函數(shù)的this取值多少有點奇怪，尤其當我們采用面向?qū)ο蟮姆绞骄幊虝r，很多時候都需要用到this，大多數(shù)時候我們都不會去使用.bind(this)，而是使用臨時變量self或者that來搬運this的取值，寫起來當然不是很爽，而且一不小心就會寫出BUG來。

正如MDN文檔所說：

Until arrow functions, every new function defined its own this value based on how the function was called。This proved to be less than ideal with an object-oriented style of programming.

箭頭函數(shù)

箭頭函數(shù)的this取值，規(guī)則非常簡單，因為this在箭頭函數(shù)中，可以看做一個普通變量。

An arrow function does not have its own this. The this value of the enclosing lexical scope is used; arrow functions follow the normal variable lookup rules.

箭頭函數(shù)沒有自己的this值，箭頭函數(shù)中所使用的this都是來自函數(shù)作用域鏈，它的取值遵循普通普通變量一樣的規(guī)則，在函數(shù)作用域鏈中一層一層往上找。

有了箭頭函數(shù)，我只要遵守下面的規(guī)則，this的問題就可以基本上不用管了：

• 對于需要使用object.method()方式調(diào)用的函數(shù)，使用普通函數(shù)定義，不要使用箭頭函數(shù)。對象方法中所使用的this值有確定的含義，指的就是object本身。
• 其他情況下，全部使用箭頭函數(shù)。

// 使用箭頭函數(shù)
var circle = {
radius: 10,
outerDiameter() {
var innerDiameter = () => {
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對象。

結論

JavaScript是Brendan Eich花了10天時間設計出來的，因此各種莫名其妙的特性，this也算是其中一個奇葩。好在這些年ECMAScript標準發(fā)展很快也很穩(wěn)定，每年擼一個新的標準，多少可以彌補一下JS的先天不足。

箭頭函數(shù)對于this取值規(guī)則的簡化，其實也就是為了少給大家添亂，誰能記得住普通函數(shù)this取值的那么多條條框框啊。。。

另外，MDN文檔絕對是一個寶藏，大家可以多看看。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持億速云。