this在vue和小程序中的使用

栏目: JavaScript · 发布时间: 5年前

内容简介：javascript作用域系列文章第五篇，感兴趣的同学请保持关注之前用了两篇文章介绍了this的基本使用方法，今天我们看看this在vue中的使用情况

javascript作用域系列文章第五篇，感兴趣的同学请保持关注

之前用了两篇文章介绍了this的基本使用方法，

今天我们看看this在vue中的使用情况

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有话说：

this在vue和小程序中的使用

出现这种情况，不是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会使我们事半功倍

参考链接

匿名函数的this指向为什么是window?

一句话记住js箭头函数的this

以上所述就是小编给大家介绍的《this在vue和小程序中的使用》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Mathematica Cookbook

Sal Mangano / O'Reilly Media / 2009 / GBP 51.99

As the leading software application for symbolic mathematics, Mathematica is standard in many environments that rely on math, such as science, engineering, financial analysis, software development, an......一起来看看《Mathematica Cookbook》这本书的介绍吧!

码农工具