账户中心 退出系统
开发文档 资讯·分享 技术交流 会员登录
phpGrace GSCMS 公众号系统
uni-app this 作用域保持
来自主题 : 技术分享   ·  作者 : GraceUI · 分享号     ·  发布时间 : 08/13/2021   ·  浏览次数  :  321

在日常的开发过程中,我们经常会编写函数来完成各类功能,同时也经常遇到 this 关键字作用域失效的问题,下面的代码会演示 this 关键字丢失的现象及保持方法。

this 作用域丢失演示

<template>
	<view>
		<text>{{textContent}}</text>
	</view>
</template>
<script>
export default {
	data() {
		return {
			textContent : 'hi'
		}
	},
	onLoad:function(){
		// 丢失 this 
		setTimeout(function(){
			this.textContent = 'test....';
			// this 代表当前 function 
			// 所以无法完成对 textContent 变量赋值的工作
		}, 1000);
	},
	methods: {},
}
</script>
<style>
</style>

使用箭头函数保持 this

<template>
	<view>
		<text>{{textContent}}</text>
	</view>
</template>
<script>
export default {
	data() {
		return {
			textContent : 'hi'
		}
	},
	onLoad:function(){
		// 丢失 this 
		setTimeout(()=>{
			this.textContent = 'test....';
			// this 被保持 
		}, 1000);
	},
	methods: {},
}
</script>
<style>
</style>

箭头函数可以保持this关键字的作用域,是比较简单并推荐的方式 ~

收藏此文
相关回复
{{comment.u_nickname}}
{{comment.u_nickname}} @ {{comment.comments_reply_uname}}
{{comment.comments_content}}
 {{comment.comments_date}}
 点赞 ({{comment.comments_like_count}})   回复 ({{comment.comments_reply_count}})
{{commentSon.u_nickname}}
{{commentSon.u_nickname}} @ {{commentSon.comments_reply_uname}}
{{commentSon.comments_content}}
 {{commentSon.comments_date}}
 点赞 ({{commentSon.comments_like_count}})   回复 ({{commentSon.comments_reply_count}})
{{loadmoreText}}