Proxy 与 defineProperty 的理解、区别、优势、劣势

news2024/11/28 19:01:58

一、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 // 当修改属性时调用此方法
        };