学习理解ES6重要知识点-Proxy构造函数的方法(二)

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

前言

上一篇我们对 Proxy 进行了初步的探究, 本文继续来学习 ES6 这个重要的知识点: Proxy. Vue3也使用这个Proxy对数据响应式进行了重写!

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

ES6 - Proxy 对象

来回归下上文的一个代码示例: 使用 ES6 原生 Proxy构造函数创建的一个实例, 当对对象obj 获取或修改数据时 会有打印输出:

// Proxy 构造函数 创建一个实例:
let proxy = new Proxy(target, handler)

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

访问 或 修改 obj:

obj.count = 12345 // console => setting count

++obj.count // console =>  getting count  && setting count

也就是通过 Proxy 对空对象进行拦截, 对其属性的读取（get）和设置（set）行为进行自定义: 对设置了拦截行为的对象obj, 去读写它的属性, 就会被拦截的逻辑捕捉到

Proxy 支持的拦截:

上述代码仅仅展示了其中的两种拦截操作, 用的也比较多: get 和 set, 当然还有很多支持的拦截: 即Proxy实例的方法有13种之多

1. get(target, propKey, receiver)：拦截对象属性的读取, 比如: proxy.foo和proxy['foo']。
2. set(target, propKey, value, receiver)：拦截对象属性的设置, 比如: proxy.foo = v或proxy['foo'] = v, 返回一个布尔值。
3. has(target, propKey)：拦截propKey in proxy的操作, 返回一个布尔值。
4. deleteProperty(target, propKey)：拦截delete proxy[propKey]的操作, 返回一个布尔值。
5. ownKeys(target)：拦截 Object.getOwnPropertyNames(proxy)、Object.getOwnPropertySymbols(proxy)、Object.keys(proxy)、for...in循环, 返回一个数组。该方法返回目标对象所有自身的属性的属性名, 而 Object.keys() 的返回结果仅包括目标对象自身的可遍历属性。
6. getOwnPropertyDescriptor(target, propKey)：拦截 Object.getOwnPropertyDescriptor(proxy, propKey), 返回属性的描述对象。
7. defineProperty(target, propKey, propDesc)：拦截 Object.defineProperty(proxy, propKey, propDesc）、Object.defineProperties(proxy, propDescs), 返回一个布尔值。
8. preventExtensions(target)：拦截 Object.preventExtensions(proxy), 返回一个布尔值。
9. getPrototypeOf(target)：拦截 Object.getPrototypeOf(proxy), 返回一个对象。
10. isExtensible(target)：拦截 Object.isExtensible(proxy), 返回一个布尔值。
11. setPrototypeOf(target, proto)：拦截 Object.setPrototypeOf(proxy, proto), 返回一个布尔值。如果目标对象是函数, 那么还有两种额外操作可以拦截。
12. apply(target, object, args)：拦截 Proxy 实例作为函数调用的操作, 比如: proxy(...args)、proxy.call(object, ...args)、proxy.apply(...)。
13. construct(target, args)：拦截 Proxy 实例作为构造函数调用的操作, 比如: new proxy(...args)。

相关阅读文章列表

• 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()排序的稳定性
6. ES6学习理解-Proxy(一)

学习参考文档

• MDN | ES6-Proxy