vue之defineProperty

Object.defineProperty是js中一个高级方法,理解它有助于我们更好地理解面向对象及理解vue运行原理  

定义:

Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象 

 

语法:

Object.defineProperty(obj, prop, descriptor)

参数:

  • obj     要在其上定义属性的对象。
  • prop     要定义或修改的属性的名称。
  • descriptor 将被定义或修改的属性描述符。

返回值:

被传递给函数的对象

 

详细语法介绍请参考MDN:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

自己简单写了个示例,方便理解Object.defineProperty

     var data = {
            name: "jade",
            age: 18, 
        }
        Object.keys(data).forEach(key=>{
            var vl = data[key];
            Object.defineProperty(data,key,{
                get(){ 
                    console.log(key + "...get..."); 
                    return vl;
                },
                set(value){ 
                    console.log(key + "...set... value is " + value);
                    vl = value;
                }
            });
        })

        console.log("age:"+data.age);   
        data.age = 20;
        data.name = "jake";
        console.log("age:"+data.age); 

在读取属性或者给属性赋值时,会进入get和set方法,进而可以派发出事件,通知监听者。

 

上一篇:如何从JavaScript对象中删除setter?


下一篇:JavaScript中的Object.defineProperty()方法