刚刚接触vue3,对于现在的Proxy对象有点没理解,目前的请求会返回一个proxy对象值,他里面包含[[Handler]][[Target]][[IsRevoked]], 我想请问,这个值要怎么获取,为什么要返回这样的对象,而不是我们平常接触到正常的对象值?这样做的意义是?
刚刚接触vue3,对于现在的Proxy对象有点没理解,目前的请求会返回一个proxy对象值,他里面包含[[Handler]][[Target]][[IsRevoked]], 我想请问,这个值要怎么获取,为什么要返回这样的对象,而不是我们平常接触到正常的对象值?这样做的意义是?
Proxy 对象用于创建一个对象的代理,从而实现基本操作的拦截和自定义(如属性查找、赋值、枚举、函数调用等)。
handler
包含捕捉器(trap)的占位符对象,可译为处理器对象。
traps
提供属性访问的方法。这类似于操作系统中捕获器的概念。
target
被 Proxy 代理虚拟化的对象。它常被作为代理的存储后端。根据目标验证关于对象不可扩展性或不可配置属性的不变量(保持不变的语义)。
以上官方定义。
首先,Proxy这个单词翻译过来,就是 代理。
可以理解为,有一个很火的明星,开通了一个微博账号,这个账号非常活跃,回复粉丝、到处点赞之类的,但可能并不是真的由本人在维护的。
而是在背后有一个其他人 or 团队来运营,我们就可以称他们为代理人,因为他们发表的微博就代表了明星本人的意思。
P.S. 强行举例子,因为本人不追星,只是猜测可能会有这样的运营团队
这个代入到JavaScript当中来,就可以理解为对对象或者函数的代理操作。
JavaScript中的Proxy
Proxy是ES6中提供的新的API,可以用来定义对象各种基本操作的自定义行为
(在文档中被称为traps,我觉得可以理解为一个针对对象各种行为的钩子)
拿它可以做很多有意思的事情,在我们需要对一些对象的行为进行控制时将变得非常有效。
let obj = {
_age: 18,
get age () {
return `I'm ${this._age} years old`
},
set age (val) {
this._age = Number(val)
}
}
console.log(obj.age) // I'm 18 years old
obj.age = 19
console.log(obj.age) // I'm 19 years old
已参与 「极客观点」 ,欢迎正在阅读的你也加入。
首先搞清楚
[[]]
这个符号在JS里代表什么。在JS里,[[Target]]
这种两个括号包裹的属性,属于内部特性,这种些特性开发者无法直接访问。之所以你在F12里打印proxy
对象能够看到这些内部特性,我认为是为了让开发者明确知道这个对象是被代理过的,否则就无法区分普通对象和代理对象了。F12里打印的对象,都会有意的显示一些内部特性,比如
[[prototype]]
。但这些内部特性和对象上直接可以获取的属性是并不是同一个东西。也就是说你打印出来看到的这个对象,浏览器会显示地告诉你它是一个proxy包装过的对象,你该怎么正常操作对象还是怎么操作,并不是通过
proxy.Target
这样去获取。