ES6之Proxy详解

概念

ES6中的Proxy是一种用于创建代理对象的特殊对象。它允许我们定义自定义行为，例如拦截和修改对象的默认操作。Proxy可以用于拦截对象的各种操作，包括属性访问、赋值、函数调用等。

Proxy的作用是在目标对象之前架设一层拦截，可以对目标对象进行各种操作的拦截和自定义处理。通过使用Proxy，我们可以实现对目标对象的访问控制、数据验证、属性劫持等功能。

Proxy通过使用一个代理对象来包装目标对象，并提供了一组钩子函数（也称为"陷阱"），这些钩子函数可以在代理对象上进行操作。当我们对代理对象进行操作时，实际上是在调用这些钩子函数，并根据需要进行相应的处理。

Proxy属性操作介绍

• get(target, propKey, receiver) ：拦截对象属性的读取

• set(target, propKey, value, receiver) ：拦截对象属性的设置返回一个布尔值。

• has(target, propKey) ：拦截propKey in proxy的操作，返回一个布尔值。

• deleteProperty(target, propKey) ：拦截delete proxy[propKey]的操作，返回一个布尔值。

• ownKeys(target) ：拦截Object.getOwnPropertyNames(proxy)、Object.getOwnPropertySymbols(proxy)、Object.keys(proxy)、for...in循环，返回一个数组。该方法返回目标对象所有自身的属性的属性名，而Object.keys()的返回结果仅包括目标对象自身的可遍历属性。

• getOwnPropertyDescriptor(target, propKey) ：拦截Object.getOwnPropertyDescriptor(proxy, propKey)，返回属性的描述对象。

• defineProperty(target, propKey, propDesc) ：拦截Object.defineProperty(proxy, propKey, propDesc）、Object.defineProperties(proxy, propDescs)，返回一个布尔值。

• preventExtensions(target) ：拦截Object.preventExtensions(proxy)，返回一个布尔值。

• getPrototypeOf(target) ：拦截Object.getPrototypeOf(proxy)，返回一个对象。

• isExtensible(target) ：拦截Object.isExtensible(proxy)，返回一个布尔值。

• setPrototypeOf(target, proto) ：拦截Object.setPrototypeOf(proxy, proto)，返回一个布尔值。如果目标对象是函数，那么还有两种额外操作可以拦截。

• apply(target, object, args) ：拦截 Proxy 实例作为函数调用的操作，比如proxy(...args)、proxy.call(object, ...args)、proxy.apply(...)。

• construct(target, args) ：拦截 Proxy 实例作为构造函数调用的操作，比如new proxy(...args)。

一些常用的Proxy属性用法示例

get(target, prop, receiver)

• 作用：拦截对目标对象属性的读取操作。

• 参数：

  • target：目标对象。
  • prop：要访问的属性名。
  • receiver：代理对象本身（或者说是拦截操作所在的环境）。

• 示例：

  const target = {
    name: 'Alice',
    age: 25
  };
  const proxy = new Proxy(target, {
    get(target, prop) {
      console.log(`Getting ${prop}`);
      return target[prop];
    }
  });
  
  console.log(proxy.name); // 输出：Getting name，Alice

set(target, prop, value, receiver)

• 作用：拦截对目标对象属性的赋值操作。

• 参数：

  • target：目标对象。
  • prop：要设置的属性名。
  • value：要设置的值。
  • receiver：代理对象本身（或者说是拦截操作所在的环境）。

• 示例：

  const target = {
    name: 'Alice',
    age: 25
  };
  
  const proxy = new Proxy(target, {
    set(target, prop, value) {
      console.log(`Setting ${prop} to ${value}`);
      target[prop] = value;
      return true;
    }
  });
  
  proxy.age = 30; // 输出：Setting age to 30
  console.log(proxy.age); // 输出：30

has(target, prop)：

• 作用：拦截对in操作符的操作，判断属性是否存在。

• 参数：

  • target：目标对象。
  • prop：要判断的属性名。

• 示例：

  const target = {
    name: 'Alice',
    age: 25
  };
  
  const proxy = new Proxy(target, {
    has(target, prop) {
      console.log(`Checking if ${prop} exists`);
      return prop in target;
    }
  });
  
  console.log('name' in proxy); // 输出：Checking if name exists，true
  console.log('gender' in proxy); // 输出：Checking if gender exists，false

deleteProperty(target, prop)：

• 作用：拦截对delete操作符的操作，删除属性。

• 参数：

  • target：目标对象。
  • prop：要删除的属性名。

• 示例：

  const target = {
    name: 'Alice',
    age: 25
  };
  
  const proxy = new Proxy(target, {
    deleteProperty(target, prop) {
      console.log(`Deleting ${prop}`);
      delete target[prop];
      return true;
    }
  });
  
  delete proxy.age; // 输出：Deleting age console.log(proxy.age); // 输出：undefined

apply(target, thisArg, argumentsList)：

• 作用：拦截对代理对象的函数调用。

• 参数：

  • target：目标对象。
  • thisArg：函数调用时的this值。
  • argumentsList：函数调用时的参数列表。

• 示例：

  const target = function (name) {
    console.log(`Hello, ${name}`);
  };
  
  const proxy = new Proxy(target, {
    apply(target, thisArg, argumentsList) {
      console.log('Calling function');
      return target.apply(thisArg, argumentsList);
    }
  });
  
  proxy('Alice'); // 输出：Calling function，Hello, Alice

construct(target, argumentsList, newTarget)：

• 作用：拦截对代理对象的构造函数调用。

• 参数：

  • target：目标对象。
  • argumentsList：构造函数调用时的参数列表。
  • newTarget：最初被调用的构造函数。

• 示例：

const target = function (name) {
  this.name = name;
};

const proxy = new Proxy(target, {
  construct(target, argumentsList) {
    console.log('Constructing object');
    return new target(...argumentsList);
  }
});

const obj = new proxy('Alice'); // 输出：Constructing object
console.log(obj.name); // 输出：Alice

getPrototypeOf(target)：

• 作用：拦截对代理对象原型链上属性访问操作。

• 参数：

  • target：目标对象。

• 示例：

const target = {};
const proxy = new Proxy(target, {
getPrototypeOf(target) {
console.log('Getting prototype');
return Object.getPrototypeOf(target);
}
});

console.log(Object.getPrototypeOf(proxy)); // 输出：Getting prototype，{}

setPrototypeOf(target, prototype)：

• 作用：拦截对代理对象原型链上属性设置操作。
• 参数：
  • target：目标对象。
  • prototype：要设置的原型对象。
• 示例：

const target = {}
const proxy = new Proxy(target, {
  setPrototypeOf(target, prototype) {
    console.log('Setting prototype')
    return Object.setPrototypeOf(target, prototype)
  }
})

const proto = { name: 'Alice' }
Object.setPrototypeOf(proxy, proto) // 输出：Setting prototype
console.log(proxy.name) // 输出：Alice

这些是Proxy的一些常用属性用法，通过定义这些属性，我们可以对代理对象的各种操作进行拦截和自定义处理。在实际应用中，我们可以根据需要选择合适的属性来实现特定的功能。

总结

Proxy是ES6中的一个重要特性，它提供了一种拦截和修改对象默认操作的能力。通过使用Proxy，我们可以实现访问控制、数据验证、属性劫持等功能。Proxy的原理是通过在代理对象上定义一组钩子函数来实现拦截和自定义处理。在实际应用中，我们可以根据需要使用Proxy来解决各种问题，提高代码的灵活性和可维护性。