Maîtriser le proxy JavaScript et l'API Reflect (sans prise de tête)

목차

1. 소개
2. JavaScript 프록시와의 거래는 무엇입니까?
   • 실제 예: 객체 변경 추적(간단한 방법)
3. 프록시를 사용하고 싶을 때
   • 올바른 데이터 검증
   • 반응형 객체 구축(예, Vue에서 수행합니다)
   • 게으른 객체: 필요한 것만 생성하세요
4. 그렇습니다. 하지만 Reflect는 어떻습니까
5. Proxy와 Reflect가 완벽한 듀오인 이유
   • 실제 예: 스타일을 사용한 로깅
6. Proxy & Reflect를 좋아하는 이유
7. 마무리

소개 ?

아마도 JavaScript에서 가장 과소평가되고 덜 사용되는 두 가지 기능인 프록시와 리플렉트에 대해 이야기해 보겠습니다. 알겠습니다. 들어보셨을 수도 있고, 한두 번 정도 Google에서 검색해 보셨을 수도 있지만 좀 더 특별해 보이시죠?

그러나 중요한 점은 이러한 도구를 사용하면 개체에 대한 완전히 새로운 수준의 제어가 가능하며 생각만큼 사용하기 어렵지 않다는 것입니다. 이 게시물을 마치면 이 기능이 어떻게 작동하는지, 왜 멋진지, 실용적인 실제 시나리오를 위해 도구 상자에 추가하는 방법을 정확히 알게 될 것입니다.

들어가자!

JavaScript 프록시와의 거래는 무엇입니까?

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로 작업해 본 적이 있다면 이미 프록시가 작동하는 모습을 보셨을 것입니다. Vue는 프록시를 사용하여 데이터를 반응형으로 만들고 데이터가 변경되면 자동으로 UI를 업데이트합니다.

프록시를 사용하면 객체의 변화를 관찰하고 실시간으로 반응할 수 있으므로 자체 반응 시스템이나 대시보드를 구축하는 데 적합합니다.

게으른 개체: 필요한 것만 생성

프록시를 사용하면 실제로 필요할 때까지 값비싼 개체 생성을 연기할 수 있습니다. 이를 지연 초기화라고 합니다. 모든 데이터를 미리 로드하는 대신 필요할 때 필요한 것만 가져옵니다.

좋아요, 하지만 Reflect는 어떻습니까?

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가 완벽한 듀오인 이유

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는 속성을 설정하고 가져오는 실제 논리를 처리합니다. 이렇게 하면 작업이 단순하고 예측 가능해집니다.

Pourquoi vous allez adorer Proxy et réfléchir

Voici pourquoi ces outils sont géniaux :

• Flexibilité : vous pouvez contrôler le comportement des objets, que vous ajoutiez une validation, une journalisation ou un chargement différé.
• Abstractions puissantes : avec les proxys, vous pouvez masquer une logique complexe et lui donner l'impression d'être magique. Combinez cela avec Reflect et vous obtenez le contrôle et la sécurité.
• Code plus propre : au lieu de pirater des cas extrêmes ou d'écrire des tonnes de conditions, les proxys vous permettent d'intercepter le comportement de manière propre et réutilisable.
• Meilleure DX (Developer Experience) : moins de passe-partout, moins de surprises, plus de contrôle. Qu'est-ce qu'il ne faut pas aimer ?

Envelopper le tout

Et voilà ! Les proxys et Reflect peuvent sembler un peu intimidants au début, mais une fois que vous les maîtrisez, ils peuvent améliorer considérablement votre code. Que vous souhaitiez valider des données, suivre les modifications d'objets ou simplement vouloir plus de contrôle sur le comportement des objets, ces outils sont là pour vous faciliter la vie.

Alors n'hésitez plus, essayez-les ! Vous pourriez bien vous retrouver à recourir à Proxy et Reflect dans votre prochain projet.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!