快速掌握ES6的代理和反射(2)

2401_84150046

于 2024-05-09 17:08:52 发布

阅读量296

点赞数 4

分类专栏：程序员文章标签： es6 javascript 前端

本文链接：https://blog.csdn.net/2401_84150046/article/details/138621912

版权

程序员专栏收录该内容

196 篇文章 0 订阅

订阅专栏

捕获器可以理解为处理程序对象中定义的用来直接或间接在代理对象上使用的一种“拦截器”，每次在代理对象上调用这些基本操作时，代理可以在这些操作传播到目标对象之前先调用捕获器函数，从而拦截并修改相应的行为。

const target = {

foo: ‘bar’

};

const handler = {

// 捕获器在处理程序对象中以方法名为键

get() {

return ‘handler override’;

}

};

const proxy = new Proxy(target, handler);

console.log(target.foo); // bar

console.log(proxy.foo); // handler override

get() 捕获器会接收到目标对象，要查询的属性和代理对象三个参数。我们可以对上述代码进行如下改造

const target = {

foo: ‘bar’

};

const handler = {

// 捕获器在处理程序对象中以方法名为键

get(trapTarget, property, receiver) {

console.log(trapTarget === target);

console.log(property);

console.log(receiver === proxy);

return trapTarget[property]

}

};

const proxy = new Proxy(target, handler);

proxy.foo;

// true

// foo

// true

console.log(proxy.foo); // bar

console.log(target.foo); // bar

处理程序对象中所有可以捕获的方法都有对应的反射（Reflect）API 方法。这些方法与捕获器拦截的方法具有相同的名称和函数签名，而且也具有与被拦截方法相同的行为。因此，使用反射 API 也可以像下面这样定义出空代理对象：

const target = {

foo: ‘bar’

};

const handler = {

get() {

// 第一种写法

return Reflect.get(…arguments);

// 第二种写法

return Reflect.get

}

};

const proxy = new Proxy(target, handler);

console.log(proxy.foo); // bar

console.log(target.foo); // bar

我们也可以以此，来对将要访问的属性的返回值进行修饰。

const target = {

foo: ‘bar’,

baz: ‘qux’

};

const handler = {

get(trapTarget, property, receiver) {

let decoration = ‘’;

if (property === ‘foo’) {

decoration = ’ I love you’;

}

return Reflect.get(…arguments) + decoration;

}

};

const proxy = new Proxy(target, handler);

console.log(proxy.foo); // bar I love you

console.log(target.foo); // bar

console.log(proxy.baz); // qux

console.log(target.baz); // qux

可撤销代理

有时候可能需要中断代理对象与目标对象之间的联系。对于使用 new Proxy()创建的普通代理来说，这种联系会在代理对象的生命周期内一直持续存在。Proxy 也暴露了 revocable()方法，这个方法支持撤销代理对象与目标对象的关联。撤销代理的操作是不可逆的。而且，撤销函数（revoke()）是幂等的，调用多少次的结果都一样。撤销代理之后再调用代理会抛出 TypeError。

const target = {

foo: ‘bar’

};

const handler = {

get() {

return ‘intercepted’;

}

};

const { proxy, revoke } = Proxy.revocable(target, handler);

console.log(proxy.foo); // intercepted

console.log(target.foo); // bar

revoke();

console.log(proxy.foo); // TypeError

代理另一个代理

代理可以拦截反射 API 的操作，而这意味着完全可以创建一个代理，通过它去代理另一个代理。这样就可以在一个目标对象之上构建多层拦截网：

const target = {

foo: ‘bar’

};

const firstProxy = new Proxy(target, {

get() {

console.log(‘first proxy’);

return Reflect.get(…arguments);

}

});

const secondProxy = new Proxy(firstProxy, {

get() {

console.log(‘second proxy’);

return Reflect.get(…arguments);

}

});

console.log(secondProxy.foo);

// second proxy

// first proxy

// bar

代理的问题与不足

1. 代理中的this

const target = {

thisValEqualsProxy() {

return this === proxy;

}

const proxy = new Proxy(target, {});

console.log(target.thisValEqualsProxy()); // false

console.log(proxy.thisValEqualsProxy()); // true

这样看起来并没有什么问题，this指向调用者。但是如果目标对象依赖于对象标识，那就可能碰到意料之外的问题。

const wm = new WeakMap();

class User {

constructor(userId) {

wm.set(this, userId);

}

set id(userId) {

wm.set(this, userId);

}

get id() {

return wm.get(this);

}

const user = new User(123);

console.log(user.id); // 123

const userInstanceProxy = new Proxy(user, {});

console.log(userInstanceProxy.id); // undefined

这是因为 User 实例一开始使用目标对象作为 WeakMap 的键，代理对象却尝试从自身取得这个实

例。要解决这个问题，就需要重新配置代理，把代理 User 实例改为代理 User 类本身。之后再创建代

理的实例就会以代理实例作为 WeakMap 的键了：

const UserClassProxy = new Proxy(User, {});

const proxyUser = new UserClassProxy(456);

console.log(proxyUser.id);

2. 代理与内部槽位

在代理Date类型时：根据 ECMAScript 规范，Date 类型方法的执行依赖 this 值上的内部槽位[[NumberDate]]。代理对象上不存在这个内部槽位，而且这个内部槽位的值也不能通过普通的 get()和 set()操作访问到，于是代理拦截后本应转发给目标对象的方法会抛出 TypeError：

const target = new Date();

const proxy = new Proxy(target, {});

console.log(proxy instanceof Date); // true

proxy.getDate(); // TypeError: ‘this’ is not a Date object

Reflect(反射)

Reflect对象与Proxy对象一样，也是 ES6 为了操作对象而提供的新 API。Reflect的设计目的：

将Object对象的一些明显属于语言内部的方法（比如Object.defineProperty），放到Reflect对象上。
修改某些Object方法的返回结果，让其变得更合理。比如，Object.defineProperty(obj, name, desc)在无法定义属性时，会抛出一个错误，而Reflect.defineProperty(obj, name, desc)则会返回false。
让Object操作都变成函数行为。某些Object操作是命令式，比如name in obj和delete obj[name]，而Reflect.has(obj, name)和Reflect.deleteProperty(obj, name)让它们变成了函数行为。
Reflect对象的方法与Proxy对象的方法一一对应，只要是Proxy对象的方法，就能在Reflect对象上找到对应的方法。这就让Proxy对象可以方便地调用对应的Reflect方法，完成默认行为，作为修改行为的基础。也就是说，不管Proxy怎么修改默认行为，你总可以在Reflect上获取默认行为。

代理与反射API

get()

接收参数：

target：目标对象。
property：引用的目标对象上的字符串键属性。
receiver：代理对象或继承代理对象的对象。

返回值无限制

get()捕获器会在获取属性值的操作中被调用。对应的反射 API 方法为 Reflect.get()。

const myTarget = {};

const proxy = new Proxy(myTarget, {

get(target, property, receiver) {

console.log(‘get()’);

return Reflect.get(…arguments)

}

});

proxy.foo;

// get()

set()

接收参数：

target：目标对象。
property：引用的目标对象上的字符串键属性。
value：要赋给属性的值。
receiver：接收最初赋值的对象。

返回 true 表示成功；返回 false 表示失败，严格模式下会抛出 TypeError。

set()捕获器会在设置属性值的操作中被调用。对应的反射 API 方法为 Reflect.set()。

const myTarget = {};

const proxy = new Proxy(myTarget, {

set(target, property, value, receiver) {

console.log(‘set()’);

return Reflect.set(…arguments)

}

});

proxy.foo = ‘bar’;

// set()

has()

接收参数：

target：目标对象。
property：引用的目标对象上的字符串键属性。

has()必须返回布尔值，表示属性是否存在。返回非布尔值会被转型为布尔值。

has()捕获器会在 in 操作符中被调用。对应的反射 API 方法为 Reflect.has()。

const myTarget = {};

const proxy = new Proxy(myTarget, {

has(target, property) {

console.log(‘has()’);

return Reflect.has(…arguments)

}

});

‘foo’ in proxy;

// has()

defineProperty()

Reflect.defineProperty方法基本等同于Object.defineProperty，用来为对象定义属性。

接收参数：

target：目标对象。
property：引用的目标对象上的字符串键属性。
descriptor：包含可选的 enumerable、configurable、writable、value、get 和 set定义的对象。

defineProperty()必须返回布尔值，表示属性是否成功定义。返回非布尔值会被转型为布尔值。

const myTarget = {};

const proxy = new Proxy(myTarget, {

defineProperty(target, property, descriptor) {

console.log(‘defineProperty()’);

return Reflect.defineProperty(…arguments)

}

});

Object.defineProperty(proxy, ‘foo’, { value: ‘bar’ });

// defineProperty()

getOwnPropertyDescriptor()

Reflect.getOwnPropertyDescriptor基本等同于Object.getOwnPropertyDescriptor，用于得到指定属性的描述对象。

接收参数：

target：目标对象。
property：引用的目标对象上的字符串键属性。

getOwnPropertyDescriptor()必须返回对象，或者在属性不存在时返回 undefined。

const myTarget = {};

const proxy = new Proxy(myTarget, {

getOwnPropertyDescriptor(target, property) {

console.log(‘getOwnPropertyDescriptor()’);

return Reflect.getOwnPropertyDescriptor(…arguments)

}

});

Object.getOwnPropertyDescriptor(proxy, ‘foo’);

// getOwnPropertyDescriptor()

deleteProperty()

Reflect.deleteProperty方法等同于delete obj[name]，用于删除对象的属性。

接收参数：

target：目标对象。
property：引用的目标对象上的字符串键属性。

deleteProperty()必须返回布尔值，表示删除属性是否成功。返回非布尔值会被转型为布尔值。

ownKeys()

Reflect.ownKeys方法用于返回对象的所有属性，基本等同于Object.getOwnPropertyNames与Object.getOwnPropertySymbols之和。

接收参数：

target：目标对象。

ownKeys()必须返回包含字符串或符号的可枚举对象。

getPrototypeOf()

Reflect.getPrototypeOf方法用于读取对象的__proto__属性

接收参数：

target：目标对象。

getPrototypeOf()必须返回对象或 null。

等等。。

代理模式

跟踪属性访问

通过捕获 get、set 和 has 等操作，可以知道对象属性什么时候被访问、被查询。把实现相应捕获器的某个对象代理放到应用中，可以监控这个对象何时在何处被访问过：

const user = {

name: ‘Jake’

};

const proxy = new Proxy(user, {

get(target, property, receiver) {

console.log(Getting ${property});

return Reflect.get(…arguments);

set(target, property, value, receiver) {

console.log(Setting ${property}=${value});

return Reflect.set(…arguments);

}

});

proxy.name; // Getting name

proxy.age = 27; // Setting age=27

隐藏属性

代理的内部实现对外部代码是不可见的，因此要隐藏目标对象上的属性也轻而易举。

const hiddenProperties = [‘foo’, ‘bar’];

const targetObject = {

foo: 1,

bar: 2,

baz: 3

};

const proxy = new Proxy(targetObject, {

get(target, property) {

if (hiddenProperties.includes(property)) {

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

代理的内部实现对外部代码是不可见的，因此要隐藏目标对象上的属性也轻而易举。

const hiddenProperties = [‘foo’, ‘bar’];

const targetObject = {

foo: 1,

bar: 2,

baz: 3

};

const proxy = new Proxy(targetObject, {

get(target, property) {

if (hiddenProperties.includes(property)) {

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

[外链图片转存中…(img-oZDnOIpl-1715245720915)]

[外链图片转存中…(img-JBKzZYuK-1715245720916)]

[外链图片转存中…(img-i9eFK6jF-1715245720916)]

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

2401_84150046

关注

4
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
快速掌握ES6的代理和反射(2)

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
复制链接

扫一扫