Object.defineProperty方法的运用

219 阅读1分钟

一.Object.defineProperty的语法

Object.defineProperty(obj,prop,descriptor)
obj:需要定义属性的对象
prop:需要定义的属性
descriptor:属性的描述符
返回值:返回此对象 

var obj = {};
var descriptor = {
    configurable:false,  //属性是否能通过delete删除,默认为false。当为true时,才能删除
    writable:false,    //是否可写,默认为false
    enumerable:false,   //是否可以枚举,即是否可以通过for..in访问属性,默认为false
    value:'hello'  //改属性的值,默认为undefined 
    //访问器描述符:数据描述符和访问器描述符不能同时使用(writable:true时)
    get(){},
    set(){}
};
Object.defineProperty(obj,'1',descriptor)
console.log(obj['1']);  //hello

应用:数据响应式
    function defineReactive(obj,key,val){
        //在此作用域内存在一个val变量,由于闭包的存在它不会被销毁,会一直保存在内存里面 
        Object.defineProperty(obj,key,{
            get(){
                return val
            },
            set(newVal){
                if(newVal !== val){
                    val = newVal
                }
            }
        })
    }
    const obj = {} 
    defineReactive(obj,'foo','123');
    obj.foo //触发get函数
    obj.foo = '456'   //触发set函数
    console.log(obj)