uni之this作用域
目录介绍
- 01.先看一个案例
- 02.看一下解决方案
01.先看一个案例
- 代码如下所示
- 发现了点击按钮1可以更新title内容,但是点击按钮2却无法更新title内容。这个究竟是为什么呢?
<template> <view class="container"> <text>{{title}}</text> <button type="default" @click="changeTitle1">改变标题内容按钮1</button> <button type="default" @click="changeTitle2">改变标题内容按钮2</button> </view> </template> <script> export default{ data(){ return{ title : "这个是标题", } }, methods:{ changeTitle1(){ this.title = "改变标题1"; }, //可以发现下面这个执行了success方法,但是调用this赋值却无法改变内容 changeTitle2(){ uni.setStorage({ key: 'storage_key', data: 'hello', success: function () { this.title = "改变标题2"; console.log('changeTitle2------success'); } }); }, } } </script> <style> .container{ display: flex; flex-flow: column; } </style>
- 为什么changeTitle2无法改变title内容
- 在changeTitle2方法的success方法中,该success方法指向闭包,所以this属于闭包,由此在success回调函数里是不能直接使用this.title的。
02.看一下解决方案
- 可以发现这样操作就可以解决作用域问题
- 第一种解决方案
- 解决办法就是在闭包之外先把this赋值给另一个变量
//可以发现这样操作就可以解决作用域问题 changeTitle3(){ //赋值 var me = this; uni.setStorage({ key: 'storage_key', data: 'hello', success: function () { me.title = "改变标题3"; console.log('changeTitle2------success'); } }); },
- 第二种解决方案
- 使用箭头函数也可以解决该问题,思考一下这是为什么?
changeTitle4(){ uni.setStorage({ key: 'storage_key', data: 'hello', success:() => { this.title = "改变标题4"; console.log('changeTitle2------success'); } }); },
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· Linux系统下SQL Server数据库镜像配置全流程详解
· 现代计算机视觉入门之:什么是视频
· 你所不知道的 C/C++ 宏知识
· 不到万不得已,千万不要去外包
· C# WebAPI 插件热插拔(持续更新中)
· 会议真的有必要吗?我们产品开发9年了,但从来没开过会
· 【译】我们最喜欢的2024年的 Visual Studio 新功能
· 如何打造一个高并发系统?