Jak działają obiekty proxy w JavaScript?

Obiekt proxy JavaScript umożliwia przechwytywanie i dostosowywanie zachowania innego obiektu bez modyfikowania oryginału.

Korzystając z obiektów proxy, można sprawdzać poprawność danych, udostępniać dodatkowe funkcje oraz kontrolować dostęp do właściwości i funkcji.

Dowiedz się wszystkiego o zastosowaniach obiektów proxy i sposobach ich tworzenia w JavaScript.

Tworzenie obiektu proxy

W JavaScript możesz tworzyć obiekty proxy za pomocą konstruktora Proxy . Ten konstruktor przyjmuje dwa argumenty: obiekt docelowy , wokół którego ma być zawijane proxy, oraz obiekt obsługi , którego właściwości definiują zachowanie proxy podczas wykonywania operacji.

Pobiera te argumenty i tworzy obiekt, którego można użyć zamiast obiektu docelowego. Ten utworzony obiekt może ponownie zdefiniować podstawowe operacje, takie jak pobieranie, ustawianie i definiowanie właściwości. Tych obiektów proxy można również używać do rejestrowania dostępu do właściwości oraz sprawdzania poprawności, formatowania lub oczyszczania danych wejściowych.

Na przykład:

const originalObject = {
  foo: "bar"
}


const handler = {
  get: function(target, property) {
    return target[property];
  },
  set: function(target, property, value) {
    target[property] = value;
  }
};

const proxy = new Proxy(originalObject, handler)


Ten kod tworzy obiekt docelowy, originalObject , z pojedynczą właściwością foo i obiektem obsługi, handler . Obiekt obsługi zawiera dwie właściwości, get i set . Te właściwości są znane jako pułapki.

Pułapka obiektu proxy to funkcja wywoływana za każdym razem, gdy wykonujesz określoną akcję na obiekcie proxy. Pułapki umożliwiają przechwytywanie i dostosowywanie zachowania obiektu proxy. Dostęp do właściwości z obiektu proxy wywołuje pułapkę get , a modyfikowanie lub manipulowanie właściwością z obiektu proxy wywołuje pułapkę set .

Na koniec kod tworzy obiekt proxy z konstruktorem Proxy . Przekazuje originalObject i handler odpowiednio jako obiekt docelowy i handler.

Korzystanie z obiektów zastępczych

Obiekty proxy mają kilka zastosowań w JavaScript, z których niektóre są następujące.

Dodawanie funkcjonalności do obiektu

Możesz użyć obiektu proxy, aby opakować istniejący obiekt i dodać nowe funkcje, takie jak rejestrowanie lub obsługa błędów, bez modyfikowania oryginalnego obiektu.

Aby dodać nową funkcjonalność, musisz użyć konstruktora Proxy i zdefiniować jedną lub więcej pułapek dla akcji, które chcesz przechwycić.

Na przykład:

const userObject = {
  firstName: "Kennedy",
  lastName: "Martins",
  age: 20,
};


const handler = {
  get: function (target, property) {
    console.log(`Getting property "${property}"`);
    return target[property];
  },
  set: function (target, property, value) {
    console.log(`Setting property "${property}"to value "${value}"`);
    target[property] = value;
  },
};

console.log(proxy.firstName); // Getting property "firstName"Kennedy
console.log(proxy.lastName); // Getting property "lastName"Martins
proxy.age = 23; // Setting property "age" to value "23"


Ten blok kodu dodaje funkcjonalność poprzez pułapki proxy, get i set . Teraz, gdy próbujesz uzyskać dostęp lub zmodyfikować właściwość userObject , obiekt proxy najpierw zarejestruje twoją operację w konsoli, zanim uzyskasz dostęp do właściwości lub ją zmodyfikujesz.

Sprawdzanie poprawności danych przed ustawieniem ich na obiekcie

Obiektów proxy można używać do sprawdzania poprawności danych i sprawdzania, czy spełniają one określone kryteria przed ustawieniem ich na obiekcie. Możesz to zrobić, definiując logikę sprawdzania poprawności w ustawionej pułapce w obiekcie obsługi .

Na przykład:

const userObject = {
  firstName: "Kennedy",
  lastName: "Martins",
  age: 20,
};


const handler = {
  get: function (target, property) {
    console.log(`Getting property "${property}"`);
    return target[property];
  },
  set: function (target, property, value) {
    if (
      property === "age" &&
      typeof value == "number" &&
      value > 0 &&
      value < 120
    ) {
      console.log(`Setting property "${property}"to value "${value}"`);
      target[property] = value;
    } else {
      throw new Error("Invalid parameter. Please review and correct.");
    }
  },
};

const proxy = new Proxy(userObject, handler);
proxy.age = 21;


Ten blok kodu dodaje reguły sprawdzania poprawności do ustawionej pułapki. Możesz przypisać dowolną wartość do właściwości wieku w instancji userObject . Ale dzięki dodanym regułom walidacji możesz przypisać nową wartość do właściwości wieku tylko wtedy, gdy jest to liczba większa niż 0 i mniejsza niż 120. Dowolna wartość, którą próbujesz ustawić we właściwości wieku , która nie spełnia wymaganych kryteriów spowoduje błąd i wydrukuje komunikat o błędzie.

Kontrolowanie dostępu do właściwości obiektu

Możesz użyć obiektów zastępczych, aby ukryć niektóre właściwości obiektu. Zrób to, definiując logikę ograniczeń w get traps dla właściwości, do których chcesz kontrolować dostęp.

Na przykład:

const userObject = {
  firstName: "Kennedy",
  lastName: "Martins",
  age: 20,
  phone: 1234567890,
  email: "foo@bar.com",
};


const handler = {
  get: function (target, property) {
    if (property === "phone" || property === "email") {
      throw new Error("Access to info denied");
    } else {
      console.log(`Getting property "${property}"`);
      return target[property];
    }
  },
  set: function (target, property, value) {
    console.log(`Setting property "${property}"to value "${value}"`);
    target[property] = value;
  },
};

console.log(proxy.firstName); // Getting property "firstName"Kennedy
console.log(proxy.email); // Throws error


Powyższy blok kodu dodaje pewne ograniczenia do pułapki get . Początkowo możesz uzyskać dostęp do wszystkich dostępnych właściwości na userObject . Dodane reguły uniemożliwiają dostęp do poufnych informacji, takich jak adres e-mail lub telefon użytkownika. Próba uzyskania dostępu do którejkolwiek z tych właściwości spowoduje błąd.

Inne pułapki proxy

Pułapki get i set są najbardziej powszechne i przydatne, ale istnieje 11 innych pułapek proxy JavaScript. Oni są:

• Apply : Pułapka Apply jest uruchamiana, gdy wywołujesz funkcję na obiekcie proxy.
• konstrukcja : Pułapka konstrukcji jest uruchamiana, gdy używasz operatora new do tworzenia obiektu z obiektu proxy.
• deleteProperty : Pułapka deleteProperty jest uruchamiana, gdy używasz operatora delete do usunięcia właściwości z obiektu proxy.
• ma — Pułapka ma uruchamia się, gdy używasz operatora in do sprawdzania, czy właściwość istnieje w obiekcie proxy.
• ownKeys – Pułapka ownKeys jest uruchamiana po wywołaniu funkcji Object.getOwnPropertyNames lub Object.getOwnPropertySymbols na obiekcie proxy.
• getOwnPropertyDescriptor — Pułapka getOwnPropertyDescriptor jest uruchamiana po wywołaniu funkcji Object.getOwnPropertyDescriptor na obiekcie proxy.
• defineProperty – Pułapka defineProperty jest uruchamiana po wywołaniu funkcji Object.defineProperty na obiekcie proxy.
• PreventExtensions – Pułapka PreventExtensions jest uruchamiana po wywołaniu funkcji Object.preventExtensions na obiekcie proxy.
• isExtensible — Pułapka isExtensible jest uruchamiana po wywołaniu funkcji Object.isExtensible na obiekcie proxy.
• getPrototypeOf – Pułapka getPrototypeOf jest uruchamiana po wywołaniu funkcji Object.getPrototypeOf na obiekcie proxy.
• setPrototypeOf – Pułapka setPrototypeOf jest uruchamiana po wywołaniu funkcji Object.setPrototypeOf na obiekcie proxy.

Podobnie jak pułapki set and get , możesz użyć tych pułapek, aby dodać nowe warstwy funkcjonalności, sprawdzania poprawności i kontroli do swojego obiektu bez modyfikowania oryginału.

Wady obiektów zastępczych

Obiekty proxy mogą być potężnym narzędziem do dodawania niestandardowych funkcji lub sprawdzania poprawności do obiektu. Ale mają też pewne potencjalne wady. Jedną z takich wad jest trudność w debugowaniu, ponieważ trudno jest zobaczyć, co dzieje się za kulisami.

Obiekty zastępcze mogą być również trudne w użyciu, zwłaszcza jeśli nie jesteś z nimi zaznajomiony. Należy dokładnie rozważyć te wady przed użyciem obiektów proxy w kodzie.