javascript 属性描述符（descriptor）-蒲公英云

javascript 属性描述符（descriptor）

女爷i 2022-12-18 09:54 211阅读 0赞

一、定义新属性与其描述符

Object.defineProperty(o, propName, descriptor) 定义单个属性

(1) 描述符可拥有的键值

描述符	configurable	enumerable	value	writable	get	set
数据描述符	√	√	√	√	X	X
存取描述符	√	√	X	X	√	√

(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

该属性不能在数据描述符和存取描述符间切换
不能删除属性（delete 无效）
允许define一个描述符一模一样的
允许writable 从true修改为false
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）

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
})

Object.getOwnPropertyDescriptor(o, prop) 获取对象单个本地属性的描述符

Object.getOwnPropertyDescriptor(o, symbolKey);
// {value: 2, writable: true, enumerable: true, configurable: true}

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} } */