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

  • Post author:
  • Post category:java


本文中会讲到对象函数

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



版权声明:本文为zs1028原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。