JavaScript中数据属性和访问器属性Object.defineProperty

属性分为两种：数据属性和访问器属性。

1.数据属性

数据属性包含一个保存数据值的位置，值会从这个位置读取，也会写入到这个位置，数据属性又4个特性描述它们的行为。

1. Configurable:表示属性是否可以通过delete删除并重新定义，是否可以修改它的特性，以及是否可以把它改为访问器属性。默认情况下，所有直接定义在对象上的属性这个特性都是true。
2. Enumberable:表示属性是否可以通过for-in循环返回。默认情况下，所有直接定义在对象上的属性这个特性都是true。
3. Writable:表示属性的值是否可以被修改。默认情况下，所有直接定义在对象上的属性的这个特性都是true。
4. Value:表示属性实际的值。这个特性的默认值为undefined。

要修改属性的默认特性，就必须使用Object.defineProperty()方法，这个方法接收3个参数：

1. 要给其添加属性的对象
2. 属性的名称
3. 和一个描述符对象，即描述符对象上的属性包含:configurable、enumerbale、writable和value。

writable:false

		let obj={}Object.defineProperty(obj,'name',{writable:false,//但该属性此时是只读的value:'修改后的名字'})console.log(obj.name);//修改后的名字obj.name='writable设置为false，不可修改属性的值'console.log(obj.name);//修改后的名字

• 属性设置为不可被修改
  
  enumerable:false

		 let obj1={name:1234,age:12}Object.defineProperty(obj1,'name',{enumerable:false})// 此时只能读取到age，name是无法通过for-in访问到的。for (const key in obj1) {console.log(key);//age}

• 此时for-in是访问不到name的
  

2. 访问器属性

访问器不包含数据值。它们包含一个获取getter函数和一个设置setter函数。

1. 在读取访问器属性时，会调用获取函数，这个函数的责任就是返回一个有效的值。
2. 在写入访问器属性时，会调用设置函数并传入新值，这个函数必须决定对数据做出什么修改。

访问器属性4个特性

1. Configurable:表示属性是否可以通过delete删除并重新定义，是否可以修改它的特性，以及是否可以把它改为访问器属性。默认情况下，所有直接定义在对象上的属性这个特性都是true。
2. Enumberable:表示属性是否可以通过for-in循环返回。默认情况下，所有直接定义在对象上的属性这个特性都是true。
3. Get：获取函数，在读取属性时调用。默认值为undefined。
4. Set：设置函数，在写入属性时调用。默认值为undefined。

	 let book={year_:2020,//year_下划线常用来表示该属性并不希望在对象外部被访问。edition:1}Object.defineProperty(book,'year',{// 获取属性值返回year的值get(){return this.year_},// 设置属性值set(newValue){if(newValue>2020){this.year_=newValuethis.edition=newValue + 1-2020 //设置一个属性值会导致一些其他变化发生。}}})book.year=2021console.log(book.edition);//2console.log(book.year);//2021

• 当前设置book.year的值，对应的book.edition的值也会发生改变。

访问器属性的典型使用场景：设置一个属性值会导致一些其他变化发生。

看到这里，可以更好地理解vue中的双向数据绑定原理了，尤其是计算属性computed……

3. 定义多个属性Object.defineProperties()

在一个对象上同时定义多个属性的可能性是非常大的。
Object.defineProperties()接收两个参数：

1. 要为之添加或修改属性的对象
2. 描述符对象，其属性与要修改的属性一一对应。

		let notebook={}Object.defineProperties(notebook,{// _下划线常用来表示该属性并不希望在对象外部被访问year_:{value:2021},edition:{value:1},year:{get(){return this.year_},set(newValue){if(newValue>2020){this.year_=newValuethis.edition=newValue + 1-2020 }}}})

4. 读取属性

使用 Object.getOwnPropertyDescriptor() 方法可以取得指定属性的属性描述符。 这个方法接收两个参数：

1. 属性所在的对象
2. 要取得其描述符的属性名。

• 返回值是一个对象，对于访问器属性包含 configurable 、 enumerable 、 get 和 set 属性。

        let descriptor=Object.getOwnPropertyDescriptor(notebook,'year_')console.log(descriptor);console.log(descriptor.value);//2020console.log(descriptor.configurable);//false

ECMAScript 2017新增了
Object.getOwnPropertyDescriptors() 静态方法。这个方法
实际上会在每个自有属性上调用 Object.defineProperties()
并在一个新对象中返回它们。

    console.log(Object.getOwnPropertyDescriptors(notebook));

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！