使用 ES6 Proxy 代理的一些问题记录
栏目: JavaScript · 发布时间: 5年前
内容简介:简单来说 Proxy 是对可以进行的拦截类型不止如上这些都是介绍都是直接拷贝的
简单来说 Proxy 是对 对象
设置一个拦截,直接上代码
let obj = { attr: 1 }; // 对 obj 进行拦截 obj = new Proxy(obj, { get: function (target, key, receiver) { //如果 obj 有这个属性,则直接返回 if(key in target) { return target[key]; } //如果 obj 没有这个属性,则统一返回 '没有这个值' return '没有这个值'; }, set: function (target, key, value, receiver) { // 想设置对象属性,直接返回(不让设置) return true; } }); // 使用 console.log(obj.attr); // 输出 1 console.log(obj.abc); // 输出 '没有这个值', obj.attr = 2;// console.log(obj.attr); // 输出 1, 不能设置对象属性 复制代码
可以进行的拦截类型不止 get, set
,还有很多,例如:(来自 阮一峰老师的书 ES6 Proxy
):
- set(target, propKey, value, receiver):拦截对象属性的设置,比如proxy.foo = v或proxy['foo'] = v,返回一个布尔值。
- 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)。
如上这些都是介绍都是直接拷贝的 阮一峰老师的书 ES6 Proxy
遇到的问题
对原生的浏览器 HTMLElement 对象进行拦截
1、拦截时的 this
指向问题阮老师书里也有提及
在拦截方法里, this
指向 Proxy 对象,所以在调用原对象的方法时,需要注意,直接看代码
let div = document.querySelector('div'); // 随便拿一个页面的 div, 对他进行代理 // 第一种代理方法 let divProxy = new Proxy(div, { get: function (target, key, receiver) { // 访问这个 div 的任何属性,都直接返回 return target[key]; } }); // 调用 div 的 querySelector 方法,拿他下边的 a 标签 console.log(divProxy.querySelector('a')); // chrome 上会报错:Uncaught TypeError: Illegal invocation 复制代码
如上的代码,猜测因为 querySelector 方法内部有访问 this
指向,导致报错。修改为如下代码,则可以修复这个问题:
let div = document.querySelector('div'); // 随便拿一个页面的 div, 对他进行代理 // 第二种代理方法 let divProxy = new Proxy(div, { get: function (target, key, receiver) { if( !!target[key] && !!target[key].bind) { // 使用 bind 绑定 this 指向 return target[key].bind(target); } else { return target[key]; } } }); console.log(divProxy.querySelector('a')); // <a href='https://t.tt'>来买呀</a> 复制代码
另外还有一个问题,通过代理设置对象属性时,也会有问题相同的,看代码吧
let div = document.querySelector('div'); let divProxy = new Proxy(div, {}); // 设置 div 的 innerHTML 属性,设置对象属性默认其实是调用 `div.innerHTML.__defineSetter__` 方法 divProxy.innerHTML = '<a href="https://t.tt">来买呀</a>'; //chrome 报错: Uncaught TypeError: Illegal invocation 复制代码
直接上解决办法
let div = document.querySelector('div'); let divProxy = new Proxy(div, { // 拦截所有的 set 行为 set: function (target, key, value, receiver) { if(key in target) { target[key] = value; // 直接调用原对象属性进行设置(target[key]) } return true; } }); divProxy.innerHTML = '<a href="https://t.tt">来买呀</a>'; 复制代码
结尾
一般 Proxy
会和 Reflect
一起使用,本文不做介绍了,直接上阮老师的书;
JavaScript 的语法越来越规范,之前的一些坑,新的标准规范也开始慢慢填,加上 babel
的普及使用,我们可以多多拥抱新语法、特性,简洁代码,愉悦自己。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Algorithms to Live By
Brian Christian、Tom Griffiths / Henry Holt and Co. / 2016-4-19 / USD 30.00
A fascinating exploration of how insights from computer algorithms can be applied to our everyday lives, helping to solve common decision-making problems and illuminate the workings of the human mind ......一起来看看 《Algorithms to Live By》 这本书的介绍吧!