本文共 601 字，大约阅读时间需要 2 分钟。

数据劫持

• 代码分析：

1. 实现文本框中的内容发生了变化，对象中的data也要跟着发生变化，保持一致

• 如何监听到文本框中的值发生变化呢？
• 使用oninput事件：在用户输入时触发

var text = document.getElementById('data');text.oninput = function(){   	obj.data = this.value;	console.log(obj.data);}

2. 实现对象中的data值发生了变化，文本框的值也要跟着变化

• 如何监听到对象的值正在发生变化？
  • 监听数据变化 - 脏数据查询 - 死循环：轮询
  • 但是死循环性能受影响
• Object构造函数有一个方法叫defineProperty()
• 可以劫持到数据发生变化的时机

Object.defineProperty(obj,'data',{   	get(){   		// 当获取obj对象的data的值的时候，就会先经过get方法		// get方法返回的值，就是最终访问到的值		return text.value;	},	set(val){   		// set方法，是当给obj的data赋值的时候，会先经过set方法，并将要设置的值获取到		text.value = val;		console.log("正在给obj的data改值，值是：" + val);	}})

总代码

转载地址：http://pfxh.baihongyu.com/