web前端之数据绑定

Object.defineProperties 可以同时绑定多个
Object.defineProperty 绑定obj下的一个变量

数据(数据描述符)属性
数据属性有4个描述内部属性的特性

[[Configurable]]
表示能否通过delete删除此属性,能否修改属性的特性,或能否修改把属性修改为访问器属性,如果直接使用字面量定义对象,默认值为true

[[Enumerable]]
表示该属性是否可枚举,即是否通过for-in循环或Object.keys()返回属性,如果直接使用字面量定义对象,默认值为true

[[Writable]]
能否修改属性的值,如果直接使用字面量定义对象,默认值为true

[[Value]]
该属性对应的值,默认为undefined

访问器(存取描述符)属性
访问器属性也有4个描述内部属性的特性

[[Configurable]]
和数据属性的[[Configurable]]一样,表示能否通过delete删除此属性,能否修改属性的特性,或能否修改把属性修改为访问器属性,如果直接使用字面量定义对象,默认值为true

[[Enumerable]]
和数据属性的[[Configurable]]一样,表示该属性是否可枚举,即是否通过for-in循环或Object.keys()返回属性,如果直接使用字面量定义对象,默认值为true

[[Get]]
一个给属性提供 getter 的方法(访问对象属性时调用的函数,返回值就是当前属性的值),如果没有 getter 则为 undefined。该方法返回值被用作属性值。默认为 undefined

var data={}
Object.defineProperties(data,{
    name:{
        get:function(){
            return "cc"; //当调用data.name的时候返回cc;
        },
        set:function(res){
            console.log(res); //当data.name修改的时候出发这个set
        }
    },
    city:{
        get:function(){
            return "cc"; //当调用data.name的时候返回cc;
        },
        set:function(res){
            console.log(res); //当data.city修改的时候出发这个set
        }
    }
})

//绑定一个
Object.defineProperty(data,"name",{
    get:function(){
        return "cc"; //当调用data.name的时候返回cc;
    },
    set:function(res){
        console.log(res); //当data.name修改的时候出发这个set
    }
})

你可能感兴趣的:(Web前端)