如何在vue和小程序中使用this方法

 
 

  
    {{ message }}
  

看下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!
    })
  }
 }
})

不必關(guān)心axios請求的接口返回的數(shù)據(jù)

那么在axios下，輸出的是=>我是全局message!,為什么呢？我們是想輸出=>”我是vue下的message!”

在這里有那么一些人就蒙了，為什么axios下會(huì)這樣呢？

axios有話說：

出現(xiàn)這種情況，不是axios的鍋，

不信你往下看

//其他代碼省略
 getData() {
  setTimeout(function () {
   console.log(this.message);//=>我是全局message!
  }, 1000);
 }
}

我們將getData方法下的axios請求換掉，用一個(gè)定時(shí)器替代，其他部分保持不變

輸出依然是=>我是全局message!

為什么？

因?yàn)?/p>

匿名函數(shù)下this指向window

至于原因， 這里解釋的很清楚https://www.zhihu.com/question/21958425

你只需要記住一點(diǎn)，默認(rèn)情況下，匿名函數(shù)this指向window

如何處理匿名函數(shù)下this指向的問題呢？

通過bind來處理

結(jié)合之前所學(xué)，我們可以同bind來進(jìn)行處理

//部分代碼省略
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);
 }
}

在匿名函數(shù)之前，我們先將this賦值給that，在匿名函數(shù)中使用that來替代原來的this，同樣可以實(shí)現(xiàn)我們所希望的效果

如果你的項(xiàng)目支持ES6標(biāo)準(zhǔn)，那么

箭頭函數(shù)是你最佳選擇

getData() {
 axios.get('https://easy-mock.com/mock/5b0525349ae34e7a89352191/example/promise1')
  .then(() => {
   console.log(this.message);
  })
}

我們在之前的文章中總結(jié)過一個(gè)結(jié)論

this的指向是在函數(shù)執(zhí)行的時(shí)候定義的，而不是在函數(shù)創(chuàng)建時(shí)定義的，this指向的是最后調(diào)用它的對象

我們接下來本篇文章的另一個(gè)知識點(diǎn)

箭頭函數(shù)中的this

看一個(gè)栗子

var heroName = '黃蓉';
var heroObj = {
 heroName: '郭靖',
 callName: function () {
  console.log(this.heroName)//=>郭靖
 }
}
heroObj.callName();

this指向最后調(diào)用它的對象，所以輸出=>郭靖

再看下箭頭函數(shù)的栗子

var heroName = '黃蓉';
var heroObj = {
 heroName: '郭靖',
 callName: () => {
  console.log(this.heroName)//=>黃蓉
 }
}
heroObj.callName();

對這個(gè)輸出結(jié)果感到意外嗎？

不管懵沒懵，我們再看一個(gè)栗子

var heroName = '黃蓉';
function getHeroName() {
 this.heroName = '郭靖'
 const foo = () => {
  console.log(this.heroName)//=>郭靖
 }
 foo();
}
getHeroName();

放在一起做一下比較：

普通函數(shù)：this的指向是在函數(shù) 執(zhí)行的時(shí)候綁定的，而不是在函數(shù) 創(chuàng)建時(shí)綁定的

箭頭函數(shù)：this的指向是在函數(shù) 創(chuàng)建的時(shí)候綁定的，而不是在函數(shù) 執(zhí)行時(shí)綁定的。

不管在什么情況下,箭頭函數(shù)的this跟外層function的this一致，外層function的this指向誰，箭頭函數(shù)的this就指向誰，如果外層不是function則指向window。

ES6中定義的時(shí)候綁定的this是繼承的父執(zhí)行上下文里面的this

小程序中的this

如果項(xiàng)目中的小程序也支持ES6標(biāo)準(zhǔn)，無疑，使用箭頭函數(shù)是一個(gè)不錯(cuò)的選擇

//省略。。。
 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}`
     })
    }
   }
  })
 }

很多場景就不需要緩存中轉(zhuǎn)this

var that = this//使用箭頭函數(shù)替代此方案

合理的使用this會(huì)使我們事半功倍

關(guān)于如何在vue和小程序中使用this方法就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。