특정 객체를 감싸서 객체에 가해지는 작업을 중간에서 가로채는 객체.
let proxy = new Proxy(target, handler)
target - 감싸는 객체. 함수도 가능
handler - 동작을 가로채는 메서드인 trap이 담긴 객체. 프락시 설정하는 곳. trap이 없으면 target이 작업을 직접 실행함.
let dictionary = {
'Hello': '안녕하세요',
'Bye': '안녕히 가세요'
};
dictionary = new Proxy(dictionary, {
get(target, phrase) { // 프로퍼티를 읽기를 가로챕니다.
if (phrase in target) { // 조건: 사전에 구절이 있는 경우
return target[phrase]; // 번역문을 반환합니다
} else {
// 구절이 없는 경우엔 구절 그대로를 반환합니다.
return phrase;
}
}
});
// 사전을 검색해봅시다!
// 사전에 없는 구절을 입력하면 입력값이 그대로 반환됩니다.
alert( dictionary['Hello'] ); // 안녕하세요
alert( dictionary['Welcome to Proxy']); // Welcome to Proxy (입력값이 그대로 출력됨)
proxy로 감싼 이후에 원래 target 객체를 참조하는 코드가 없어야합니다!
리플렉트는 프록시 생성을 간단화한 내장객체입니다.
프록시 trap과 동일하게 사용할 수 있고, 이점이 몇 개 더 있지만... 사용하게 될 때 더 파보겠습니다...
let user = {
name: "John",
};
user = new Proxy(user, {
get(target, prop, receiver) {
alert(`GET ${prop}`);
return Reflect.get(target, prop, receiver); // (1)
},
set(target, prop, val, receiver) {
alert(`SET ${prop}=${val}`);
return Reflect.set(target, prop, val, receiver); // (2)
}
});
let name = user.name; // shows "GET name"
user.name = "Pete"; // shows "SET name=Pete"