javascript 属性描述符(descriptor) 女爷i 2022-12-18 09:54 93阅读 0赞 ### 一、定义新属性与其描述符 ### 1. **`Object.defineProperty(o, propName, descriptor)` 定义单个属性** (1) 描述符可拥有的键值 <table> <thead> <tr> <th>描述符</th> <th>configurable</th> <th>enumerable</th> <th>value</th> <th>writable</th> <th>get</th> <th>set</th> </tr> </thead> <tbody> <tr> <td>数据描述符</td> <td>√</td> <td>√</td> <td>√</td> <td>√</td> <td>X</td> <td>X</td> </tr> <tr> <td>存取描述符</td> <td>√</td> <td>√</td> <td>X</td> <td>X</td> <td>√</td> <td>√</td> </tr> </tbody> </table> (2) 示例 let o = { }; // 数据描述符属性 Object.defineProperty(o, 'data1', { configurable: true, enumerable: true, writable: true, value: 10 }) // 存取描述符属性 let data2Key = Symbol('data2'); Object.defineProperty(o, 'data2', { configurable: true, enumerable: true, set: function(_value) { // 此处最好不要用箭头函数,避免数据注入到window中 this[data2Key]= _value; }, get: function() { return this[data2Key]; } }) // 存取描述符的便捷写法(这种写法configurable与enumerable默认为true) o = { set data2(_value){ this[data2Key]= _value; }, get data2(){ return this[data2Key]; } } (3) `configurable: false` 1. 该属性不能在数据描述符和存取描述符间切换 2. 不能删除属性(`delete` 无效) 3. 允许define一个描述符一模一样的 4. 允许`writable` 从true修改为false 5. `writable: true` 时允许修改 `value` (4) `writable: false` let o = { }; Object.defineProperty(o, 'data', { writable: false, value: 10 }) o.data = 11; console.log(o.data); // 1. 普通模式下修改o.data不会抛出错误,但修改无法完成 o.data打印10 // 2. 严格模式下会报错 Uncaught TypeError: Cannot assign to read only property 'data' of object (5) 一个属性的描述符不能同时是数据描述符与存取描述符。换言之,一个属性的描述符中不能同时设置了(`value`, `writable`) 与 (`get`, `set`)。(ps: `( (设置value || 设置writable) && (设置get || 设置set) ) => Error`) 2. **`Object.defineProperties(o, props)` 定义多个属性** props: { prop1: { configurable: false, ... } } ### 二、 获取属性的描述符 ### // 测试数据定义 let symbolKey = Symbol('symbolKey'); function Obj(){ this.ownKey = 1; this[symbolKey] = 2; } Obj.prototype.prototypeKey = 3; let o = new Obj(); Object.defineProperty(o, 'unenumerableKey', { enumerable: false, value: 4 }) 1. **`Object.getOwnPropertyDescriptor(o, prop)` 获取对象单个本地属性的描述符** Object.getOwnPropertyDescriptor(o, symbolKey); // {value: 2, writable: true, enumerable: true, configurable: true} 2. **`Object.getOwnPropertyDescriptors(o)` 获取对象全部本地属性的描述符** Object.getOwnPropertyDescriptor(o); /* { ownKey: {value: 1, writable: true, enumerable: true, configurable: true} unenumerableKey: {value: 4, writable: false, enumerable: false, configurable: false} Symbol(symbolKey): {value: 2, writable: true, enumerable: true, configurable: true} } */
还没有评论,来说两句吧...