属性访问器Object.defineProperty()详解

柔情只为你懂 2022-03-25 03:24 262阅读 0赞

> 该方法允许精确添加或修改对象的属性。通过赋值操作添加的普通属性是可枚举的，能够在属性枚举期间呈现出来（[`for...in`][for...in] 或 [`Object.keys`][Object.keys][ ][Link 1]方法）， 这些属性的值可以被改变，也可以被[删除][Link 2]。这个方法允许修改默认的额外选项（或配置）。默认情况下，使用 `Object.defineProperty()` 添加的属性值是不可修改的。

>  *  **定义 **
> 
> Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。
> 
> 默认情况下，使用 Object.defineProperty() 添加的属性值是不可修改的。 
> 
> Object.defineProperty(obj, prop, descriptor)

>  *  ** 语法**
> 
> obj  
>       要在其上定义属性的对象。
> 
> prop  
>      要定义或修改的属性的名称。
> 
> descriptor  
>     将被定义或修改的属性描述符。

>  *  ** descriptor属性描述符**
> 
> 对象里目前存在的属性描述符有两种主要形式：数据描述符和存取描述符。数据描述符是一个具有值的属性，该值可能是可写的，也可能不是可写的。存取描述符是由getter-setter函数对描述的属性。描述符必须是这两种形式之一；不能同时是两者。
> 
> **configurable**
> 
> 当且仅当该属性的 configurable 为 true 时，该属性描述符才能够被改变，同时该属性也能从对应的对象上被删除。默认为 false。
> 
> **enumerable**
> 
> 当且仅当该属性的enumerable为true时，该属性才能够出现在对象的枚举属性中。默认为 false。
> 
> **value**
> 
> 该属性对应的值。可以是任何有效的 JavaScript 值（数值，对象，函数等）。默认为 undefined。
> 
> **writable**
> 
> 当且仅当该属性的writable为true时，value才能被赋值运算符改变。默认为 false。
> 
> **get**
> 
> 一个给属性提供 getter 的方法，如果没有 getter 则为 undefined。当访问该属性时，该方法会被执行，方法执行时没有参数传入，但是会传入this对象（由于继承关系，这里的this并不一定是定义该属性的对象）。默认为 undefined。
> 
> **set**
> 
> 一个给属性提供 setter 的方法，如果没有 setter 则为 undefined。当属性值修改时，触发执行该方法。该方法将接受唯一参数，即该属性新的参数值。默认为 undefined。

>  *  **setter和getter方法**
> 
> 程序查询存取器属性的值时，JavaScript调用getter方法（无参数）。这个方法的返回值就是属性存取表达式的值。当程序设置一个存取器属性的值时，JavaScript调用setter方法，将赋值表达式右侧的值当做参数传入setter。从某种意义上讲，这个方法负责“设置”属性值。可以忽略setter方法的返回值。
> 
> 和数据属性不同，存取器属性不具有可写性（writable attribute）。如果属性同时具有getter和setter方法，那么它是一个读/写属性。如果它只有getter方法，那么它是一个只读属性。如果它只有setter方法，那么它是一个只写属性（数据属性中有一些例外），读取只写属性总是返回undefined。

>  *  **实例 (在一些.html文件中，可以用当前方法直接监听某个数值得变化，做相应得逻辑操作)**
> 
>     function Archiver() {
>       var temperature = null;
>       Object.defineProperty(this, 'temperature', {
>         get: function() {
>           console.log('你想得到我?');
>           return temperature;
>         },
>         set: function(value) {
>           temperature = value;
>     		console.log('你在修改我?');
>         }
>       });
>     }
>      
>     var arc = new Archiver();
>     arc.temperature=20;
>     console.log(arc.temperature);
> 
>

>  *  ** 浏览器支持情况**
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RfY2xhdXM_size_16_color_FFFFFF_t_70][]

> 对比es6 代理器proxy传送门：[http://es6.ruanyifeng.com/?search=filter&x=0&y=0\#docs/proxy][http_es6.ruanyifeng.com_search_filter_x_0_y_0_docs_proxy]

[for...in]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for...in
[Object.keys]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
[Link 1]: https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/keys
[Link 2]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/delete
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RfY2xhdXM_size_16_color_FFFFFF_t_70]: /images/20220325/f8c01ecef80846b782eabe1fe02769a9.png
[http_es6.ruanyifeng.com_search_filter_x_0_y_0_docs_proxy]: http://es6.ruanyifeng.com/?search=filter&x=0&y=0#docs/proxy