this在vue和小程序中的使用详解


Posted in Javascript onJanuary 28, 2019

匿名函数下的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会使我们事半功倍

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
疯掉了,尽然有js写的操作系统
Apr 23 Javascript
使用EXT实现无刷新动态调用股票信息
Nov 01 Javascript
jQuery侧边栏随窗口滚动实现方法
Mar 04 Javascript
JS获取各种浏览器窗口大小的方法
Jan 14 Javascript
jQuery 中$(this).index与$.each的使用指南
Nov 20 Javascript
使用js获取图片原始尺寸
Dec 03 Javascript
12306验证码破解思路分享
Mar 25 Javascript
AngularJS 中的数据源的循环输出
Oct 12 Javascript
js实现点击按钮复制文本功能
Jul 20 Javascript
详解滑动穿透(锁body)终极探索
Apr 16 Javascript
javascript History对象原理解析
Feb 17 Javascript
vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能
Nov 16 Javascript
Vue加载json文件的方法简单示例
Jan 28 #Javascript
Vue项目安装插件并保存
Jan 28 #Javascript
vue 左滑删除功能的示例代码
Jan 28 #Javascript
详解Next.js页面渲染的优化方案
Jan 27 #Javascript
在Vue项目中取消ESLint代码检测的步骤讲解
Jan 27 #Javascript
在Vue项目中引入JQuery-ui插件的讲解
Jan 27 #jQuery
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 #jQuery
You might like
php设置session值和cookies的学习示例
2014/03/21 PHP
浅谈ThinkPHP的URL重写
2014/11/25 PHP
在laravel-admin中列表中禁止某行编辑、删除的方法
2019/10/03 PHP
JQuery 动态扩展对象之另类视角
2010/05/25 Javascript
用JQuery模仿淘宝的图片放大镜显示效果
2011/09/15 Javascript
jquery 根据name名获取元素的value值
2015/02/27 Javascript
javascript数组去重的方法汇总
2015/04/14 Javascript
javascript中setTimeout使用指南
2015/07/26 Javascript
JS中innerHTML和pasteHTML的区别实例分析
2016/06/22 Javascript
JavaScript实现横线提示输入验证码随输入验证码输入消失的方法
2016/09/24 Javascript
jquery与ajax获取特殊字符实例详解
2017/01/08 Javascript
js常用DOM方法详解
2017/02/04 Javascript
bootstrap datepicker插件默认英文修改为中文
2017/07/28 Javascript
解决循环中setTimeout执行顺序的问题
2018/06/20 Javascript
jQuery常见的遍历DOM操作详解
2018/09/05 jQuery
微信小程序音乐播放器开发
2019/11/20 Javascript
javascript执行上下文、变量对象实例分析
2020/04/25 Javascript
vue实现输入框自动跳转功能
2020/05/20 Javascript
Vue父子之间值传递的实例教程
2020/07/02 Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
2020/07/29 Javascript
python复制文件代码实现
2013/12/23 Python
Python实现的百度站长自动URL提交小工具
2014/06/27 Python
Python 列表排序方法reverse、sort、sorted详解
2016/01/22 Python
Python进行数据提取的方法总结
2016/08/22 Python
python算法演练_One Rule 算法(详解)
2017/05/17 Python
Python2.7编程中SQLite3基本操作方法示例
2017/08/09 Python
Python cookbook(数据结构与算法)找到最大或最小的N个元素实现方法示例
2018/02/13 Python
tornado+celery的简单使用详解
2019/12/21 Python
Django Admin设置应用程序及模型顺序方法详解
2020/04/01 Python
详解html5 canvas常用api总结(二)--绘图API
2016/12/14 HTML / CSS
英国异国风情旅游网站:Travel Talk Tours(团体旅游、探险旅游、帆船假期)
2018/07/26 全球购物
BudgetAir印度:预订航班、酒店和汽车租赁
2019/07/07 全球购物
小学生红领巾广播稿
2014/01/21 职场文书
诚信贷款承诺书
2014/05/30 职场文书
2015年党员承诺书
2015/01/21 职场文书
ubuntu端向日葵键盘输入卡顿问题及解决
2022/12/24 Servers