溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家介紹如何在vue和小程序中使用this方法，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。
匿名函數下的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會使我們事半功倍
關于如何在vue和小程序中使用this方法就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
