ES6之Proxy详解

? 专栏介绍

在现代Web开发中，JavaScript已经成为了不可或缺的一部分。它不仅可以为网页增加交互性和动态性，还可以在后端开发中使用Node.js构建高效的服务器端应用程序。作为一种灵活且易学的脚本语言，JavaScript具有广泛的应用场景，并且不断发展演进。在本专栏中，我们将深入学习JavaScript语言的基本语法、DOM操作、事件处理、异步编程以及常见算法和数据结构等内容。此外，我们还将介绍ES6及其后续版本中引入的新特性，如箭头函数、模块化、解构赋值等。通过学习这些内容，你将能够成为一名熟练的JavaScript开发者，并能够应用这些知识来构建出高质量和可维护的Web应用程序。让我们一起开始JavaScript之旅吧！

---

概念

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来解决各种问题，提高代码的灵活性和可维护性。

---

😶 写在结尾

前端设计模式专栏

设计模式是软件开发中不可或缺的一部分，它们帮助我们解决了许多常见问题，并提供了一种优雅而可靠的方式来构建应用程序。在本专栏中，我们介绍了所有的前端设计模式，包括观察者模式、单例模式、策略模式等等。通过学习这些设计模式，并将其应用于实际项目中，我们可以提高代码的可维护性、可扩展性和可重用性。希望这个专栏能够帮助你在前端开发中更好地应用设计模式，写出高质量的代码。点击订阅前端设计模式专栏

Vue专栏

Vue.js是一款流行的JavaScript框架，用于构建用户界面。它采用了MVVM（Model-View-ViewModel）的架构模式，通过数据驱动和组件化的方式，使开发者能够更轻松地构建交互性强、可复用的Web应用程序。在这个专栏中，我们将深入探讨Vue.js的核心概念、组件开发、状态管理、路由和性能优化等方面的知识。我们将学习如何使用Vue.js构建响应式的用户界面，并探索其强大的生态系统，如Vue Router和Vuex、Pinia。通过学习这些内容，你将能够成为一名熟练的Vue.js开发者，并能够应用这些知识来构建复杂而高效的Web应用程序。点击订阅Vue专栏

JavaScript（ES6）专栏

JavaScript是一种广泛应用于网页开发和后端开发的脚本语言。它具有动态性、灵活性和易学性的特点，是构建现代Web应用程序的重要工具之一。在这个专栏中，我们将深入探讨JavaScript语言的基本语法、DOM操作、事件处理、异步编程以及常见算法和数据结构等内容。此外，我们还将介绍ES6（ECMAScript 2015）及其后续版本中引入的新特性，如箭头函数、模块化、解构赋值等。通过学习这些内容，你将能够成为一名熟练的JavaScript开发者，并能够应用这些知识来构建出高质量和可维护的Web应用程序。点击订阅JavaScript（ES6）专栏