前言
JavaScript在ES6語法中新增了箭頭函數，相較于傳統函數，箭頭函數不僅更加簡潔，而且在this方面進行了改進。this作為JavaScript中比較詭異的存在，許多文章對于this的解釋也不盡相同，本篇文章試圖厘清JS中函數與this的關系。
一、JS中函數的寫法
1.常規函數的寫法
在ES6語法之前，JS中的函數由function關鍵字、params參數和被花括號包裹的函數體組成。為了與后面說到的箭頭函數相區別，我們先把這樣的函數叫做常規函數，常規函數既可以用聲明式寫法也可以用賦值式寫法。例子：
|
1
2
3
4
5
6
7
8
9
|
function test(name) { //聲明式寫法 console.log(name)}test('Jerry')let test2 = function(name) { //賦值式寫法 console.log(name)}test2('Tom') |
2. 箭頭函數的寫法
ES6箭頭函數的引入，使函數的寫法變的更加簡潔，但在書寫上要遵循一定的規則。
規則一：箭頭函數只能用賦值式寫法，不能用聲明式寫法
例子：
|
1
2
3
4
|
const test = (name) => { console.log(name)}test('Jerry') |
規則二：如果參數只有一個，可以不加括號，如果沒有參數或者參數多于一個就需要加括號
例子：
|
1
2
3
4
5
6
7
8
9
|
const test = name => { console.log(name)}test('Jerry')const test2 = (name1, name2) => { console.log(name1 + ' and ' + name2)}test2('Tom', 'Jerry') |
規則三：如果函數體只有一句話，可以不加花括號
例子：
|
1
|
const test = name => console.log(name) |
規則四：如果函數體沒有括號，可以不寫return，箭頭函數會幫你return
例子：
|
1
2
|
const add = (p1, p2) => p1 + p2add(10, 25) |
記住：函數體的花括號與return關鍵字同在。
從以上的例子我們可以看出，箭頭函數對常規函數的圓括號和花括號都進行了簡化。除了這些簡化，箭頭函數對于常規函數最大的優化之處在于this。
二、理解常規函數中this
在探討箭頭函數對于this的優化之前，我們先得明白this究竟是什么，以及它是如何使用的。this是使用call方法調用函數時傳遞的第一個參數，它可以在函數調用時修改，在函數沒有調用的時候，this的值是無法確定。
如果沒有使用過call方法來調用函數的話，上面的對于this的定義可能不太明白。那么我們需要先理解函數調用的兩種方法。
1. 純粹的函數調用
第一種方法最常見，例子如下：
|
1
2
3
4
5
|
function test(name) { console.log(name) console.log(this)}test('Jerry') //調用函數 |
這種方法我們使用最多，但是這種函數調用方法只是一種簡寫，它完整的寫法是下面這樣的：
|
1
2
3
4
5
|
function test(name) { console.log(name) console.log(this)}test.call(undefined, 'Tom') |
注意到上面調用函數的call方法了嗎？call方法接收的第一個參數就是this，這里我們傳了一個undefined。那么，依據定義，函數執行了之后打出來的this會是undefined嗎？也不是。
如果你傳的 context 就 null 或者 undefined，那么 window 對象就是默認的 context（嚴格模式下默認 context 是 undefined）。
所以這里我們打出來的this是Window對象。
2. 對象中函數的調用
直接看例子：
|
1
2
3
4
5
6
7
8
|
const obj = { name: 'Jerry', greet: function() { console.log(this.name) }}obj.greet() //第一種調用方法obj.greet.call(obj) //第二種調用方法 |
例子里第一種調用方法只是第二種調用方法的語法糖，第二種才是完整的調用方法，而且第二種方法厲害的地方在于它可以手動指定this。
手動指定this的例子：
|
1
2
3
4
5
6
7
|
const obj = { name: 'Jerry', greet: function() { console.log(this.name) }}obj.greet.call({name: 'Spike'}) //打出來的是 Spike |
從上面的例子我們看到greet函數執行時this，已經被我們改過了。
3. 構造函數中this
構造函數里的this稍微有點特殊，每個構造函數在new之后都會返回一個對象，這個對象就是this，也就是context上下文。
例子：
|
1
2
3
4
5
6
|
function Test() { this.name = 'Tom'}let p = new Test()console.log(typeof p) //objectconsole.log(p.name) // Tom |
4. window.setTimeout()和window.setInterval()中函數的調用
window.setTimeout()和window.setInterval()的函數中的this有些特殊，里面的this默認是window對象。
簡單總結一下：函數完整的調用方法是使用call方法，包括test.call(context, name)和obj.greet.call(context,name)，這里的context就是函數調用時的上下文，也就是this，只不過這個this是可以通過call方法來修改的；構造函數稍微特殊一點，它的this直接指向new之后返回的對象；window.setTimeout()和window.setInterval()默認的是this是window對象。
三、理解箭頭函數中的this
上面關于this講了很多，this是函數用call方法調用時傳遞的第一個參數，而且它還可以手動更改，這樣要確定this的值就太麻煩了。不過，箭頭函數的出現給我們確定this幫了一些忙。
1. 箭頭函數的特性一：默認綁定外層this
上面提到：this的值是可以用call方法修改的，而且只有在調用的時候我們才能確定this的值。而當我們使用箭頭函數的時候，箭頭函數會默認幫我們綁定外層this的值，所以在箭頭函數中this的值和外層的this是一樣的。
不使用箭頭函數例子：
|
1
2
3
4
|
const obj = { a: function() { console.log(this) } }obj.a() //打出的是obj對象 |
使用箭頭函數的例子：
|
1
2
3
4
5
6
|
const obj = { a: () => { console.log(this) }}obj.a() //打出來的是window |
在使用箭頭函數的例子里，因為箭頭函數默認不會使用自己的this，而是會和外層的this保持一致，最外層的this就是window對象。
2. 箭頭函數的特性二：不能用call方法修改里面的this
這個也很好理解，我們之前一直在說，函數的this可以用call方法來手動指定，而為了減少this的復雜性，箭頭函數無法用call方法來指定this。
例子：
|
1
2
3
4
5
6
|
const obj = { a: () => { console.log(this) }}obj.a.call('123') //打出來的結果依然是window對象 |
因為上文我們說到window.setTimeout()中函數里的this默認是window，我們也可以通過箭頭函數使它的this和外層的this保持一致：
window.setTimeout()的例子：
|
1
2
3
4
5
6
7
8
9
|
const obj = { a: function() { console.log(this) window.setTimeout(() => { console.log(this) }, 1000) }}obj.a.call(obj) //第一個this是obj對象，第二個this還是obj對象 |
想必大家明白了，函數obj.a沒有使用箭頭函數，因為它的this還是obj，而setTimeout里的函數使用了箭頭函數，所以它會和外層的this保持一致，也是obj；如果setTimeout里的函數沒有使用箭頭函數，那么它打出來的應該是window對象。
四、多層對象嵌套里函數的this
這里是筆者在學習時遇到的一點疑惑。箭頭函數里的this是和外層保持一致的，但是如果這個外層有好多層，那它是和哪層保持一致呢？
直接上例子：
|
1
2
3
4
5
6
7
8
|
const obj = { a: function() { console.log(this) }, b: { c: function() {console.log(this)} }}obj.a() // 打出的是obj對象, 相當于obj.a.call(obj)obj.b.c() //打出的是obj.b對象, 相當于obj.b.c.call(obj.b) |
上面的代碼都符合直覺，接下來把obj.b.c對應的函數換成箭頭函數，結果如下：
|
1
2
3
4
5
6
7
8
|
const obj = { a: function() { console.log(this) }, b: { c: () => {console.log(this)} }}obj.a() //沒有使用箭頭函數打出的是objobj.b.c() //打出的是window對象！！ |
obj.a調用后打出來的是obj對象，而obj.b.c調用后打出的是window對象而非obj，這表示多層對象嵌套里箭頭函數里this是和最最外層保持一致的。
上面的內容就是筆者學習箭頭函數中梳理出來的知識點，如有錯誤，請批評指正！這是我在掘金上寫的第三篇文章，感謝閱讀！
本文參考：this 的值到底是什么？一次說清楚
總結
到此這篇關于JS中箭頭函數與this的寫法和理解的文章就介紹到這了,更多相關JS箭頭函數與this內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://juejin.cn/post/6844903573428371464
