Web前端—属性描述符

属性描述符

假设有一个对象obj

var obj = {
    a:1
}

观察这个对象，我们如何来描述属性a：

值为1
可以重写
可以遍历

我们可以通过Object.getOwnPropertyDescriptor得到它的属性描述符

var desc = Object.getOwnPropertyDescriptor(obj, 'a');
console.log(desc);

我们会得到一个对象
观察这个对象中的内容

configurable : true：表示描述符本身能否修改
enumerable : true ：是否可遍历
value : 1 ：值
writable : true ：是否可重写

设置属性描述符

Object.defineProperty(obj, 'a', {
    value:10,
    writable:false //表示不可重写
});
console.log(obj.a); // 10

注：如果修改了configurable的值为false，后续再次修改属性描述符会报错。

Object.defineProperty(obj, 'a', {
    configurable:false
});
Object.defineProperty(obj, 'a', {
    value:20,
});
console.log(obj.a);

在这里插入图片描述

但是，如果属性设置了不可重写，后续进行修改，虽然不会报错，但是不会修改成功

Object.defineProperty(obj, 'a', {
    value:10,
    writable:false //表示不可重写
});
console.log(obj.a); // 10
obj.a = 20;
console.log(obj.a); // 10

因此，如果属性不能重写，后续修改最好能进行报错，告诉用户哪句话出现了问题。

为了解决上面的问题，Object.defineProperty中有两个函数
- 读取器 getter
- 设置器 setter

当读取属性a的值的时候会运行get函数，设置属性a的值的时候会运行set函数

Object.defineProperty(obj, 'a', {
    get:function(){
        console.log("get函数");
    },
    set:function(val){
        console.log("set函数");
    }
});
obj.a = 20;  // set函数
console.log(obj.a);  // get函数

注：这里需要注意一个问题—无限递归问题

如果在get中读取属性，或者在set中设置属性的值，则会出现无限递归问题

Object.defineProperty(obj, 'a', {
    get:function(){
        return obj.a;
    },
    set:function(val){
        obj.a = val;
    }
});
obj.a = 20;
console.log(obj.a);

在这里插入图片描述

使用样例

var internalValue = obj.a;
Object.defineProperty(obj, 'a', {
    get:function(){
        console.log("get函数");
        return internalValue;
    },
    set:function(val){
        console.log("set函数");
        internalValue = val;
        return internalValue;
    }
});
obj.a = 20; // set函数
console.log(obj.a); // get函数 20

因此，假设该属性不能重写，可以在set函数中抛出一个报错信息，提示用户

Object.defineProperty(obj, 'a', {
    get:function(){
        console.log('get函数');
    },
    set:function(val){
        throw new Error(`报错信息：该属性不能赋值，你正在给这个属性赋值为${val}`);
    }
})
console.log(obj.a);
obj.a = 20;