Object.getOwnPropertyDescriptor属性描述符

相信接触过前端的都知道Object.defineProperty这个属性。今天聊一下它的一些有意思的用法。

属性描述符

什么是属性描述符？

Object.getOwnPropertyDescriptor()

Object.getOwnPropertyDescriptor() 静态方法返回一个对象，该对象描述给定对象上特定属性（即直接存在于对象上而不在对象的原型链中的属性）的配置。返回的对象是可变的，但对其进行更改不会影响原始属性的配置。

来试一下：

let obj = {
    name: "Joyce",
    age: 18
}

const descriptor = Object.getOwnPropertyDescriptor(obj, "age")
console.log(descriptor)
// {"value": 18,"writable": true, "enumerable": true, "configurable": true}

输出的是obj对象上age属性相关的描述，

• value：与属性关联的值（仅限数据描述符）。
• writable：当且仅当与属性关联的值可以更改时，为 true（仅限数据描述符）。简单可以理解为该属性是否可以被重写。
• enumerable：当且仅当此属性在相应对象的属性枚举中出现时，为 true。简单理解为可以被遍历
• confiruable：当且仅当此属性描述符的类型可以更改且该属性可以从相应对象中删除时，为 true。是否可以被再配置。

writable

接下来看一下简单的案例：

比如说有一个obj对象，它有一个id属性，我们希望这个id属性不被更改，其他属性可以修改。那么就可以设置它的writable设置为false，实现这么一个效果。

话不多说，上代码：

let obj = {
    id: 1,
    name: "Joyce",
    age: 18
}

Object.defineProperty(obj, "id", {
    writable: false
})

obj.id = 2
console.log(obj.id)
// 1

这样当我们再去给id属性赋值时，值就不会变了，控制台输出的还是1，但有个问题就是我们去修改了id这个属性，值没有变，但是程序没有报错，不知道的情况下我们会以为id修改成功了，怎么去在修改id属性的值的时候去报一个错，来提醒我们obj的id属性是只读的，不可以被修改。这个时候我们修改代码，就要用到set方法了，在它给属性赋值的时候，来给它抛出一个异常。

let obj = {
    id: 1,
    name: "Joyce",
    age: 18
}

Object.defineProperty(obj, "id", {
    writable: false,
    set: function () {
        throw new Error("This property is read-only and cannot be assigned a value.")
    }
})

obj.id = 2

这样就达到我们的效果，id属性不可修改，如果修改的话，程序就报错。

enumerable

当且仅当此属性在相应对象的属性枚举中出现时，为 true。简单理解为可以被遍历。

假设有这么一个场景，我们需要获取一个对象除了id之外的所有键。该怎么实现？

这里可以实现的方法有很多种，比如先用Object.keys获取出它的所有键，再用fiter过滤掉id键。或者for...in...循环加if判断。当然，这也是个不错的解决方案。但是今天我们试着用enumerable来实现。

来试一下，还是那个obj，我们给obj的id属性设置为enumerable:false，我们再用Object.keys获取obj的键。

let obj = {
    id: 1,
    name: "Joyce",
    age: 18
}

Object.defineProperty(obj, "id", {
    writable: false,
    enumerable: false,
})

console.log(Object.keys(obj))
// [ "name","age"]

输出的属性中就不包括id属性了。我们再用for...in...看一下

let obj = {
    id: 1,
    name: "Joyce",
    age: 18
}

Object.defineProperty(obj, "id", {
    writable: false,
    enumerable: false,
})

console.log(Object.keys(obj))
// [ "name","age"]
for (let key in obj) {
    console.log(key)
}

同样的，也是遍历不到id属性。

所以说，enumerable设置为false时，该属性就不可被遍历。