Object.defineProperties 添加一个/多个属性到对象;修改已有属性

news/2024/7/19 15:26:24 标签: js, defineproperties, 设置属性

语法:

object.defineProperties(object, descriptors)

作用:除了可以用构造函数和字面量的方式为对象设置属性,也可以使用 object.defineProperties来添加/设置对象属性。

参数:

object

必需。 对其添加或修改属性的对象。  这可以是本机 JavaScript 对象或 DOM 对象。  

descriptors

必需。 包含一个或多个描述符对象的 JavaScript 对象。  每个描述符对象描述一个数据属性访问器属性(意思就是对象具有数据属性或者访问器属性)。 详见:数据属性和访问器属性

数据属性

数据属性 是可获取和设置值的属性。数据属性将 value 和 writable 属性包含在其描述符中。

下表列出了数据属性描述符的特性。

如果描述符没有 valuewritableget 或 set 特性且指定的属性名不存在,则会添加数据属性。

在 configurable 特性为 false 且 writable 为 true 时,可以更改 value 和 writable 特性。

在未使用 defineProperty 的情况下添加的数据属性

如果您在未使用 Object.definePropertyObject.defineProperties 或 Object.create 函数的情况下添加数据属性,则 writableenumerable 和 configurable 特性都将设置为 true。在添加属性后,可以使用Object.defineProperty 函数修改属性。


访问器属性

只要设置或检索属性值,访问器属性 就会调用用户提供的函数。访问器属性的描述符包含 get 特性和/或 set 属性。

下表列出了访问器属性描述符的特性。

在未定义 get 访问器时,如果尝试访问属性值,则将返回 undefined 值。在未定义 set 访问器时,如果尝试向访问器属性赋值,则什么也不会发生。 


以下例子给ling 这个对象设置了 数据属性 name 和 访问器属性 setNameWarming

var ling={};

Object.defineProperties(ling,{
	name:{
	        value:"zzling", //设置该属性的初始值
		writable:false, //设置可修改性
		enumerable:true, //设置可枚举性
		configurable:true,  //设置可设置性
			},
			
	setNameWarming:{
		set:function(newVal){
		alert("警告:有人试图用setNameWarming 访问器属性设置name 的值为"+newVal);
		this.name=newVal
	     },
							  
		get:function(){
			return this.name
         },
	enumberable:true,
	configurable:true
    }}
);

ling.setNameWarming="lingggggg" //调用setName 访问器属性(函数),尝试把name 值改为"linggggg"
document.write("ling.name的值:"+ling.name)  //因为writable(是否可修改)特性为 false。所以name属性值无法修改,还是返回"ling"

 例子解读:

ling.setNameWarming="lingggggg" //调用setName 访问器属性(函数),尝试把name 值改为"linggggg"
document.write("ling.name的值:"+ling.name)  //因为writable(是否可修改)特性为 false。所以name属性值无法修改,还是返回"ling"

1. 调用 setName 访问器属性(函数)设置name 的值为 "linggggg"

2. 最后返回的 ling.name 的值依旧是"ling", 没有变为"linggggg"

因为在 name 数据属性里,writable (可修改性)特性为 false。 

结论:

这个方法除了可以设置对象的属性值(value)外,还可以用来设置属性的特性(writable、enumberable、configurable 可修改性、可枚举性(能否用 in 检测遍历对象的属性)、是否可修改和删除特性);

 

 


http://www.niftyadmin.cn/n/1529009.html

相关文章

点击按钮显示与隐藏

<div click"showCont"></div> <div v-if"show"></div> data:{show:true}, methods:{showCont:founction(){this.show!this.show;} }

vue 传递 静态或动态 props

传递静态props 新建vue 组件 <blog-post>。然后直接定义title 的值"My journey with Vue" <blog-post title"My journey with Vue"></blog-post> 也可以通过 v-bind 绑定属性&#xff0c;然后传入值 <blog-post v-bind:title"…

vue开关控制两张图片,点击展示不同图片

<div class"container"><div class"row"><div class"col-lg-6 col-lg-offset-3 text-center"><div id"app"><button click"sort">排序</button><i class"fa el-down-icon"…

JS event.target 返回触发事件的当前元素

定义和用法&#xff1a; target 事件属性可返回事件的目标节点&#xff08;触发该事件的节点&#xff09;&#xff0c;如生成事件的元素、文档或窗口。 <script type"text/javascript"> function getEventTarget(event){ xevent.target; alert("点击事件…

用vue实现多选框单选,全选和删除

原文链接&#xff1a;https://www.jianshu.com/p/0c00c2c47f41 原文链接&#xff1a;https://www.jianshu.com/p/0c00c2c47f41 原文链接&#xff1a;https://www.jianshu.com/p/0c00c2c47f41 包含功能&#xff1a; 单选多选全选批量删除 实现原理&#xff1a; fruits&…

JQ .siblings( ) 返回元素的同胞元素

用法&#xff1a;返回元素的同胞元素。参数是选择器&#xff0c;也就是说&#xff0c;参数可以是先经过一定的筛选条件后的元素。 selector字符串值&#xff0c;包含用于匹配元素的选择器表达式。 <ul><li>list item 1</li><li>list item 2</li>…

JS .addEventListener( ) 事件监听器:监听元素的事件,并设置事件发生时触发的函数,以及事件流(冒泡、捕获)

为什么使用事件监听&#xff1f; 当同一个对象使用.onclick的写法触发多个方法的时候&#xff0c;后一个方法会把前一个方法覆盖掉&#xff0c;也就是说&#xff0c;在对象的 onclick事件发生时&#xff0c;只会执行最后绑定的方法。而用事件监听则不会有覆盖的现象&#xff0c…

修改select选择框默认样式

参考&#xff1a;http://uplifted.net/programming/change-default-select-dropdown-style-just-css/ 来源&#xff1a;https://blog.csdn.net/java_zhaoyanli/article/details/52549787 select {/*Chrome和Firefox里面的边框是不一样的&#xff0c;所以复写了一下*/border: s…