ES6 프록시의 set, get, has, deleteProperty 트랩

에이전트 소개

  （proxy）      ，        javascript     。

에이전트가 해결할 문제를 이해하려면 다음 절차를 따르십시오.

let colors  =  ["red", "blue", "green"];
console.log(colors.length);// 3
console.log(colors[0]);// red
console.log(colors[1]);//blue

colors[3] = "black";
console.log(colors.length); //4

colors.length = 2;
console.log(colors.length);// 2

console.log(colors[2]);//  undefined
console.log(colors[1]);// blue

ES5 이전에 개발자는 수조를 모방할 수 있는 대상을 정의할 수 없었다. 이것들은 모두 js 엔진이 하고 있는 것이다.하지만 이제 ES6의 에이전트를 통해 충분히 할 수 있다는 것이 에이전트의 존재의 의미다.
간단한 프록시 만들기
Proxy 구조 함수에는

목표(target)

Handler)

처리 프로그램은 하나 이상의 함정 함수로 처리 프로그램을 사용하지 않으면 간단한 전송 에이전트에 해당한다
다음 코드에서 에이전트를 정의합니다

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"

상술한 코드는 함정 함수를 넣지 않고 간단한 프록시 전송일 뿐이다.
다음은 흔히 볼 수 있는 에이전트 함정 몇 개를 보겠습니다.
set 트랩 유효성 검사 속성
set 트랩에는

trapTarget 수신 속성(에이전트의 목표)의 대상

키가 쓸 속성 키

value 속성에 쓸 값

receiver 작업이 발생한 대상

코드의 예는 다음과 같습니다.

//       
let target = {
	name: "target"
};

//      ，   set  
let proxy = new Proxy(target, {
	//    set    
	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.anotherName = "proxy";

get 트랩 검증 대상 구조
js는 존재하지 않는 속성을 읽을 때 오류가 발생하지 않고 undefined로 되돌아오는 의문점이 있습니다.
현재 get 함정 함수를 통해 js 엔진의 행동을 고쳐 프로그램이 존재하지 않는 속성을 읽을 수 있도록 합니다.
get 트랩은 세 개의 매개 변수를 수락합니다:

trapTarget 수신 속성(에이전트의 목표)의 대상

key읽을 속성 키

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.nme);//    

여기에 target 대상이 없습니다.receiver 에이전트에has 함정이 함유되어 있는 것을 방지하기 위해서
has 함정을 사용하여 기존 속성 숨기기
has 트랩에는

trapTarget 수신 속성(에이전트의 목표)의 대상

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 트랩을 사용하여 속성 삭제 방지
delete 작업을 사용할 때마다 deleteProperty 트랩이 호출되므로

trapTarget 수신 속성(에이전트의 목표)의 대상

key읽을 속성 키

예제 코드는 다음과 같습니다.

let target = {
	name: "target";
	age: 42
}

let proxy = new Proxy(trapTarget, {
	deleteProperty(trapTarget, key){
		if(key === "value"){
			return false;
		}else{
			return Reflect.deleteProperty(trapTarget, key);
		}
	}
});

//    proxy.value
console.log("value" in proxy); //true;
let result1 = delete proxy.value;
console.log( result1);//false;

console.log("value" in proxy); //true;

//    proxy.name
console.log("name" in proxy); //true;
let result2 = delete proxy.name;
console.log( result2);//true;

console.log("name" in proxy); //false;