Javascript의 Proxy와 Reflect에 대해 이야기해 봅시다.
- WBOY앞으로
- 2022-02-09 17:27:002577검색
이 기사는 JavaScript의 Proxy 및 Reflect에 대한 관련 지식을 제공하는 데 도움이 되기를 바랍니다.
ECMAScript는 ES6 사양에 두 가지 새로운 기능인 Proxy와 Reflect를 추가했습니다. 이 두 가지 새로운 기능은 JavaScript의 객체 액세스 제어성을 향상시켜 JS 모듈과 클래스의 캡슐화를 더욱 엄격하고 단순하게 만듭니다. 개체를 더 쉽게 제어할 수 있을 때 오류 보고.
Proxy
Proxy는 이름에서 알 수 있듯이 프록시입니다. 이 인터페이스는 지정된 객체에 대한 프록시 객체를 생성할 수 있습니다. 속성 액세스, 속성에 값 할당, 함수 호출과 같은 프록시 객체에 대한 모든 작업은 가로채어 처리하기 위해 정의한 함수로 전달됩니다.
JavaScript 개체의 특성은 개체에 조작할 수 있는 여지를 많이 제공합니다. 동시에 JavaScript는 개체를 마음대로 추가하고, 마음대로 삭제하고, 프로토타입을 변경할 수 있는 다양한 방법도 제공합니다. ... 그러나 이전에 Object 클래스에서 제공한 API에는 많은 단점이 있었습니다. ：
- Object.defineProperty를 사용하여 특정 이름 컬렉션의 모든 속성을 정의하려면 getter 및 열거를 통해 모든 속성에 대한 설정자가 있으며 각 속성에 대해 하나의 함수만 만들 수 있으므로 컬렉션이 너무 크면 성능 문제가 발생합니다.
- Object.defineProperty가 속성을 정의한 후에도 여전히 일반적인 액세스 기능을 원할 경우 개체의 다른 속성 이름에만 데이터를 저장할 수 있거나 데이터를 저장할 다른 개체가 필요할 수 있습니다. 특히 모니터 속성이 불편합니다.
- Object.defineProperty는 배열의 길이 속성과 같이 클래스에서 재정의할 수 없는 속성을 수정할 수 없습니다.
- 아직 존재하지 않고 이름을 예측할 수 없는 속성의 경우 Object.defineProperty가 도움이 될 수 없습니다.
- 속성 이름 열거 및 객체 프로토타입 수정과 같은 일부 동작은 수정하거나 방지할 수 없습니다.
프록시 인터페이스의 출현은 이러한 문제를 잘 해결합니다.
- 프록시 인터페이스는 객체에 대한 모든 작업을 여러 범주로 분류하고, 프록시가 제공하는 트랩을 통해 특정 작업을 가로채고, 정의한 처리에서 이를 처리합니다. 기능에 대한 논리적인 판단을 통해 복잡한 기능을 구현하고 이전보다 더 많은 동작을 제어할 수 있습니다.
- 프록시에 의해 생성된 프록시 개체는 중개인의 형태로 존재하며 데이터 저장을 담당하지 않습니다. 외부 사용자가 프록시 개체의 제어 하에 원본 개체에 액세스할 수 있도록 외부 사용자에게 프록시 개체만 제공하면 됩니다. .
프록시 인터페이스는 JS 환경의 생성자입니다.
ƒ Proxy ( target: Object, handlers: Object ) : Proxy
이 생성자에는 두 개의 매개변수가 있습니다. 첫 번째는 프록시하려는 개체이고 두 번째는 다양한 작업을 처리하는 함수가 포함된 개체입니다.
호출 예는 다음과 같습니다.
//需要代理的目标
var target = { msg: "I wish I was a bird!" };
//包含处理各种操作的函数的对象
var handler = {
//处理其中一种操作的函数，此处是访问属性的操作
get(target, property) {
//在控制台打印访问了哪个属性
console.log(`你访问了 ${property} 属性`);
//实现操作的功能
return target[property];
}
}
//构造代理对象
var proxy = new Proxy( target , handler);
//访问代理对象
proxy.msg
//控制台： 你访问了 msg 属性
//← I wish I was a bird!
위 예에서는 먼저 객체를 생성하여 대상에 할당한 다음 대상을 대상으로 프록시 객체를 생성하여 프록시에 할당합니다. 두 번째 매개변수로 프록시 생성자에 제공되는 객체에는 "get"이라는 속성이 있습니다. "get"은 프록시 인터페이스의 트랩 이름입니다. 두 번째 매개변수는 개체의 속성에 대해 트랩 이름과 동일한 속성 이름을 가진 속성을 찾아 자동으로 해당 트랩을 설정하고 해당 속성에 대한 함수를 트랩 처리 함수로 사용합니다. 트랩은 프록시 개체에 대한 특정 작업을 가로채서 작업의 세부 사항을 매개 변수로 변환하고 이를 처리 기능에 전달하여 처리 기능이 작업을 완료할 수 있도록 함으로써 처리 기능을 통해 개체의 다양한 동작을 제어할 수 있습니다.
위의 예에서 프록시 객체 생성 시 제공되는 get 함수는 객체의 속성에 액세스하는 작업을 처리하는 함수입니다. 프록시 객체는 객체의 속성에 액세스하는 작업을 가로채서 대상 객체 및 속성을 전달합니다. 접근 요청한 이름을 get 함수에 추가하고 함수의 반환 값을 접근 결과로 사용합니다.
Proxy에는 총 13가지 유형의 트랩이 있습니다.
| 트랩 이름 및 해당 함수 매개변수 | 가로채기된 작업 | 작업 예 |
|---|---|---|
get(target, property)get(target, property)
|
访问对象属性 |
target.property或 target[property]
|
set(target, property, value, receiver) |
赋值对象属性 |
target.property = value或 target[property] = value
|
has(target, property) |
判断对象属性是否存在 | property in target |
isExtensible(target) |
判断对象可否添加属性 | Object.isExtensible(target) |
preventExtensions(target) |
使对象无法添加新属性 | Object.preventExtensions(target) |
defineProperty(target, property, descriptor) |
定义对象的属性 | Object.defineProperty(target, property, descriptor) |
deleteProperty(target, property) |
删除对象的属性 |
delete target.property或 delete target[property]或 Object.deleteProperty(target, property)
|
getOwnPropertyDescriptor(target, property) |
获取对象自有属性的描述符 | Object.getOwnPropertyDescriptor(target, property) |
ownKeys(target) |
枚举对象全部自有属性 |
Object.getOwnPropertyNames(target).concat(Object.getOwnPropertySymbols(target))
|
getPrototypeOf(target) |
获取对象的原型 | Object.getPrototypeOf(target) |
setPrototypeOf(target) |
设置对象的原型 | Object.setPrototypeOf(target) |
apply(target, thisArg, argumentsList) |
函数调用 |
target(...arguments)或 target.apply(target, thisArg, argumentsList)
|
construct(target, argumentsList, newTarget) |
构造函数调用 | new target(...arguments) | 객체 속성 액세스
set(target, property, value, receive)🎜🎜객체 속성 할당🎜🎜 target.property = 값또는
target[property] = 값🎜🎜🎜🎜has(대상, 속성)🎜🎜판단 객체 속성이 존재합니다🎜🎜대상의 속성🎜🎜🎜🎜isExtensible(target)🎜🎜객체가 속성을 추가할 수 있는지 확인🎜🎜Object.isExtensible(target) 🎜🎜🎜🎜<code>preventExtensions(target)🎜🎜객체에 새 속성을 추가할 수 없도록 합니다🎜🎜Object.preventExtensions(target)🎜🎜🎜🎜 defineProperty(target, property, descriptor)🎜🎜객체의 속성 정의🎜🎜Object.defineProperty(target, property, descriptor)🎜🎜🎜🎜deleteProperty (대상, 속성) code>🎜🎜객체 속성 삭제🎜🎜target.property 삭제또는
대상[속성] 삭제또는 Object.deleteProperty( target, property)🎜🎜🎜🎜getOwnPropertyDescriptor(target, property)🎜🎜객체 자체 속성의 설명자 가져오기🎜🎜Object.getOwnPropertyDescriptor(target, property) code>🎜🎜🎜🎜ownKeys(target)🎜🎜객체의 모든 자체 속성을 열거합니다🎜🎜Object.getOwnPropertyNames(target ).concat (Object.getOwnPropertySymbols(target))🎜🎜🎜🎜getPrototypeOf(target)🎜🎜객체의 프로토타입 가져오기🎜 🎜Object.getPrototypeOf(target)🎜🎜 🎜🎜setPrototypeOf(target)🎜🎜객체의 프로토타입 설정🎜🎜Object.setPrototypeOf(target) code>🎜🎜🎜🎜<code>apply(target, thisArg, 인수 목록)🎜🎜함수 호출🎜🎜<code>target(...arguments)또는
target .apply(target, thisArg, 인수 목록)🎜🎜🎜🎜construct(target, 인수List, newTarget)🎜🎜생성자 호출🎜🎜새 대상(...arguments)🎜🎜🎜🎜<p>在上面列出的陷阱里是有拦截函数调用一类操作的，但是只限代理的对象是函数的情况下有效，Proxy 在真正调用我们提供的接管函数前是会进行类型检查的，所以通过代理让普通的对象拥有函数一样的功能这种事就不要想啦。<br> 某一些陷阱对处理函数的返回值有要求，如果不符合要求则会抛出 TypeError 错误。限于篇幅问题，本文不深入阐述，需要了解可自行查找资料。</p>
<p>除了直接 new Proxy 对象外，Proxy 构造函数上还有一个静态函数 revocable，可以构造一个能被销毁的代理对象。</p>
<pre class="brush:php;toolbar:false">Proxy.revocable( target: Object, handlers: Object ) : Object
Proxy.revocable( target, handlers ) → {
proxy: Proxy,
revoke: ƒ ()
}</pre>
<p>这个静态函数接收和构造函数一样的参数，不过它的返回值和构造函数稍有不同，会返回一个包含代理对象和销毁函数的对象，销毁函数不需要任何参数，我们可以随时调用销毁函数将代理对象和目标对象的代理关系断开。断开代理后，再对代理对象执行任何操作都会抛出 TypeError 错误。</p>
<pre class="brush:php;toolbar:false">//创建代理对象
var temp1 = Proxy.revocable({a:1}, {});
//← {proxy: Proxy, revoke: ƒ}
//访问代理对象
temp1.proxy.a
//← 1
//销毁代理对象
temp1.revoke();
//再次访问代理对象
temp1.proxy.a
//未捕获的错误： TypeError: Cannot perform 'get' on a proxy that has been revoked</pre>
<p>弄清楚了具体的原理后，下面举例一个应用场景。<br> 假设某个需要对外暴露的对象上有你不希望被别人访问的属性，就可以找代理对象作替身，在外部访问代理对象的属性时，针对不想被别人访问的属性返回空值或者报错：</p>
<pre class="brush:php;toolbar:false">//目标对象
var target = {
msg: "我是鲜嫩的美少女！",
secret: "其实我是800岁的老太婆！" //不想被别人访问的属性
};
//创建代理对象
var proxy = new Proxy( target , {
get(target, property) {
//如果访问 secret 就报错
if (property == "secret") throw new Error("不允许访问属性 secret！");
return target[property];
}
});
//访问 msg 属性
proxy.msg
//← 我是鲜嫩的美少女！
//访问 secret 属性
proxy.secret
//未捕获的错误： 不允许访问属性 secret！</pre>
<p>在上面的例子中，我针对对 secret 属性的访问进行了报错，守护住了“美少女”的秘密，让我们歌颂 Proxy 的伟大！<br> 只不过，Proxy 只是在程序逻辑上进行了接管，上帝视角的控制台依然能打印代理对象完整的内容，真是遗憾……（不不不，这挺好的！）</p>
<pre class="brush:php;toolbar:false">proxy//控制台： Proxy {msg: '我是鲜嫩的美少女！', secret: '其实我是800岁的老太婆！'}</pre>
<p>以下是关于 Proxy 的一些细节问题：</p>
<ul>
<li>
<mark>Proxy 在处理属性名的时候会把除 Symbol 类型外的所有属性名都转化成字符串</mark>，所以处理函数在判断属性名时需要尤其注意。</li>
<li>对代理对象的任何操作都会被拦截，一旦代理对象被创建就没有办法再修改它本身。</li>
<li>Proxy 的代理是非常底层的，在没有主动暴露原始目标对象的情况下，没有任何办法越过代理对象访问目标对象（在控制台搞骚操作除外）。</li>
<li>Proxy 代理的目标只能是对象，不能是 JavaScript 中的原始类型。</li>
</ul>
<h1>Reflect</h1>
<p>学过其他语言的人看到 Reflect 这个词可能会首先联想到“反射”这个概念，但 JavaScript 由于语言特性是不需要反射的，所以这里的 Reflect 其实和反射无关，是 JavaScript 给 Proxy 配套的一系列函数。<br> Reflect 在 JS 环境里是一个全局对象，包含了与 Proxy 各种陷阱配套的函数。</p>
<pre class="brush:php;toolbar:false">Reflect: Object
Reflect → {
apply: ƒ apply(),
construct: ƒ construct(),
defineProperty: ƒ defineProperty(),
deleteProperty: ƒ deleteProperty(),
get: ƒ (),
getOwnPropertyDescriptor: ƒ getOwnPropertyDescriptor(),
getPrototypeOf: ƒ getPrototypeOf(),
has: ƒ has(),
isExtensible: ƒ isExtensible(),
ownKeys: ƒ ownKeys(),
preventExtensions: ƒ preventExtensions(),
set: ƒ (),
setPrototypeOf: ƒ setPrototypeOf(),
Symbol(Symbol.toStringTag): "Reflect"
}</pre>
<p>可以看到，Reflect 上的所有函数都对应一个 Proxy 的陷阱。这些函数接受的参数，返回值的类型，都和 Proxy 上的别无二致，可以说 Reflect 就是 Proxy 拦截的那些操作的原本实现。</p>
<p>那 Reflect 存在的意义是什么呢？<br> 上文提到过，Proxy 上某一些陷阱对处理函数的返回值有要求。如果想让代理对象能正常工作，那就不得不按照 Proxy 的要求去写处理函数。或许会有人觉得只要用 Object 提供的方法不就好了，然而不能这么想当然，因为某些陷阱要求的返回值和 Object 提供的方法拿到的返回值是不同的，而且有些陷阱还会有逻辑上的要求，和 Object 提供的方法的细节也有所出入。举个简单的例子：Proxy 的 defineProperty 陷阱要求的返回值是布尔类型，成功就是 true，失败就是 false。而 Object.defineProperty 在成功的时候会返回定义的对象，失败则会报错。如此应该能够看出为陷阱编写实现的难点，如果要求简单那自然是轻松，但是要求一旦复杂起来那真是想想都头大，大多数时候我们其实只想过滤掉一部分操作而已。Reflect 就是专门为了解决这个问题而提供的，因为 Reflect 里的函数都和 Proxy 的陷阱配套，返回值的类型也和 Proxy 要求的相同，所以如果我们要实现原本的功能，直接调用 Reflect 里对应的函数就好了。</p>
<pre class="brush:php;toolbar:false">//需要代理的对象
var target = {
get me() {return "我是鲜嫩的美少女！"} //定义 me 属性的 getter
};
//创建代理对象
var proxy = new Proxy( target , {
//拦截定义属性的操作
defineProperty(target, property, descriptor) {
//如果定义的属性是 me 就返回 false 阻止
if (property == "me") return false;
//使用 Reflect 提供的函数实现原本的功能
return Reflect.defineProperty(target, property, descriptor);
}
});
//尝试重新定义 me 属性
Object.defineProperty(proxy , "me", {value: "我是800岁的老太婆！"})
//未捕获的错误： TypeError: 'defineProperty' on proxy: trap returned falsish for property 'me'
//尝试定义 age 属性
Object.defineProperty(proxy , "age", {value: 17})
//← Proxy {age: 17}
//使用 Reflect 提供的函数来定义属性
Reflect.defineProperty(proxy , "me", {value: "我是800岁的老太婆！"})
//← false
Reflect.defineProperty(proxy , "age", {value: 17})
//← true</pre>
<p>在上面的例子里，由于我很懒，所以我在接管定义属性功能的地方“偷工减料”用了 Reflect 提供的 defineProperty 函数。用 Object.defineProperty 在代理对象上定义 me 属性时报了错，表示失败，而定义 age 属性则成功完成了。可以看到，除了被报错的 me 属性，对其他属性的定义是可以成功完成的。我还使用 Reflect 提供的函数执行了同样的操作，可以看到 Reflect 也无法越过 Proxy 的代理，同时也显示出了 Reflect 和传统方法返回值的区别。</p>
<p>虽然 Reflect 的好处很多，但是它也有一个问题：JS 全局上的 Reflect 对象是可以被修改的，可以替换掉里面的方法，甚至还能把 Reflect 删掉。</p>
<pre class="brush:php;toolbar:false">//备份原本的 Reflect.get
var originGet = Reflect.get;
//修改 Reflect.get
Reflect.get = function get(target ,property) {
console.log("哈哈，你的 get 已经是我的形状了！");
return originGet(target ,property);
};
//调用 Reflect.get
Reflect.get({a:1}, "a")
//控制台： 哈哈，你的 get 已经是我的形状了！
//← 1
//删除 Reflect 变量
delete Reflect
//← true
//访问 Reflect 变量
Reflect
//未捕获的错误： ReferenceError: Reflect is not defined</pre>
<p>基于上面的演示，不难想到，可以通过修改 Reflect 以欺骗的方式越过 Proxy 的代理。所以如果你对安全性有要求，建议在使用 Reflect 时，第一时间将全局上的 Reflect 深度复制到你的闭包作用域并且只使用你的备份，或者将全局上的 Reflect 冻结并锁定引用。</p>
<p>相关推荐：<a href="https://www.php.cn/course/list/17.html" target="_blank">javascript学习教程</a><br></p>위 내용은 Javascript의 Proxy와 Reflect에 대해 이야기해 봅시다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
이 기사는 csdn.net에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제