Object.defineProperty

Object.defineProperty，之前一直都是似懂非懂，每次说到vue双向绑定，只知道有个get set，后来阅读了【这篇文档】有点醍醐灌顶，算是懂了也记住了，现在记录一下，有需要的小伙伴可以看看，说的不对的欢迎指出。

 

一般我们创建一个对象都是 let obj = {key1:"属性值1"} ，那通过【Object.defineProperty】我们怎么定义一个对象的属性呢？

Object.defineProperty(obj, prop, descriptor)
obj:定义的对象
prop:对象的属性字段

descriptor：定义或修改的属性描述符

1. descriptor，定义或修改的属性描述符，它是一个对象，它包含有6种属性：

1. configurable：布尔类型，是否允许修改或删除这个属性，默认是true;
2. enumerable：布尔类型，在for in中是否允许访问该属性，默认是true;
3. value: 设置该属性的值;
4. writable：布尔类型，与configurable一样，是否允许修改或展示这个属性，默认是true；
5. get：方法，读取属性值时会执行，没有任何参数，但会传入 this 对象；
6. set：方法，赋值属性值时会执行，方法接受一个参数，即新的赋值，也会传入 this 对象；

下面我们就对以上的6个属性来依次试试，看看效果是怎样：
  
   

 

 

 2.get、set

get和set的方式，在获取某个属性值时，或者给某个属性赋值时，就会执行对应的方法，这两个方法便于用户在获取或赋值时做其他的逻辑处理。比如原来面试最常见的【obj.key===1&&obj.key===2&&obj.key===3】，怎么实现obj对象中的key属性值等于1 2 3？关键点就是在get方式上做操作，get这个方法return什么，那这时候获取属性值就是什么。

 

 

 

 

 3. 模拟vue2的双向绑定

<input class="input" name="input" style="width: 400px" />
<div class="div" style="color: red"></div>

window.data = {};
let input = document.querySelector(".input");

Object.defineProperty(window.data, "value", {
    set: function (v) {
        let div = document.querySelector(".div");
        div.innerHTML = v;
    },
　　get:function(){
　　　　return "";

　　}
});

input.addEventListener("input", (e) => {
    window.data.value = e.target.value;
});