Object.defineProperty方法的使用

新手上路，不喜勿喷，在学习的路上和大家分享知识；

本人之前对于Object.defineProperty这个方法是没有什么太大的感觉的，因为在学习Vue的时候，偶然间想起来这个方法，就想着试试实现数据双向绑定，废话不多说，直接上代码；

首先，我们创建一个对象；

let person = {
    name:"小红帽",
    sex:"男"
}

 在浏览器中查看person这个对象，可以发现通过定义对象有两个键值对分别是name和sex；

 如果说我们想为小红帽添加age属性，第一种是直接在person对象中添加age属性就可以了，第二种方法就是通过调用Object.defineProperty方法进行设置age属性，其中第一个参数就是我们要为哪个对象进行添加属性，第二个参数就是添加什么属性，value就是我们设置的值（如果你想喷我，我就愿意用第一种方法省事咋啦，你先忍忍先往下看）；

let person = {
    name:"小红帽",
    sex:"男",
    age:18
}

 

    let person = {
        name : "小红帽",
        sex : "男",
    }
    Object.defineProperty(person,'age',{
        value:18
    })

 

 仔细观察可以发现在person对象中age属性的颜色不一样，原因就是因为通过defineProperty方法添加的属性不可以被修改、枚举和删除（不信你就试试）；

当然了，如果你说我就非要修改、删除和枚举呢（哈哈哈），可以的，我们通过控制属性就可以进行对age的枚举、修改和删除啦（那你说个屁呢）。。。；

    let person = {
        name : "小红帽",
        sex : "男",
    }
    Object.defineProperty(person,'age',{
        value:18,
        enumerable:true,//通过控制属性可以枚举，默认值就是false
        writable:true,//通过控制属性可以编辑修改，默认值就是false
        configurable:true//通过控制属性可以被删除，默认值就是false
    })

 言归正传，我现在想实现这样的一个需求，我不设置age属性值，我想根据我定义的number随意更改我的age值，当然了直接在person对象中直接定义也行（你不怕麻烦就行）；

这时候我们的大佬登场啦，就是get方法，让age属性和number进行绑定,

  let number = 18  
  let person = {
        name : "小红帽",
        sex : "男",
    }
    Object.defineProperty(person,'age',{
        get(){
            console.log(this)
            return number
        }
    })

好奇的小可爱就会发现，擦，我age属性呢？？？

别急，你再打印person对象看看 

但是细心的小可爱就发现了虽然age存在，但是为什么和name他们不一样呢，我们把鼠标放上去看看

 有一个这么个东西，翻译过来就是引用getter属性，点击进去就会发现我们设置的number的值就绑定上了，和getter相配合的是setter属性，通过setter设置number=value，就可以实现绑定效果了；

 let number = 18
    let person = {
        name : "小红帽",
        sex : "男",
    }
    Object.defineProperty(person,'age',{
        // value:18,
        // enumerable:true,
        // writable:true,
        // configurable:true
        get(){
            console.log(this)
            return number
        },
        set(value){
            number = value
        }


    })

好奇的小可爱可以试试看！！！