es6의 프록시 이해(예제 포함)-JS 튜토리얼-php.cn

es6의 프록시 이해(예제 포함)

不言

풀어 주다： 2019-01-26 09:20:58

앞으로

3325명이 탐색했습니다.

이 기사의 내용은 es6의 Proxy에 대한 이해에 관한 것입니다(예제 포함). 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

테스트 질문 분석: 프록시에 대한 이해는 vue의 양방향 바인딩으로 확장될 수 있습니다.

프록시(프록시) 정의

는 대상 개체에 대한 차단 계층을 설정하고 외부 액세스를 설정하는 것으로 이해할 수 있습니다. 객체는 이 차단 계층을 통과해야 합니다

간단한 예:

 const obj = new Proxy({}, {
     get: (target, key, receiver) => {
         return 'JS'
         console.log(`get ${key}`)
     },
     set: (target, key, value, receiver) => {
         console.log(`set ${key}`)
     },
 })
 
 obj.name = 'JS 每日一题' 
 // set name
 // JS 每日一题
 
 obj.name 
 // 这里进入get的回调函数，所有直接返回 JS

로그인 후 복사

위의 예에서 볼 수 있듯이 프록시에는 외부 읽기 및 쓰기 작업을 다시 쓸 수 있는 메커니즘이 있습니다.

프록시 인스턴스 방법

프록시 가져오기 외에도 다음과 같이 작업, 프록시를 설정하고 다른 작업도 프록시할 수 있습니다.

handler.getPrototypeOf()

// 在读取代理对象的原型时触发该操作，比如在执行 Object.getPrototypeOf(proxy) 时。

handler.setPrototypeOf()

// 在设置代理对象的原型时触发该操作，比如在执行 Object.setPrototypeOf(proxy, null) 时。

handler.isExtensible()

// 在判断一个代理对象是否是可扩展时触发该操作，比如在执行 Object.isExtensible(proxy) 时。

handler.preventExtensions()

// 在让一个代理对象不可扩展时触发该操作，比如在执行 Object.preventExtensions(proxy) 时。

handler.getOwnPropertyDescriptor()

// 在获取代理对象某个属性的属性描述时触发该操作，比如在执行 Object.getOwnPropertyDescriptor(proxy, "foo") 时。

handler.defineProperty()

// 在定义代理对象某个属性时的属性描述时触发该操作，比如在执行 Object.defineProperty(proxy, "foo", {}) 时。

handler.has()

// 在判断代理对象是否拥有某个属性时触发该操作，比如在执行 "foo" in proxy 时。

handler.get()

// 在读取代理对象的某个属性时触发该操作，比如在执行 proxy.foo 时。

handler.set()

// 在给代理对象的某个属性赋值时触发该操作，比如在执行 proxy.foo = 1 时。

handler.deleteProperty()

// 在删除代理对象的某个属性时触发该操作，比如在执行 delete proxy.foo 时。

handler.ownKeys()

// 在获取代理对象的所有属性键时触发该操作，比如在执行 Object.getOwnPropertyNames(proxy) 时。

handler.apply()

// 在调用一个目标对象为函数的代理对象时触发该操作，比如在执行 proxy() 时。

handler.construct()

// 在给一个目标对象为构造函数的代理对象构造实例时触发该操作，比如在执行new proxy() 时。

로그인 후 복사