详解defineProperty和Proxy

本文目录：

• 1.什么是defineProperty

• 2.defineProperty参数解析

• 3.什么是Proxy

• 4.Proxy的基本语法

• 5.defineProperty和Proxy对比

1.什么是defineProperty

ES5 提供了 Object.defineProperty 方法，该方法可以在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象。
语法

Object.defineProperty(obj, prop, descriptor)

参数

• obj: 要在其上定义属性的对象。

• prop:  要定义或修改的属性的名称。

• descriptor: 将被定义或修改的属性的描述符。

2.defineProperty参数解析

第三个参数descriptor内的属性描述：
1、简单点就是 设置属性的值value，
2、是否可操作属性值 writable，
3、是否可修改配置属性configurable，如果值为false，则descriptor内的所有属性都不可操作）
4、是否可枚举的属性enumerable
5、另外descriptor还有一对核心方法setter，getter，vue2.0也正是利用这对方法实现了数据的双向绑定。

当程序查询存取器属性的值时，JavaScript 调用 getter方法。这个方法的返回值就是属性存取表达式的值。当程序设置一个存取器属性的值时，JavaScript 调用 setter 方法，将赋值表达式右侧的值当做参数传入 setter。从某种意义上讲，这个方法负责“设置”属性值。可以忽略 setter 方法的返回值。

var obj = {}, value = null;Object.defineProperty(obj, "num", {
    enumerable:true,//是否可枚举
    writable:true,//是否可写
    configurable:true,//是否可配置
    get: function(){
        console.log('执行了 get 操作')
        return value;
    },
    set: function(newValue) {
        console.log('执行了 set 操作')
        value = newValue;
    }
})
obj.value = 1 // 执行了 set 操作
console.log(obj.value); // 执行了 get 操作 // 1

但是vue通过defineProperty实现的双向绑定有一定的缺陷，所以在vue3版本用es6提供的Proxy方法进行了优化。

3.什么是Proxy

MDN上是这么描述的——Proxy对象用于定义基本操作的自定义行为（如属性查找，赋值，枚举，函数调用等）。
官方的描述总是言简意赅，以至于不明觉厉...
其实就是在对目标对象的操作之前提供了拦截，可以对外界的操作进行过滤和改写，修改某些操作的默认行为，这样我们可以不直接操作对象本身，而是通过操作对象的代理对象来间接来操作对象，达到预期的目的~
什么？还没表述清楚？下面我们看个例子，就一目了然了~

let obj = {
    a : 1
}
let proxyObj = new Proxy(obj,{
    get : function (target,prop) {
       return prop in target ? target[prop] : 0
    },
    set : function (target,prop,value) {
        target[prop] = 888;
    }
})
console.log(proxyObj.a);        // 1
console.log(proxyObj.b);        // 0
proxyObj.a = 666;
console.log(proxyObj.a)         // 888

上述例子中，我们事先定义了一个对象 obj , 通过 Proxy 构造器生成了一个 proxyObj 对象，并对其的 set(写入) 和 get (读取) 行为重新做了修改。

当我们访问对象内原本存在的属性时，会返回原有属性内对应的值，如果试图访问一个不存在的属性时，会返回0 ，即我们访问 proxyObj.a 时，原本对象中有 a 属性，因此会返回 1 ，当我们试图访问对象中不存在的 b 属性时，不会再返回 undefined ，而是返回了 0 ，当我们试图去设置新的属性值的时候，总是会返回 888 ，因此，即便我们对 proxyObj.a 赋值为 666 ，但是并不会生效，依旧会返回 888，如果把target[prop] = 888改成target[prop] = value，就可以正常赋值了。

4.Proxy的基本语法

ES6 原生提供的 Proxy 语法很简单，用法如下：
`let proxy = new Proxy(target, handler);
参数 target 是用 Proxy 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）, 参数 handler 也是一个对象，其属性是当执行一个操作时定义代理的行为的函数，也就是自定义的行为。
Proxy 的基本用法就如同上面这样，不同的是 handler 对象的不同，handler 可以是空对象 {} ，则表示对 proxy 操作就是对目标对象 target 操作，即：

let obj = {}
let proxyObj = new Proxy(obj,{})
proxyObj.a = 1;
proxyObj.fn = function () {
   console.log('it is a function')
}
console.log(proxyObj.a); // 1
console.log(obj.a);      // 1
console.log(obj.fn())    // it is a function

但是要注意的是，handler 不能 设置为 null ，会抛出一个错误——Cannot create proxy with a non-object as target or handler

5.defineProperty和Proxy对比

从实现效果上讲Object.definety和Proper对数组和对象的表现是一致的，那么它和 Proxy 对比存在哪些缺点呢？

1. Object.defineProperty只能劫持对象的属性，而Proxy是直接代理对象。
   由于 Object.defineProperty 只能对属性进行劫持，需要遍历对象的每个属性，如果属性值也是对象，则需要深度遍历。而 Proxy 直接代理对象，不需要遍历操作。

2. Object.defineProperty对新增属性需要手动进行Observe。
   由于 Object.defineProperty 劫持的是对象的属性，所以新增属性时，需要重新遍历对象（改变属性不会自动触发setter），对其新增属性再使用 Object.defineProperty 进行劫持。
   也正是因为这个原因，使用vue给 data 中的数组或对象新增属性时，需要使用 vm.$set 才能保证新增的属性也是响应式的。
   3.defineProperty会污染原对象（关键区别）
   proxy去代理了ob，他会返回一个新的代理对象不会对原对象ob进行改动，而defineproperty是去修改元对象，修改元对象的属性，而proxy只是对元对象进行代理并给出一个新的代理对象。

作者：前端陈辉
链接：https://www.jianshu.com/p/0e2984d13ab4
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。