前端JS进阶：对象属性的高级用法

“这是我参与更文挑战的第13天，活动详情查看： 更文挑战”

获取属性值用点’.’，多层级的，就用多个点

        var obj1 = {
            x:1,
            y:{
                x:2,
                y:{
                    x:3,
                    y:4,
                }
            }
        }
复制代码

运行效果：

属性的特性(除了属性名和属性值）
1.可写：是否可以设置该属性的值 writable:true
2.可枚举：for…in是否可以获取该属性值 enumerable:true
3.可配置：是否可以删除，或修改属性的特性 configurable:true

定义属性的特性：
Object.defineProperty(对象，属性名字符串，特性描述对象)
Object.defineProperties(对象，多属性特性描述对象)

单属性：
可写：

        var obj1 = {
            x:1,
            y:2,
        }
        Object.defineProperty(obj1, 'z',{
            value:3,
            writable:false,
            enumerable:true,
            configurable:true,
        })
复制代码

运行效果：

由于obj1的z是可配置的，所以，要想修改z值，将z的可写改成true即可

        Object.defineProperty(obj1, 'z',{
            writable:true,
        })
复制代码

运行结果：z值可修改

可枚举：
可枚举时：

var obj1 = {
    x:1,
    y:2,
}
Object.defineProperty(obj1, 'z',{
    value:3,
    writable:true,
    enumerable:true,
    configurable:true,
})
for (var i in obj1){
    console.log(i + ' : ' + obj1[i]);
}
复制代码

运行效果：

不可枚举时：

var obj1 = {
    x:1,
    y:2,
}
Object.defineProperty(obj1, 'z',{
    value:3,
    writable:true,
    enumerable:false,
    configurable:true,
})
for (var i in obj1){
    console.log(i + ' : ' + obj1[i]);
}
复制代码

运行效果：

可配置
不可配置之不能删除属性：delete返回false

var obj1 = {
    x:1,
    y:2,
}
Object.defineProperty(obj1, 'z',{
    value:3,
    writable:true,
    enumerable:false,
    configurable:false,
})
复制代码

运行效果：

不可配置之不能修改配置：

Object.defineProperty(obj1, 'z',{
    value:3,
    writable:false,
    enumerable:false,
    configurable:false,
})//初始特性设置
Object.defineProperty(obj1, 'z',{
    writable:true,
    enumerable:false,
    configurable:true,
})//想要修改配置
复制代码

运行结果：报错，原因，初始设置时，设置configurable:false,

多属性：

Object.defineProperties(obj1,{
    z: {
        value: 3,
        writable:false,
        enumerable:true,
        configurable:true,
    },
    t : {
        value: 4,
        writable: true,
        enumerable:true,
        configurable:true,
    }
})
复制代码

查看属性的特性：Object.getOwnPropertyDescriptor(对象, 属性名)

set与get

//某班级男生10人，女生8人，算班费
var classFare = {boy:10, girl:8, allmoney:0};
Object.defineProperty(classFare, 'onemoney',{
    set:function(money){
        this.allmoney = (this.boy + this.girl )* money ;
    },
    get:function(){
        return '总共：'+this.allmoney;
    },
    // writable:true,//Cannot both specify accessors and a value or writable attribute
    enumerable:true,
    configurable:true,
})
复制代码

运行结果：

注意：不能在set和get中使用本属性，会造成死循环

//某班级男生10人，女生8人，算班费
var classFare = {boy:10, girl:8, allmoney:0};
Object.defineProperty(classFare, 'onemoney',{
    set:function(money){
        this.onemoney = 100;//这一句相当于set，就会一直在这两行中绕圈子循环
        this.allmoney = (this.boy + this.girl )* money ;
    },
    get:function(){
        return '总共：'+this.allmoney;
    },
    // writable:true,//Cannot both specify accessors and a value or writable attribute
    enumerable:true,
    configurable:true,
})
复制代码