首页 > 编程语言 >【JavaScript】用Object.definePropety()对对象的属性实现监听和修改_TA远方的博客

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

时间:2023-03-16 13:48:31浏览次数:48  
标签:JavaScript args Object value 修改 definePropety defineProperty 监听

本文中会讲到对象函数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;
   }
});

观察规律

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

本文转自 https://blog.csdn.net/zs1028/article/details/127850448,如有侵权,请联系删除。

标签:JavaScript,args,Object,value,修改,definePropety,defineProperty,监听
From: https://www.cnblogs.com/hustshu/p/17222222.html

相关文章

  • C#使用ObjectPool提高StringBuilder性能
        在C#中我们知道使用StringBuilder能提高大量字符串拼接的效率,其实StringBuilder的效率也可以提升,那就是使用ObjectPool。本文将介绍怎么使用ObjectPool提高StringB......
  • JavaScript随笔
    数据类型简单数据类型(原始类型):Undefined、Null、Boolean、Number、String和Symbol复杂数据类型:Object深拷贝与浅拷贝浅拷贝Object.assignArray.prototype.slice()......
  • Object.prototype.toString判断类型的原理
    项目中,我们经常会直接使用Object.prototype.toString用来做类型判断。他基本是几种方法里可以开箱即用、且判断类型最完善了。现在我们来扒皮一下他。具体原理在toString......
  • 代码随想录算法训练营第一天| javascript |二分查找_LeetCode704, 移除元素_LeetCode2
    二分查找题目链接:https://leetcode.cn/problems/binary-search/文章讲解:https://programmercarl.com/0704.%E4%BA%8C%E5%88%86%E6%9F%A5%E6%89%BE.html视频讲解:ht......
  • Vue.js 数据代理-回顾Object.defineProperty方法
    视频<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"/> <title>回顾Object.defineproperty方法</title> </head> <body> <scripttype="text/javascript"......
  • 学习-Object.keys()方法
    标准内置对象Object  /** * Object.keys() * Object.keys()方法会返回一个由一个给定对象的自身可枚举属性组成的数组,数组 * 中属性名的排列顺序和正常循......
  • JavaScript删除URL指定的参数和值
    JavaScript删除URL指定的参数和值,不跳转(functionhandleLocationHref(){varurl=window.location.href;varparams=(window.location.search||'?').s......
  • Object类
    Object1.getClass()方法返回引用中存储的实际对象类型应用:用于判断两个引用中实际存储对象类型是否一致packagecom.zhang.oop.Obct;publicclassStudent{priv......
  • Swift与Objective-C常量定义的不同
    在Objective-C中,使用const关键字定义的常量是在编译时被解析的,它们的值是静态的,不能在运行时改变。同时,这种方式定义的常量需要通过C语言的方式来访问和使用。而在......
  • 【JavaScript】44_DOM编程初步
    1、初识要使用DOM来操作网页,我们需要浏览器至少得先给我一个对象才能去完成各种操作所以浏览器已经为我们提供了一个document对象,它是一个全局变量可以直接使用document代表......