JavaScript的Proxy对象详解

什么是Proxy对象

Proxy 是 ES6 新增的语法，它允许你在外部控制对象和函数的访问行为。可以说，Proxy 是以对象为基础的 元编程 ，使得我们可以编写出更加可复用，更加通用的 Javascript 代码。

创建一个Proxy对象

可以使用 new 操作符来创建一个 Proxy 对象，其中第一个参数为需要代理的对象，第二个参数为代理行为的定义。

示例代码如下：

let proxy = new Proxy(target, handler);

在上面的代码中，target 指的是被代理的目标对象，handler 对象定义了代理行为的具体实现。

Proxy对象的方法

Proxy 对象会为被代理对象提供一些默认的方法，它们会影响到被代理对象的访问。

1. get(target, propKey, receiver)

   该方法会在访问属性时被调用，接收三个参数，分别是对象本身，属性 key 值，以及 Proxy 对象本身。在该方法中，可以对属性的访问进行拦截和处理。

   下面是一个简单的示例：

   ```javascript
   let target = {
   name: 'Proxy'
   };

   let handler = {
   get: function(target, propKey) {
   if (propKey in target) {
   return target[propKey];
   } else {
   return Property ${propKey} does not exist.;
   }
   }
   };

   let proxy = new Proxy(target, handler);

   console.log(proxy.name); // Proxy
   console.log(proxy.age); // Property age does not exist.
   ```

   在上面的代码中，我们定义了一个 handler 对象，并在其中定义了 get 方法来对属性的访问进行拦截。当访问的属性存在时，我们将直接返回 target[propKey]。当属性不存在时，我们返回一个错误信息。

2. set(target, propKey, value, receiver)

   该方法会在设置属性时被调用，接收四个参数，分别是对象本身，属性 key 值，打算设置的属性值，以及 Proxy 对象本身。在该方法中，可以对属性的设置进行拦截和处理。

   下面是一个简单的示例：

   ```javascript
   let target = {
   name: 'Proxy'
   };

   let handler = {
   set: function(target, propKey, value) {
   if (propKey === 'age') {
   if (typeof value !== 'number') {
   throw new TypeError('The age must be a number.');
   }
   }
   target[propKey] = value;
   }
   };

   let proxy = new Proxy(target, handler);

   proxy.age = 18; // ok
   proxy.age = '18'; // Error: The age must be a number.
   ```

   在上面的代码中，我们定义了一个 handler 对象，并在其中定义了 set 方法来对属性的设置进行拦截。当打算设置的属性为 'age' 时，我们检查其类型是否为 number。如果不是，我们抛出一个错误信息。如果是，我们则直接将值设置到 target[propKey] 中。

示例应用

劫持一个对象所有的 get 操作

默认情况下，访问一个 JavaScript 对象中不存在的属性会返回 undefined。但是在某些情况下，我们可能需要更加优雅的方式，而不是直接返回 undefined。这就是我们可以使用 Proxy 对象的 get 方法，劫持对象所有的 get 操作。

下面是一个实现：

let target = {
    name: 'Proxy'
};

let handler = {
    get: function(target, propKey) {
        return `The value of property ${propKey} is ${target[propKey]}.`;
    }
};

let proxy = new Proxy(target, handler);

console.log(proxy.name);    // The value of property name is Proxy.
console.log(proxy.age);     // The value of property age is undefined.

代码中，我们如下修改：

1. 重写了 handler.get 方法，将属性访问劫持，并返回一个判断。
2. 以 target 为基础，利用 handler 创建 proxy。

通过上面示例可以看出，当我们访问 proxy 对象中不存在的属性时，它会返回一个提示信息，并告知所查询的属性名。

阻止调用对象中的某个函数

Proxy 对象不仅可以拦截属性的访问，还可以拦截函数的调用。这在某些情况下可能非常有用。

下面是一个实现：

let obj = {
    add: function(a, b) {
        return a + b;
    },
    minus: function(a, b) {
        return a - b;
    }
};

let handler = {
    apply: function(target, thisArg, args) {
        if (target === obj.minus) {
            if (args[0] > args[1]) {
                return target.apply(thisArg, args);
            }
            else {
                throw new Error('Cannot execute the minus method, because the first parameter is less than the second parameter.');
            }
        } else {
            throw new Error('Cannot execute the add method.');
        }
    }
};

let proxy = new Proxy(obj, handler);

console.log(proxy.add(1, 2));                // Error: Cannot execute the add method.
console.log(proxy.minus(2, 1));              // 1
console.log(proxy.minus(1, 2));              // Error: Cannot execute the minus method, because the first parameter is less than the second parameter.

在该示例中，我们定义了一个 obj 对象，其中包含 add 和 minus 两个函数。使用 new 操作符创建了 handler 对象，它覆盖了 apply 方法，从而拦截 obj 对象中所有函数的调用。

这里我们可以看到，当调用 add 方法时，handler.apply 方法会阻止它的执行并抛出一个错误。而当调用 minus 方法时，handler.apply 判断其传入的参数，只有在第一个参数大于第二个参数时才允许其执行，否则也会抛出一个错误。