Proxy 与 defineProperty 的理解、区别、优势、劣势-编程知识

一、Object.defineProperty()

文档：Object.defineProperty() - JavaScript | MDN

作用：对一个对象进行操作的方法。可以为一个对象增加一个属性，同时也可以对一个属性进行修改和删除。

它是在 ES5 中引入的，使用了 getter 和 setter 方法来实现 Vue2 的响应式。

1、劣势

Object.defineProperty() 的问题主要有三个：

不能监听数组的变化

无法监控到数组下标的变化，导致通过数组下标添加元素，不能实时响应

必须遍历对象的每个属性

只能劫持对象的属性，从而需要对每个对象，每个属性进行遍历。

如果属性值是对象，还需要深度遍历。Proxy 可以劫持整个对象，并返回一个新的对象

必须深层遍历嵌套的对象

2、优势

兼容性好，支持 IE9

而 Proxy 的存在浏览器兼容性问题，而且无法用 polyfill 磨平

3、代码

      Object.defineProperty(obj, prop, descriptor);// obj 要定义属性的对象// prop 要定义或修改的属性的名称// descriptor 要定义或修改的属性描述符Object.defineProperty(obj, "name", {value: "小草莓", // 初始值writable: true, // 该属性是否可写入enumerable: true, // 该属性是否可被遍历得到（for...in， Object.keys等）configurable: true, // 定该属性是否可被删除，且除writable外的其他描述符是否可被修改get: function () {},set: function (newVal) {},});

二、proxy

1、对 Proxy 的理解

Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。

Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。

ES6 入门教程

var obj = new Proxy({}, {get: function (target, propKey, receiver) {console.log(`getting ${propKey}!`);return Reflect.get(target, propKey, receiver);},set: function (target, propKey, value, receiver) {console.log(`setting ${propKey}!`);return Reflect.set(target, propKey, value, receiver);}
});obj.count = 1
//  setting count!
++obj.count
//  getting count!
//  setting count!
//  2

上面代码对一个空对象架设了一层拦截，重定义了属性的读取（get）和设置（set）行为。

2、语法

ES6 原生提供 Proxy 构造函数，用来生成 Proxy 实例

var proxy = new Proxy(target, handler);

第一个参数：target参数表示所要拦截的目标对象

第二个参数：handler参数也是一个对象，用来定制拦截行为。 它是一个配置对象，对于每一个被代理的操作，需要提供一个对应的处理函数，该函数将拦截对应的操作。

Proxy 对象可以拦截目标对象的任意属性，这使得它很合适用来写 Web 服务的客户端。

3、Proxy的优势

针对对象

针对整个对象，而不是对象的某个属性 ，所以也就不需要对 keys 进行遍历

支持数组

Proxy 不需要对数组的方法进行重载，省去了众多 hack，减少代码量等于减少了维护成本，而且标准的就是最好的

Proxy的第二个参数可以有 13 种拦截方法

不限于apply、ownKeys、deleteProperty、has等等，是Object.defineProperty不具备的

Proxy返回的是一个新对象

我们可以只操作新的对象达到目的。而Object.defineProperty只能遍历对象属性直接修改

Proxy作为新标准将受到浏览器厂商重点持续的性能优化

也就是传说中的新标准的性能红利

4、使用 proxy 创建一个响应式对象

        import { isObject } from "./util"; // 工具方法// 创建一个响应式对象export function reactive(target) {// 根据不同参数创建不同响应式对象return createReactiveObject(target, mutableHandlers);}// 根据不同参数创建不同响应式对象function createReactiveObject(target, baseHandler) {if (!isObject(target)) {return target;}const observed = new Proxy(target, baseHandler);return observed;}const get = createGetter();const set = createSetter();function createGetter() {return function get(target, key, receiver) {// 对获取的值进行放射const res = Reflect.get(target, key, receiver);console.log("属性获取", key);if (isObject(res)) {// 如果获取的值是对象类型，则返回当前对象的代理对象return reactive(res);}return res;};}function createSetter() {return function set(target, key, value, receiver) {const oldValue = target[key];const hadKey = hasOwn(target, key);const result = Reflect.set(target, key, value, receiver);if (!hadKey) {console.log("属性新增", key, value);} else if (hasChanged(value, oldValue)) {console.log("属性值被修改", key, value);}return result;};}export const mutableHandlers = {get, // 当获取属性时调用此方法set // 当修改属性时调用此方法};