ES6之Proxy详解

俊刚、2024-01-06 8:30

✨ 专栏介绍

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

文章目录

    • [✨ 专栏介绍](#✨ 专栏介绍)
    • 概念
    • Proxy属性操作介绍
    • 一些常用的Proxy属性用法示例
      • [get(target, prop, receiver)](#get(target, prop, receiver))
      • [set(target, prop, value, receiver)](#set(target, prop, value, receiver))
      • [has(target, prop)](#has(target, prop))
      • [deleteProperty(target, prop)](#deleteProperty(target, prop))
      • [apply(target, thisArg, argumentsList)](#apply(target, thisArg, argumentsList))
      • [construct(target, argumentsList, newTarget)](#construct(target, argumentsList, newTarget))
      • getPrototypeOf(target)
      • [setPrototypeOf(target, prototype)](#setPrototypeOf(target, prototype))
    • 总结
    • [😶 写在结尾](#😶 写在结尾)

概念

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：代理对象本身（或者说是拦截操作所在的环境）。

  • 示例：

    javascript 复制代码 
    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：代理对象本身（或者说是拦截操作所在的环境）。

  • 示例：

    javascript 复制代码 
    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：要判断的属性名。

  • 示例：

    javascript 复制代码 
    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：要删除的属性名。

  • 示例：

    javascript 复制代码 
    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：函数调用时的参数列表。

  • 示例：

    javascript 复制代码 
    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：最初被调用的构造函数。

  • 示例：

javascript 复制代码 
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：目标对象。

  • 示例：

javascript 复制代码 
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：要设置的原型对象。
  • 示例：
javascript 复制代码 
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）专栏

相关推荐
m0_748255262 分钟前
easyExcel导出大数据量EXCEL文件，前端实现进度条或者遮罩层
前端·excel
web1478621072335 分钟前
C# .Net Web 路由相关配置
前端·c#·.net
m0_7482478036 分钟前
Flutter Intl包使用指南：实现国际化和本地化
前端·javascript·flutter
飞的肖40 分钟前
前端使用 Element Plus架构vue3.0实现图片拖拉拽，后等比压缩，上传到Spring Boot后端
前端·spring boot·架构
青灯文案11 小时前
前端 HTTP 请求由 Nginx 反向代理和 API 网关到后端服务的流程
前端·nginx·http
m0_748254881 小时前
DataX3.0+DataX-Web部署分布式可视化ETL系统
前端·分布式·etl
ZJ_.1 小时前
WPSJS：让 WPS 办公与 JavaScript 完美联动
开发语言·前端·javascript·vscode·ecmascript·wps
GIS开发特训营1 小时前
Vue零基础教程|从前端框架到GIS开发系列课程（七）响应式系统介绍
前端·vue.js·前端框架·gis开发·webgis·三维gis
Cachel wood2 小时前
python round四舍五入和decimal库精确四舍五入
java·linux·前端·数据库·vue.js·python·前端框架
学代码的小前端2 小时前
0基础学前端-----CSS DAY9
前端·css
热门推荐
01〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇02ARM学习（31）编译器对overlay方式的支持03玄机平台应急响应—webshell查杀04DisplayPort AltMode On Type-c协议_Ver2.0(学习笔记)05校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站06Docker 夺命连环 15 问076个主流的工业3D管道设计软件08基于大语言模型（LLM）的合成数据生成、策展和评估的综述09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10红米手机使用google play