아마도 JavaScript에서 가장 과소평가되고 덜 사용되는 두 가지 기능인 프록시와 리플렉트에 대해 이야기해 보겠습니다. 알겠습니다. 들어보셨을 수도 있고, 한두 번 정도 Google에서 검색해 보셨을 수도 있지만 좀 더 특별해 보이시죠?
그러나 중요한 점은 이러한 도구를 사용하면 개체에 대한 완전히 새로운 수준의 제어가 가능하며 생각만큼 사용하기 어렵지 않다는 것입니다. 이 게시물을 마치면 이 기능이 어떻게 작동하는지, 왜 멋진지, 실용적인 실제 시나리오를 위해 도구 상자에 추가하는 방법을 정확히 알게 될 것입니다.
들어가자!
JavaScript의 프록시는 최고의 중개인과 같습니다. 이를 통해 객체와 상호 작용하는 방식을 가로채고 사용자 정의할 수 있습니다. 누군가가 속성에 액세스, 수정 또는 삭제하려고 할 때 발생하는 상황을 제어할 수 있습니다. 그리고 가장 좋은 점은? 사용하기 매우 쉽습니다.
이렇게 생각해 보세요. 사용자 프로필과 같은 개체가 있고 해당 개체를 조작하는 사람이 나이를 '횡설수설'로 설정하는 등 이상한 행위를 하지 않도록 하고 싶습니다. 프록시를 사용하면 직접 제어할 수 있습니다.
기본 구문은 다음과 같습니다.
let proxy = new Proxy(target, handler);
공동 편집 앱을 구축 중이고 누군가 문서를 업데이트할 때마다 알고 싶다고 가정해 보겠습니다. 프록시를 사용하면 충분히 쉽습니다:
const documentModel = { title: "Draft", content: "Hello World" };
const handler = {
set(target, prop, value) {
console.log(`Property ${prop} is changing from ${target[prop]} to ${value}`);
target[prop] = value;
return true;
}
};
const documentProxy = new Proxy(documentModel, handler);
documentProxy.title = "Final Draft"; // Logs: Property title is changing from Draft to Final Draft
문서가 변경될 때마다 무슨 일이 일어났는지 정확하게 보여주는 작은 로그가 제공됩니다. 놀랄 일은 없습니다.
그렇다면 실제로 프록시를 언제 사용해야 할까요? 좋은 질문입니다. 실제로 빛을 발하는 몇 가지 시나리오는 다음과 같습니다.
프록시를 사용하여 데이터 유효성 검사 규칙을 시행할 수 있습니다. 더 이상 유효하지 않은 데이터가 앱에 몰래 들어가 나중에 골칫거리를 야기하는 일이 없습니다.
const person = { name: "", age: 0 };
const handler = {
set(target, prop, value) {
if (prop === "age" && typeof value !== "number") {
throw new TypeError("Age must be a number");
}
target[prop] = value;
return true;
}
};
const personProxy = new Proxy(person, handler);
personProxy.age = 30; // All good
personProxy.age = "thirty"; // Throws an error
이제 확장할 수 있는 멋진 검증 기능을 갖게 되었으며, 수많은 상용구 코드를 작성할 필요가 없습니다. 좋아요!
Vue로 작업해 본 적이 있다면 이미 프록시가 작동하는 모습을 보셨을 것입니다. Vue는 프록시를 사용하여 데이터를 반응형으로 만들고 데이터가 변경되면 자동으로 UI를 업데이트합니다.
프록시를 사용하면 객체의 변화를 관찰하고 실시간으로 반응할 수 있으므로 자체 반응 시스템이나 대시보드를 구축하는 데 적합합니다.
프록시를 사용하면 실제로 필요할 때까지 값비싼 개체 생성을 연기할 수 있습니다. 이를 지연 초기화라고 합니다. 모든 데이터를 미리 로드하는 대신 필요할 때 필요한 것만 가져옵니다.
Reflect API는 Proxy의 절친한 친구와 같습니다. Proxy를 사용하면 작업을 가로챌 수 있지만 Reflect는 보다 표준화된 방식으로 해당 작업을 수행할 수 있는 도구를 제공합니다. 이를 통해 객체 작업(속성 설정 또는 가져오기 등)을 보다 명확하고 예측 가능하게 처리할 수 있습니다.
Reflect를 사용하여 기본 개체 동작을 작업하는 방법은 다음과 같습니다.
const user = { name: "Alice", age: 25 };
console.log(Reflect.get(user, "name")); // Alice
Reflect.set(user, "age", 30); // Sets age to 30
왜 Reflect를 사용해야 할까요? 코드를 더 읽기 쉽고 일관성 있게 만듭니다. 사용자 정의 작업을 수행하고 싶지 않을 때 프록시와 함께 사용하면 기본 동작을 처리할 수 있습니다.
Proxy와 Reflect를 함께 사용해보자. 로깅을 추가하고 싶지만 여전히 개체 작업을 정상적으로 처리하고 싶다면 Reflect가 여러분의 친구입니다. 다음은 속성이 액세스되거나 변경될 때 기록하지만 실제 작업은 Reflect에 위임하는 예입니다.
const product = { name: "Laptop", price: 1000 };
const handler = {
set(target, prop, value) {
console.log(`Setting ${prop} to ${value}`);
return Reflect.set(target, prop, value);
},
get(target, prop) {
console.log(`Getting ${prop}`);
return Reflect.get(target, prop);
}
};
const productProxy = new Proxy(product, handler);
productProxy.price = 1200; // Logs: Setting price to 1200
console.log(productProxy.price); // Logs: Getting price, Output: 1200
가장 좋은 점은 무엇인가요? 동작(로깅)을 사용자 정의할 수 있지만 Reflect는 속성을 설정하고 가져오는 실제 논리를 처리합니다. 이렇게 하면 작업이 단순하고 예측 가능해집니다.
이러한 도구가 뛰어난 이유는 다음과 같습니다.
그리고 거기에 있습니다! 프록시와 리플렉트는 처음에는 약간 위협적으로 보일 수 있지만 일단 익숙해지면 코드를 극적으로 향상시킬 수 있습니다. 데이터 유효성을 검사하든, 개체 변경 사항을 추적하든, 개체 동작 방식을 더 효과적으로 제어하려는 경우 이러한 도구를 사용하면 작업이 더 쉬워집니다.
자, 한번 시도해 보세요! 다음 프로젝트에서는 Proxy와 Reflect를 사용하게 될 수도 있습니다.
위 내용은 JavaScript 프록시 및 Reflect API 마스터하기(두통 없이)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
