起源

幾天前在實現一段業務邏輯的時候，寫了一段代碼，大概就是封裝了一個報告類，然后根據傳入的參數不同，獲取不同的報告。報告類代碼如下（具體業務邏輯已經去掉，?的代碼純粹為了說明this指向問題而寫）

class ReportServer {getReport (reportType) {// 統一的獲取報告方法return '獲得'+ reportType +'報告'}getUserReport () {// 各自的業務處理。。。return this.getReport('用戶')}getProductReport () {// 各自的業務處理。。。return this.getReport('產品')}getAreaReport () {// 各自的業務處理。。。return this.getReport('地域')} } 復制代碼

調用代碼

const reportType = 'user' // 傳入的參數 const reportServer = new ReportServer() const reportMap = {'user': reportServer.getUserReport,'product': reportServer.getProductReport,'area': reportServer.getAreaReport } reportMap[reportType]() 復制代碼

然后程序一運行，報了一個 TypeError: this.getReport is not a function 的錯誤。看到錯誤的第一秒，我的腦袋里閃過了我是誰？我在哪？我在干什么？下一秒：不可能！ReportServer這個類里面明明有getReport這個方法！

思考

言歸正傳，看到這個報錯，第一反應就是this指向不對了，回憶了一下js中關于this的知識：

• 函數有所屬對象，則指向所屬對象
• 函數沒有所屬對象就指向全局對象
• 用new構造就指向新對象
• 通過 apply 或 call 或 bind 來改變 this 的所指。

沒錯，現在這個情況就是屬于函數有所屬對象，但是這個對象已經不在是reportServer，而是reportMap了，因為js中的this，是在函數真正執行的時候才會確認指向的。看看?的代碼，更加強力的說明這一點

const reportMap = {'user': reportServer.getUserReport,'product': reportServer.getProductReport,'area': reportServer.getAreaReport,'test': 'test' } class ReportServer {//...getUserReport () {// 各自的業務處理。。。console.log(this)return this.getReport('用戶')} }// 最后在執行時，這個this: { 'user': [Function: getUserReport],'product': [Function: getProductReport],'area': [Function: getAreaReport],'test': 'test' } 復制代碼

好吧，記得剛開始學習js的時候，還是有著重的去學習this這方面的知識，然而在實際開發中，還是會不經意的出錯，幸好能第一時間反應過來Orz。

解決

好咯，既然是this指向問題，那么用call/apply指定正確的this:

reportMap[reportType].call(reportServer) // 輸出：獲得用戶報告 復制代碼

或者使用?方法

const reportMap = {'user': 'getUserReport','product': 'getProductReport','area': 'getAreaReport' }reportServer[reportMap[reportType]]() // 輸出：獲得用戶報告 復制代碼

再或者，改寫為if-else的形式，當然我最開始用hash的寫法，就是不想寫if-else (⊙﹏⊙)

Thanks!

轉載于:https://juejin.im/post/5caef2105188257111725bb6

總結

以上是生活随笔為你收集整理的一个有趣的this指向问题的全部內容，希望文章能夠幫你解決所遇到的問題。

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