Object 属性描述符-蒲公英云

Object 属性描述符

属性描述符是一个普通的对象中用来描述属性的相关信息。

Object.getOwnPropertyDescriptor() 返回指定属性描述符

返回对象的key属性的属性描述

const obj = { 
    a: 1,
    b: 2
}
console.log(Object.getOwnPropertyDescriptor(obj, 'a'))

在这里插入图片描述

属性	描述
value	属性值
configurable	该属性是否可以被属性描述符修改
enumerable	是否可以枚举
writable	是否可以重新赋值

Object.getOwnPropertyDescriptors() 返回全部属性描述符

const obj = { 
    a: 1,
    b: 2
};
console.log(Object.getOwnPropertyDescriptors(obj))

在这里插入图片描述

Object.defineProperty() 修改某个属性描述符

const obj = { 
    a: 1,
    b: 2
};
Object.defineProperty(obj, "a", { 
    value: 10,
    configurable: false,
    enumerable: false,
    writable: false
})

当然也可以使用 Object.defineProperties() 同时修改多个。

Object.defineProperties(obj, { 
    a: { 
        value: 10, 
        configurable: false,
        enumerable: false,
        writable: false
    },
     b: { 
         value: 10,
         configurable: false,
         enumerable: false,
         writable: false
     }
})

其中 value 修改属性值。

console.log(obj)
// {b: 2, a: 10}

configurable 是否可以被属性描述符修改。

当设置为 false 后，不能再进行修改属性描述符，当属性描述有一项尝试修改时会报错。

Object.defineProperty(obj, "a", { 
    value: 10, //
    configurable: false,
    enumerable: false,
    writable: false
})
Object.defineProperty(obj, "a", { 
    value: 100, //
    configurable: true,
    enumerable: true,
    writable: true
})
// TypeError

enumerable 是否可以枚举

Object.defineProperties(obj, { 
    a: { 
        enumerable: false
    },
    b: { 
        enumerable: false
    }
})
for (const prop in obj) { 
    console.log(prop)
}
// 无输出

writable 是否可以重新赋值

const obj = { 
    a: 1,
    b: 2
};
Object.defineProperty(obj, "a", { 
    writable: false
})
obj.a = 100;
console.log(obj)
// {a: 1, b: 2}

在Object.defineProperty()中的储存器get()和set()方法，设置属性值是触发set()方法，获取属性值是触发get()方法。

Object.defineProperty(obj, 'a', { 
    get() { 
        console.log('查看了a属性');
    },
    set(val) { 
        console.log('设置了a属性', val);
    }
})
obj.a = 10; // 设置了 a 属性
console.log(obj.a); // 查看了 a 属性