【JavaScript】用Object.definePropety()对对象的属性实现监听和修改

本文中会讲到对象函数Object.defineProperty()，也许你对这个函数比较陌生，要知道这个函数用途可大了，等自己想到它的时候，就知道它的重要性。

举个栗子

准备一个测试环境，可以打开浏览器的开发者调试工具控制台console,输入如下例子代码，接下来会操作它

//假设有一个对象
let args = {
	a: 1,
	b: 3,
	c: [],
	d: {},
	fun1: () => {}
};

赋值

修改对象args的某属性值，还可以用这个方式，代码如下

Object.defineProperty(args,'b',{
	value: 4,//赋值
});

其它配置

还可以修改对象的某属性的其它配置

Object.defineProperty(args,'b',{
	value: 5,
	writable: false,//只读，类似定义常量
	enumerable: false,//不允许被遍历，类似将访问公开变成了私有
});

args.b=6;//只读后，这里赋值会抛出异常

防修改

还有一个配置就是防修改的，一旦设置了，将不再允许被删除和再次修改

Object.defineProperty(args,'b',{
	configurable: false,//不允许删除和再次修改配置
});

delete args.b;//尝试删除，这里会抛出异常

读写监听

知道吗，现在主流的Vue.js，这个核心源代码都有它的应用场景，请看一下关键的代码

//监听对象args的某属性b
Object.defineProperty(args,'b',{
   set: function(value){
   	console.log('set b',value);
   	this._b=value;
   },
   get: function(){
   	console.log('get b',this._b);
   	return this._b;
   }
});

观察规律

阅读到最后，建议有条件的同学上机测试，边学边做，观察规律，留下深刻映像，记在心里，将来必有用。
好了，如果阅读后有遇到什么问题，请在结尾评论处留言，ヾ(￣▽￣)Bye_Bye