ES6의 프록시에 대한 심층 분석-JS 튜토리얼-php.cn

ES6의 프록시에 대한 심층 분석

간단한 프록시 만들기

let target = {} let proxy = new Proxy(target, {}) proxy.name = 'proxy' console.log(proxy.name) // proxy console.log(target.name) // proxy target.name = 'target' console.log(proxy.name) // target console.log(target.name) // target

로그인 후 복사

이 예에서는 "proxy"를 Proxy.name 속성에 할당할 때 대상에 이름을 생성하고, 이 속성은 저장하지 않습니다. Proxy.name 및 target.name에 해당하는 것은 target.name의 값을 참조합니다.

set 트랩을 사용하여 속성 확인

set 트랩은 4개의 매개변수를 받습니다.

1.trapTarget: 속성을 받는 데 사용되는 개체(에이전트의 대상)

2.key: 작성할 속성 키 (문자열 또는 기호) )

3.value: 작성되는 속성 값

4.receiver: 작업이 발생하는 개체(일반적으로 프록시)

let target = { name: "target" } let proxy = new Proxy(target, { set(trapTarget, key, value, receiver) { if (!trapTarget.hasOwnProperty(key)) { if (isNaN(value)) { throw new TypeError("属性必须时数字") } } return Reflect.set(trapTarget, key, value, receiver) } }) proxy.count = 1 console.log(proxy.count) //1 console.log(target.count) //1 proxy.name = "proxy" console.log(proxy.name) //proxy console.log(target.name) //proxy proxy.other = "other" // 这里会报错因为不数字

로그인 후 복사

이 인스턴스는 값이 바뀔 때마다 설정 함수를 트리거합니다. 프록시가 외부에서 변경되었습니다.

get 트랩을 사용하여 개체 구조 확인

get은 3개의 매개변수를 받습니다.

1.trapTarget: 속성을 받는 데 사용되는 개체(에이전트의 대상)

2.key: 작성할 속성 키(문자열 또는 기호)

3.receiver: 작업이 발생하는 개체(일반적으로 프록시)

let proxy = new Proxy({}, { get(trapTarget, key, receiver) { if (!(key in receiver)) { throw new TypeError("属性" + key + "不存在") } return Reflect.get(trapTarget, key, receiver) } }) proxy.name = "proxy" console.log(proxy.name) //proxy console.log(proxy.age) // 属性不存在会抛出错误

로그인 후 복사

프록시가 생성한 개체 속성에 액세스하면 get 메서드가 트리거됩니다.

사용에는 트랩이 있으므로 이미 속성이 있습니다.

has가 수신합니다. 2개의 매개변수:

1.trapTarget: 속성을 받는 데 사용되는 개체(에이전트의 대상)

2.key: 작성할 속성 키(문자열 또는 기호)

let target = { name: "target", value: 42 } let proxy = new Proxy(target, { has(trapTarget, key) { if (key === 'value') { return false } else { return Reflect.has(trapTarget, key) } } }) console.log("value" in proxy) // false console.log("name" in proxy) // true console.log("toString" in proxy) // true

로그인 후 복사

deleteProperty 트랩을 사용하여 속성 삭제 방지

deleteProperty는 2개의 매개변수를 받습니다.

1.trapTarget: 속성을 받는 데 사용되는 개체(프록시 대상)

2.key: 작성할 속성 키(문자열 또는 기호)

let target = { name: "target", value: 42 } let proxy = new Proxy(traget, { deleteProperty(trapTarget, key) { if (key === "value") { return false } else { return Reflect.deleteProperty(trapTarget, key) } } }) console.log("value" in proxy) // true let result1 = delete proxy.value console.log(result1) // false console.log("value" in proxy) // true console.log("name" in proxy) // true let result2 = delete proxy.name console.log(result2) // true console.log("name" in proxy) // false

로그인 후 복사

deleteProperty는 프록시 속성이 실행될 때 트리거됩니다. 함수

Prototype 프록시 트랩(setProptotypeOf, getPrototypeOf)

setProptotypeOf는 2개의 매개변수를 받습니다.

1.trapTarget: 속성을 받는 데 사용되는 개체(프록시 대상)

2.proto: 프로토타입으로 사용되는 개체

let target = {} let proxy = new Proxy(target, { // 访问时调用 getPrototypeOf(trapTarget) { return null }, // 改变时调用 setPrototypeOf(trapTarget, proto) { return false } }) let targetProto = Object.getPrototypeOf(target) let proxyProto = Object.getPrototypeOf(proxy) console.log(targetProto === Object.prototype) //true console.log(proxyProto === Object.prototype) // false console.log(proxyProto) // null Object.setPrototypeOf(target, {}) // 成功 Object.setPrototypeOf(proxy, {}) // 抛出错误

로그인 후 복사

일반 구현인 경우

let target = {} let proxy = new Proxy(target, { // 访问时调用 getPrototypeOf(trapTarget) { return Reflect.getPrototypeOf(trapTarget) }, // 改变时调用 setPrototypeOf(trapTarget, proto) { return Reflect.setPrototypeOf(trapTarget, proto) } }) let targetProto = Object.getPrototypeOf(target) let proxyProto = Object.getPrototypeOf(proxy) console.log(targetProto === Object.prototype) //true console.log(proxyProto === Object.prototype) // true Object.setPrototypeOf(target, {}) // 成功 Object.setPrototypeOf(proxy, {}) // 成功

로그인 후 복사

속성 설명자 트랩

defineProperty는 세 가지 매개변수를 받습니다.

1.trapTarget: 속성을 받는 데 사용되는 개체(에이전트의 대상)

2.key: 작성할 속성 키( 문자열 또는 기호)

3.descriptor: 속성

let proxy = new Proxy({}, { defineProperty(trapTarget, key, descriptor) { // descriptor 只能接收enumerable, configurable, value, writeable, get, set if (typeof key === "symbol") { return false } return Reflect.defineProperty(trapTarget, key, descriptor) }, getOwnPropertyDescriptor(trapTarget, key) { return Reflect.getOwnPropertyDescriptor(trapTarget, key) } }) Object.defineProperty(proxy, "name", { value: "proxy" }) console.log(proxy.name) //proxy let nameSymbol = Symbol("name") Object.defineProperty(proxy, nameSymbol, { value: "proxy" })

로그인 후 복사

의 설명 개체는 DefineProperty | getOwnPropertyDescriptor가 외부에서 호출될 때 트리거됩니다.

ownKeys 트랩

ownKeys 트랩은 네 가지 외부 메소드인 Object.keys(), Object.getOwnPropertyName(), Object.getOwnPropertySymbols() 및 Object.sign()

let proxy = new Proxy({}, { ownKeys(trapTarget) { return Reflect.ownKeys(trapTarget).filter(key => { return typeof key !== "string" || key[0] !== '_' }) } }) let nameSymbol = Symbol("name") proxy.name = "proxy" proxy._name = "private" proxy[nameSymbol] = "symbol" let names = Object.getOwnPropertyNames(proxy), keys = Object.keys(proxy), symbols = Object.getOwnPropertySymbols(proxy) console.log(names.length) // 1 console.log(names) // name console.log(keys.length) //1 console.log(keys[0]) // name console.log(symbols.length) //1 console.log(symbols[0]) // symbol(name)

로그인 후 복사

을 가로챕니다. 더 많은 프로그래밍 관련 지식을 보려면 다음 사이트를 방문하세요.프로그래밍 입문! !

위 내용은 ES6의 프록시에 대한 심층 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!