箭頭函數的this，讓很多人困惑，并且，看了一些文章，也沒有說得很清楚。既然是programmer，那就讓代碼說話

function test1(){const user = {first: 'Bob',test: {arrowFn: () => {console.log('arrowFn',this)},foo1(){setTimeout(() => {console.log('foo1 : ', this);}, 100);}},foo2(){const arr=()=>console.log('arr', this)arr()setTimeout(() => {console.log('foo2 : ', this);}, 100);}}user.test.arrowFn();user.test.foo1()user.foo2()} test1()

上面的代碼會輸出哪些信息？this分別對應什么對象？

arrowFn Window arr {first: 'Bob', test: {…}, foo2: ?} foo1 {arrowFn: ?, foo1: ?} foo2 {first: 'Bob', test: {…}, foo2: ?}

對應上面的輸出，通過以下幾條原則就可以解釋了：

只有function/arrow function才會形成scope（作用域），object無法形成作用域（其實也就是大括號無法形成scope，這一點跟java c#不一樣）

arrow function的this是上一個scope中的最近的object，

arrow function在定義的時候確定this，function在運行的時候確定this

分析：

arrowFn的this是window，因為，user和test都是object，object不形成作用域，因此，arrowFn在test1()的作用域范圍內，然后再往上找一層也就是window才是arrowFn的this

arr在foo2()內，往上找最近的objec，就是user

foo2()中setTimer的arrow function，是在foo2()中定義的，因此，this對應foo2()的上一層，是user

foo1()中的arrow function，foo1()的上一層是test，因此this是test

不得不說，js這個語言，本來只是作為頁面腳本來定位的，沒指望它能實現復雜邏輯，但是隨著SPA大行其道，js變成一個全功能的客戶端開發語言，對標C# dephi。不過一些先天性的問題，比如OOP相關的特性，通過補丁摞補丁的方式進行了補充，導致開發者難以理解和使用，也是很無奈了。

總結

以上是生活随笔為你收集整理的js 箭头函数的this详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。