对象的get/set用法、利用对象的get/set实现类似vue v-model的双向数据绑定

1.get/set用法

// js对象的getter和setter用法
var obj={
	msg:'hello',
// 当[读取]对象的属性时，自动调用get关键字对应的方法
	get fn(){
		return this.msg //通常直接返回属性
	},
// 当[设置]对象的属性(obj.msg)时，自动调用set关键字对应的方法
	set fn(_msg){//接收属性将要设置的值
		this.msg=_msg
	}
}

// 以下两种都一样可读取obj的属性msg
console.log(obj.msg) //hello
console.log(obj.fn) //hello

obj.fn='hihihi'
console.log(obj.msg) //hihihi
console.log(obj.fn) //hihihi

obj.msg='hahaha'
console.log(obj.msg) //hahaha
console.log(obj.fn) //hahaha

2.利用对象的get/set实现类似vue v-model的双向数据绑定

<!-- 1.输入框 -->
	<input type="text">
	<!-- 2.显示输入框输入的值 -->
	<h1 id="msg"></h1>

	<script>
		// 3.定义一个含get,set的对象
		var obj={
			msg:'',
			// 读取时直接返回msg属性即可
			get fn(){
				return this.msg
			},
			// 设置时：
			set fn(_msg){
				// 得到输入框的值
				var umsg=document.querySelector('input').value
				// 获取显示信息的DOM
				var h1=document.getElementById('msg')
				// 把要设置的_msg赋值给输入框
				umsg=_msg
				// 把要设置的_msg赋值给显示信息处
				h1.innerText=_msg
			}
		}

		// 监听按键弹起时执行set对应函数：把输入框的值传过去
		document.addEventListener('keyup',function(e){
			obj.fn=e.target.value
		})
	</script>

效果：