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

2024-07-29 19:40:20

匿名函数下的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.js中this.$emit的深入理解

对于vue.js中的this.emit的理解:this.emit('increment1',"这个位子是可以加参数的"):其实它的作用就是触发自定义函数. 看例子: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <script src="vue.js"
Vue.set() this.$set()引发的视图更新思考及注意事项

引文 vue文档列表渲染中有条注意事项: 这里提到的两种情况实际改变了数据但是没有触发视图更新. 由此引出Vue.set(),先上文档API: this.$set()和Vue.set()本质方法一样,前者可以用在methods中使用. set方法调用时,可以触发页面全部重新渲染. 比如在vue中有个data数组arr: //arr=[1,2,3] arr[1]='b' console.log(arr) // [1,2,3] Vue.set(arr,2,'c') console.log(arr
从vue源码解析Vue.set()和this.$set()

前言最近死磕了一段时间vue源码,想想觉得还是要输出点东西,我们先来从Vue提供的Vue.set()和this.$set()这两个api看看它内部是怎么实现的. Vue.set()和this.$set()应用的场景平时做项目的时候难免不会对数组或者对象进行这样的骚操作操作,结果发现,咦~~,他喵的,怎么页面没有重新渲染. const vueInstance = new Vue({ data: { arr: [1, 2], obj1: { a: 3 } } }); vueInstance.
vue this.reload 方法配置

1.场景在处理列表时,常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求. 2.遇到的问题 1. 用vue-router重新路由到当前页面,页面是不进行刷新的 2.采用window.reload(),或者router.go(0)刷新时,整个浏览器进行了重新加载,闪烁,体验不好 3.解决方法 provide / inject 组合作用:允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效. 我的项目配置: ①home.vue <rou
详解vue中的computed的this指向问题

今天在写vue项目时,用到了computed计算属性,遇到了使用箭头函数出现this指向问题,这里记录下 1.箭头函数中的this 箭头函数内部的this是词法作用域,由上下文确定函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象 2.vue中的computed 使用箭头函数 list: () => { console.log(this) } 不使用箭头函数 allFigure: function() { console.log(this) }, 使用get() allFig
vue使用axios时关于this的指向问题详解

前言众所周知axios是vue-resource后出现的Vue请求数据的插件.vue更新到2.0之后,作者尤大就宣告不再对vue-resource更新,而是推荐的axios.更多的详细介绍大家可以参考这里://www.jb51.net/article/109444.htm 本文主要介绍了关于vue使用axios时this的指向问题,下面话不多说了,来一起看看详细的介绍吧. 1.解决办法在vue中使用axios做网络请求的时候,会遇到this不指向vue,而为undefined,可以使用箭头函
vue绑定事件后获取绑定事件中的this方法

使用$event传递参数(事件本身) <input v-model="checknames" @change="changecheckbox(item,$event)" style="float: right" type="checkbox" :value="index" > changecheckbox(val,element) { console.log( element.currentTa
浅谈vue方法内的方法使用this的问题

如下所示: locapos(){//定位方法 if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { var pos = { lat: position.coords.latitude, lng: position.coords.longitude }; var latLng = new google.maps.LatLng(aa[1], aa[0]); var info
解决vue.js this.$router.push无效的问题

如下所示: login() { if(this.email.length > 0 && this.password.length >0) { this.$http.post('/api/login', { user: this.email, password: this.password }) .then(res => { let userPwd = res.data if(this.password == userPwd) { this.$router.push(&qu
this在vue和小程序中的使用详解

匿名函数下的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"></s
微信小程序中input标签详解及简单实例

微信小程序中input标签详解及简单实例使用input标签,我们都会,在微信小程序中使用,必定也是可以一下子就会的,但是却有些常用的属性无法按照习惯去使用: 我就用我最常用的来做例子: 一个一个来解读: 首先,我是定义了他的id,这是我们最常用的,所以就配了一个id,毕竟不操作他,又为什么设成输入框呢, 第二,设置他的样式, 第三,设置他的输入类别,以上都是很简单的第四.使用正则l:哎限定输入为纯数字.这点可能有点不理解,这是对他的keyup事件监听,将不是纯数字的list无视掉.注意,是对
微信小程序中的onLoad详解及简单实例

微信小程序中的onLoad onLoad是一个生命周期函数,表示页面加载 onLoad默认有一个Object类型的参数,是指其他页面打开当前页面所调用的 query 参数举个栗子~ 当我们在页面first的js脚本中有一个点击方法onTap 当点击时页面跳转到second页面,用?id = secondId的形式为second页面传递一个值(这里的secondId是一个已经获取过的值) onTap: function(){ wx.navigateTo({ url: "second?id=&qu
如何在微信小程序中使用less详解(最优方式)

前言写惯了 less/sass,但是现在开发小程序缺还是 css,很不习惯. 在网上搜的教程,要么是 gulp,要么就是 vscode 的 Easy-less 的插件. 传统方式我们来对比,这两种方式的优劣. Gulp 前者要对于 gulp 有简单的了解,但是现在大道其行的 webpack 来说,gulp 用的人也越来越少,而且具有一定的学习成本,但好在自定义程度较高,自己可以随便添加take. VScodd的Esay-less插件啥都不说,挺香的,直接在 vscode 安装 easy-l
微信小程序Redux绑定实例详解

微信小程序Redux绑定实例详解安装 clone或者下载代码库到本地: git clone https://github.com/charleyw/wechat-weapp-redux 将dist/wechat-weapp-redux.js(或者拷贝minify的也可以)文件直接拷贝到小程序的工程中,例如(下面假设我们把第三方包都安装在libs目录下): cd wechat-weapp-redux cp -r dist/wechat-weapp-redux.js <小程序根目录>/libs
微信小程序 Buffer缓冲区的详解

微信小程序 Buffer缓冲区的详解 JavaScript 语言自身只有字符串数据类型,没有二进制数据类型. 但在处理像TCP流或文件流时,必须使用到二进制数据.因此在 Node.js中,定义了一个 Buffer 类,该类用来创建一个专门存放二进制数据的缓存区. 在 node.js 中,Buffer 类是随 Node 内核一起发布的核心库.Buffer 库为 Node.js 带来了一种存储原始数据的方法,可以让 Node.js 处理二进制数据,每当需要在 Node.js 中处理I/O操作中移动
微信小程序 MD5的方法详解及实例代码

微信小程序 MD5的方法详解生成的文件可以放在 utils文件中哦!!! /* * A JavaScript implementation of the RSA Data Security, Inc. MD5 Message * Digest Algorithm, as defined in RFC 1321. * Version 1.1 Copyright (C) Paul Johnston 1999 - 2002. * Code also contributed by Greg Holt
微信小程序组件 marquee实例详解

微信小程序组件 marquee实例详解 1. marquee标签 html是有marquee标签的,可以实现跑马灯效果,但小程序没有,所以要实现.这里考虑使用css3的animation实现. html的marquee是这样使用的. <marquee direction="left" behavior="scroll" scrollamount="1" scrolldelay="0" loop="-1"
微信小程序实现分页查询详解

目录创建自定义连接器云开发介绍分页实现思路使用连接器为什么要自定义分页功能日常小程序经常需要分页查询的功能,本篇我们讲解一下低代码中如何实现分页查询的功能.要自己开发分页功能,可以先参考官方的方法分页查询我们一般是需要有入参和出参,入参分别需要页码.每页大小.排序字段名称.排序方式.查询条件. 出参分别需要记录总条数.页码.每页大小.记录列表. 入参和出参知道之后,那在哪写代码呢?像分页这种功能一般属于后端的能力,低码工具中是在自定义连接器里写后端代码的. 创建自定义连接器登录低
微信小程序地图map实例详解

微信小程序地图map实例详解 wxml: class="button" bindtap="getlocation" style="margin-top:30px" markers="{{markers}}">定位 longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" co

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

相关推荐

随机推荐