学习理解ES6重要知识点-Proxy(一)

这是我参与11月更文挑战的第24天，活动详情查看：2021最后一次更文挑战

前言

本文来学习 ES6 一个重要的知识点: Proxy. Vue3也使用这个 Proxy 对数据响应式进行重写了!

熟练使用 ES6 及更高版本对于我们在项目开发中可提高开发效率! 前面文章学习了 JavaScript 中操作数组的一些方法(Array.splice()/slice()/map()/reduce()等高阶函数), JavaScript 并不完美但是不影响其运行, 这里学习其中的一些神奇"bug"直达列表

ES6 - Proxy 概念

MDN | Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。

Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”（meta programming），即对编程语言进行编程。

这个Proxy 单词的原意就是代理, 在这里可以理解为由它来“代理”对数据的某些操作，可以译为“代理器”:

Proxy 使用语法:

const p = new Proxy(target, handler)

参数::

target: 要使用 Proxy 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。

handler: 一个通常以函数作为属性的对象，各属性中的函数分别定义了在执行各种操作时代理 p 的行为。

Proxy 的 get 和 set

我们应该对其 get 和 set 方法 特别熟悉, 因为用到的比较多一些: 就是我们可以自定义这个get 和set, 用于拦截 数据获取或修改数据的操作逻辑:

如下代码对一个对象使用 proxy 进行代理, 并设置其 get 和 set 方法, 当获取使用数据时会进入到 get 的逻辑, 当修改 obj 的属性时会进入 set 的逻辑:

let 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);
  }
});

相关阅读文章列表

• JavaScript 学习-函数剩余参数
• JS 小问题学习-函数可选参数
• JS 学习-for 循环
• JS 不完美亦可运行-自动加分号(;)问题、
• JS 不完美亦可运行-数组对象相加问题、
• JS 并不完美之箭头函数相关(二)、
• JS 并不完美~(一)浮点数
• JavaScript 高阶函数(一)
• JavaScript 高阶函数之 reduce
• 数组扁平化 Array.prototype.flat()
• 灵活操作数组数据 slice()
• 灵活操作数组-数组中间插入数据 splice()

学习 ES6系列:

1. ES6-解构赋值
2. ES6-数组扩展方法-find()/findIndex()
3. ES6-数组扩展方法-Array.from()处理数组
4. ES6 学习理解-Array 扩展方法 includes()
5. ES6学习理解-Array扩展sort()排序的稳定性

学习参考文档

• MDN | ES6-Proxy