首页 > 其他 > 详细

vue之defineProperty

时间:2019-05-02 11:13:38      阅读:158      评论:0      收藏:0      [点我收藏+]
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方法,进而可以派发出事件,通知监听者。

 

vue之defineProperty

原文:https://www.cnblogs.com/fanlu/p/10801651.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!