javascript 属性描述符（descriptor）

女爷i 2022-12-18 09:54 133阅读 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} } */