this 作用域保持

在日常的开发过程中，我们经常会编写函数来完成各类功能，同时也经常遇到 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>

解决方案 1 : 使用箭头函数保持 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>

解决方案 2 : 使用全局变量 _this

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