匿名函數下的this
方便本地demo，沒有使用webpack
引入兩個文件，vue和axios
axios返回一個promise對象，我們通過axios進行ajax請求
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script><body> <div id="app"> {{ message }} </div></body>看下js部分
var message = '我是全局message!';var app = new Vue({ el: '#app', data() { return { message: '我是vue下的message!' } }, created() { this.getData() }, methods: { getData() { axios.get('https://easy-mock.com/mock/5b0525349ae34e7a89352191/example/promise1') .then(function () { console.log(this.message);//=>我是全局message! }) } }})不必關心axios請求的接口返回的數據
那么在axios下，輸出的是=>我是全局message!,為什么呢？我們是想輸出=>”我是vue下的message!”
在這里有那么一些人就蒙了，為什么axios下會這樣呢？
axios有話說：
出現這種情況，不是axios的鍋，
不信你往下看
//其他代碼省略 getData() { setTimeout(function () { console.log(this.message);//=>我是全局message! }, 1000); }}我們將getData方法下的axios請求換掉，用一個定時器替代，其他部分保持不變
輸出依然是=>我是全局message!
為什么？
因為
匿名函數下this指向window
至于原因， 這里解釋的很清楚https://www.zhihu.com/question/21958425
你只需要記住一點，默認情況下，匿名函數this指向window
如何處理匿名函數下this指向的問題呢？
通過bind來處理
結合之前所學，我們可以同bind來進行處理
//部分代碼省略created() { this.getData()}, methods: { getData() { setTimeout(function () { console.log(this.message);//=>我是vue下的message! }.bind(this), 1000); } }通過bind可以改變this的指向，這是一中解決方式
還有一種比較常用
this賦值暫存
created() { this.getData()},methods: { getData() { const that = this setTimeout(function () { console.log(that.message);//=>我是vue下的message! }, 1000); }}在匿名函數之前，我們先將this賦值給that，在匿名函數中使用that來替代原來的this，同樣可以實現我們所希望的效果
如果你的項目支持ES6標準，那么
箭頭函數是你最佳選擇
getData() { axios.get('https://easy-mock.com/mock/5b0525349ae34e7a89352191/example/promise1') .then(() => { console.log(this.message); })}我們在之前的文章中總結過一個結論
this的指向是在函數執行的時候定義的，而不是在函數創建時定義的，this指向的是最后調用它的對象
我們接下來本篇文章的另一個知識點
箭頭函數中的this
看一個栗子
var heroName = '黃蓉';var heroObj = { heroName: '郭靖', callName: function () { console.log(this.heroName)//=>郭靖 }}heroObj.callName();this指向最后調用它的對象，所以輸出=>郭靖
再看下箭頭函數的栗子
var heroName = '黃蓉';var heroObj = { heroName: '郭靖', callName: () => { console.log(this.heroName)//=>黃蓉 }}heroObj.callName();對這個輸出結果感到意外嗎？
不管懵沒懵，我們再看一個栗子
var heroName = '黃蓉';function getHeroName() { this.heroName = '郭靖' const foo = () => { console.log(this.heroName)//=>郭靖 } foo();}getHeroName();放在一起做一下比較：
普通函數：this的指向是在函數 執行 的時候綁定的，而不是在函數 創建 時綁定的
箭頭函數：this的指向是在函數 創建 的時候綁定的，而不是在函數 執行 時綁定的。
不管在什么情況下,箭頭函數的this跟外層function的this一致，外層function的this指向誰，箭頭函數的this就指向誰，如果外層不是function則指向window。
ES6中定義的時候綁定的this是繼承的父執行上下文里面的this
小程序中的this
如果項目中的小程序也支持ES6標準，無疑，使用箭頭函數是一個不錯的選擇
//省略。。。 getLocation() { wx.chooseLocation({ success: res => { if (res.address && res.name) { this.setData({ shopAddress: `${res.address}(${res.name})` }) } else if (res.address) { this.setData({ shopAddress: `${res.address}` }) } } }) }很多場景就不需要緩存中轉this
var that = this//使用箭頭函數替代此方案
合理的使用this會使我們事半功倍
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
