M

MLOG

Magyar

Átfogó útmutató globális fejlesztőknek a JavaScript Proxy API elsajátításához. Tanulja meg az objektumműveletek elfogását és testreszabását gyakorlati példákkal, esettanulmányokkal és teljesítménytippekkel.

JavaScript Proxy API: Mélymerülés az Objektumok Viselkedésének Módosításába

A modern JavaScript folyamatosan fejlődő világában a fejlesztők állandóan erősebb és elegánsabb módszereket keresnek az adatok kezelésére és az azokkal való interakcióra. Míg az olyan funkciók, mint az osztályok, modulok és az async/await forradalmasították a kódírás módját, létezik egy erőteljes metaprogramozási funkció, amelyet az ECMAScript 2015-ben (ES6) vezettek be, és amely gyakran kihasználatlan marad: a Proxy API.

A metaprogramozás talán ijesztően hangzik, de egyszerűen arról a koncepcióról van szó, hogy olyan kódot írunk, amely más kódon működik. A Proxy API a JavaScript elsődleges eszköze erre, lehetővé téve, hogy egy 'proxyt' hozzunk létre egy másik objektum számára, amely képes elfogni és újradefiniálni az adott objektum alapvető műveleteit. Olyan, mintha egy testreszabható kapuőrt helyeznénk egy objektum elé, teljes kontrollt biztosítva afölött, hogyan férnek hozzá és hogyan módosítják azt.

Ez az átfogó útmutató lerántja a leplet a Proxy API-ról. Felfedezzük alapkoncepcióit, gyakorlati példákkal lebontjuk különböző képességeit, és megvitatjuk a haladó felhasználási eseteket és a teljesítménnyel kapcsolatos megfontolásokat. A végére meg fogja érteni, hogy a Proxyk miért képezik a modern keretrendszerek sarokkövét, és hogyan használhatja fel őket tisztább, erősebb és karbantarthatóbb kód írására.

Az Alapfogalmak Megértése: Cél, Kezelő és Csapdák

A Proxy API három alapvető komponensre épül. Szerepük megértése a kulcs a proxyk elsajátításához.

A proxy létrehozásának szintaxisa egyszerű:

const proxy = new Proxy(target, handler);

Nézzünk egy nagyon alapvető példát. Létrehozunk egy proxyt, amely egyszerűen minden műveletet továbbít a cél objektumnak egy üres kezelő használatával.


// Az eredeti objektum
const target = {
  message: "Hello, World!"
};

// Egy üres kezelő. Minden művelet továbbítva lesz a cél felé.
const handler = {};

// A proxy objektum
const proxy = new Proxy(target, handler);

// Egy tulajdonság elérése a proxyn keresztül
console.log(proxy.message); // Kimenet: Hello, World!

// A művelet továbbítva lett a cél felé
console.log(target.message); // Kimenet: Hello, World!

// Egy tulajdonság módosítása a proxyn keresztül
proxy.anotherMessage = "Hello, Proxy!";

console.log(proxy.anotherMessage); // Kimenet: Hello, Proxy!
console.log(target.anotherMessage); // Kimenet: Hello, Proxy!

Ebben a példában a proxy pontosan úgy viselkedik, mint az eredeti objektum. Az igazi erő akkor mutatkozik meg, amikor elkezdünk csapdákat definiálni a kezelőben.

Egy Proxy anatómiája: A Gyakori Csapdák Felfedezése

A kezelő objektum akár 13 különböző csapdát is tartalmazhat, amelyek mindegyike a JavaScript objektumok egy-egy alapvető belső metódusának felel meg. Fedezzük fel a leggyakoribb és leghasznosabbakat.

Tulajdonság-hozzáférési Csapdák

1. `get(target, property, receiver)`

Ez vitathatatlanul a leggyakrabban használt csapda. Akkor aktiválódik, amikor a proxy egy tulajdonságát olvassák.

Példa: Alapértelmezett értékek nem létező tulajdonságokhoz.


const user = {
  firstName: 'John',
  lastName: 'Doe',
  age: 30
};

const userHandler = {
  get(target, property) {
    // Ha a tulajdonság létezik a célon, adjuk vissza.
    // Ellenkező esetben adjunk vissza egy alapértelmezett üzenetet.
    return property in target ? target[property] : `A(z) '${property}' tulajdonság nem létezik.`;
  }
};

const userProxy = new Proxy(user, userHandler);

console.log(userProxy.firstName); // Kimenet: John
console.log(userProxy.age);       // Kimenet: 30
console.log(userProxy.country);   // Kimenet: A(z) 'country' tulajdonság nem létezik.

2. `set(target, property, value, receiver)`

A set csapda akkor hívódik meg, amikor a proxy egy tulajdonságának értéket adnak. Tökéletes validálásra, naplózásra vagy csak olvasható objektumok létrehozására.

Példa: Adatvalidáció.


const person = {
  name: 'Jane Doe',
  age: 25
};

const validationHandler = {
  set(target, property, value) {
    if (property === 'age') {
      if (typeof value !== 'number' || !Number.isInteger(value)) {
        throw new TypeError('Az életkornak egész számnak kell lennie.');
      }
      if (value <= 0) {
        throw new RangeError('Az életkornak pozitív számnak kell lennie.');
      }
    }

    // Ha az érvényesítés sikeres, állítsuk be az értéket a cél objektumon.
    target[property] = value;

    // Jelezzük a sikert.
    return true;
  }
};

const personProxy = new Proxy(person, validationHandler);

personProxy.age = 30; // Ez érvényes
console.log(personProxy.age); // Kimenet: 30

try {
  personProxy.age = 'thirty'; // TypeError-t dob
} catch (e) {
  console.error(e.message); // Kimenet: Az életkornak egész számnak kell lennie.
}

try {
  personProxy.age = -5; // RangeError-t dob
} catch (e) {
  console.error(e.message); // Kimenet: Az életkornak pozitív számnak kell lennie.
}

3. `has(target, property)`

Ez a csapda az in operátort fogja el. Lehetővé teszi annak szabályozását, hogy mely tulajdonságok tűnjenek létezőnek egy objektumon.

Példa: 'Privát' tulajdonságok elrejtése.

JavaScriptben gyakori konvenció, hogy a privát tulajdonságokat aláhúzással (_) kezdik. A has csapdával elrejthetjük ezeket az in operátor elől.


const secretData = {
  _apiKey: 'xyz123abc',
  publicKey: 'pub456def',
  id: 1
};

const hidingHandler = {
  has(target, property) {
    if (property.startsWith('_')) {
      return false; // Tegyünk úgy, mintha nem létezne
    }
    return property in target;
  }
};

const dataProxy = new Proxy(secretData, hidingHandler);

console.log('publicKey' in dataProxy); // Kimenet: true
console.log('_apiKey' in dataProxy);   // Kimenet: false (annak ellenére, hogy a célon rajta van)
console.log('id' in dataProxy);        // Kimenet: true

Megjegyzés: Ez csak az in operátorra van hatással. A közvetlen hozzáférés, mint a dataProxy._apiKey, továbbra is működne, hacsak nem implementálunk egy megfelelő get csapdát is.

4. `deleteProperty(target, property)`

Ez a csapda akkor hajtódik végre, amikor egy tulajdonságot a delete operátorral törölnek. Hasznos a fontos tulajdonságok törlésének megakadályozására.

A csapdának true-t kell visszaadnia a sikeres törléshez, vagy false-t a sikertelenhez.

Példa: Tulajdonságok törlésének megakadályozása.


const immutableConfig = {
  databaseUrl: 'prod.db.server',
  port: 8080
};

const deletionGuardHandler = {
  deleteProperty(target, property) {
    if (property in target) {
      console.warn(`Kísérlet a(z) '${property}' védett tulajdonság törlésére. A művelet megtagadva.`);
      return false;
    }
    return true; // A tulajdonság egyébként sem létezett
  }
};

const configProxy = new Proxy(immutableConfig, deletionGuardHandler);

delete configProxy.port;
// Konzol kimenet: Kísérlet a(z) 'port' védett tulajdonság törlésére. A művelet megtagadva.

console.log(configProxy.port); // Kimenet: 8080 (Nem lett törölve)

Objektum Felsorolási és Leíró Csapdák

5. `ownKeys(target)`

Ez a csapda olyan műveleteknél aktiválódik, amelyek egy objektum saját tulajdonságainak listáját kérik le, mint például az Object.keys(), Object.getOwnPropertyNames(), Object.getOwnPropertySymbols() és a Reflect.ownKeys().

Példa: Kulcsok szűrése.

Kombináljuk ezt az előző 'privát' tulajdonságos példánkkal, hogy teljesen elrejtsük őket.


const secretData = {
  _apiKey: 'xyz123abc',
  publicKey: 'pub456def',
  id: 1
};

const keyHidingHandler = {
  has(target, property) {
    return !property.startsWith('_') && property in target;
  },
  ownKeys(target) {
    return Reflect.ownKeys(target).filter(key => !key.startsWith('_'));
  },
  get(target, property, receiver) {
    // A közvetlen hozzáférést is akadályozzuk meg
    if (property.startsWith('_')) {
      return undefined;
    }
    return Reflect.get(target, property, receiver);
  }
};

const fullProxy = new Proxy(secretData, keyHidingHandler);

console.log(Object.keys(fullProxy)); // Kimenet: ['publicKey', 'id']
console.log('publicKey' in fullProxy); // Kimenet: true
console.log('_apiKey' in fullProxy);   // Kimenet: false
console.log(fullProxy._apiKey);      // Kimenet: undefined

Vegyük észre, hogy itt a Reflect-et használjuk. A Reflect objektum metódusokat biztosít az elfogható JavaScript műveletekhez, és metódusainak nevei és aláírásai megegyeznek a proxy csapdákéval. Bevált gyakorlat a Reflect használata az eredeti művelet továbbítására a célhoz, biztosítva az alapértelmezett viselkedés helyes megőrzését.

Függvény és Konstruktor Csapdák

A proxyk nem korlátozódnak egyszerű objektumokra. Amikor a cél egy függvény, elfoghatja a hívásokat és a konstruálásokat.

6. `apply(target, thisArg, argumentsList)`

Ez a csapda akkor hívódik meg, amikor egy függvény proxyját végrehajtják. Elfogja a függvényhívást.

Példa: Függvényhívások és argumentumaik naplózása.


function sum(a, b) {
  return a + b;
}

const loggingHandler = {
  apply(target, thisArg, argumentsList) {
    console.log(`A(z) '${target.name}' függvény hívása a következő argumentumokkal: ${argumentsList}`);
    // Hajtsuk végre az eredeti függvényt a megfelelő kontextussal és argumentumokkal
    const result = Reflect.apply(target, thisArg, argumentsList);
    console.log(`A(z) '${target.name}' függvény visszatérési értéke: ${result}`);
    return result;
  }
};

const proxiedSum = new Proxy(sum, loggingHandler);

proxiedSum(5, 10);
// Konzol kimenet:
// A(z) 'sum' függvény hívása a következő argumentumokkal: 5,10
// A(z) 'sum' függvény visszatérési értéke: 15

7. `construct(target, argumentsList, newTarget)`

Ez a csapda a new operátor használatát fogja el egy osztály vagy függvény proxyján.

Példa: Singleton tervezési minta megvalósítása.


class MyDatabaseConnection {
  constructor(url) {
    this.url = url;
    console.log(`Kapcsolódás a következőhöz: ${this.url}...`);
  }
}

let instance;

const singletonHandler = {
  construct(target, argumentsList) {
    if (!instance) {
      console.log('Új példány létrehozása.');
      instance = Reflect.construct(target, argumentsList);
    }
    console.log('A meglévő példány visszaadása.');
    return instance;
  }
};

const ProxiedConnection = new Proxy(MyDatabaseConnection, singletonHandler);

const conn1 = new ProxiedConnection('db://primary');
// Konzol kimenet:
// Új példány létrehozása.
// Kapcsolódás a következőhöz: db://primary...
// A meglévő példány visszaadása.

const conn2 = new ProxiedConnection('db://secondary'); // Az URL figyelmen kívül lesz hagyva
// Konzol kimenet:
// A meglévő példány visszaadása.

console.log(conn1 === conn2); // Kimenet: true
console.log(conn1.url); // Kimenet: db://primary
console.log(conn2.url); // Kimenet: db://primary

Gyakorlati Felhasználási Esetek és Haladó Minták

Most, hogy áttekintettük az egyes csapdákat, nézzük meg, hogyan kombinálhatók valós problémák megoldására.

1. API Absztrakció és Adattranszformáció

Az API-k gyakran olyan formátumban adják vissza az adatokat, amely nem felel meg az alkalmazás konvencióinak (pl. snake_case vs. camelCase). Egy proxy átláthatóan kezelheti ezt az átalakítást.


function snakeToCamel(s) {
  return s.replace(/(_\w)/g, (m) => m[1].toUpperCase());
}

// Képzeljük el, hogy ez a nyers adatunk egy API-ból
const apiResponse = {
  user_id: 123,
  first_name: 'Alice',
  last_name: 'Wonderland',
  account_status: 'active'
};

const camelCaseHandler = {
  get(target, property) {
    const camelCaseProperty = snakeToCamel(property);
    // Ellenőrizzük, hogy a camelCase verzió létezik-e közvetlenül
    if (camelCaseProperty in target) {
      return target[camelCaseProperty];
    }
    // Visszalépés az eredeti tulajdonságnévre
    if (property in target) {
      return target[property];
    }
    return undefined;
  }
};

const userModel = new Proxy(apiResponse, camelCaseHandler);

// Most már camelCase formátummal is hozzáférhetünk a tulajdonságokhoz, annak ellenére, hogy snake_case formátumban vannak tárolva
console.log(userModel.userId);        // Kimenet: 123
console.log(userModel.firstName);     // Kimenet: Alice
console.log(userModel.accountStatus); // Kimenet: active

2. Megfigyelhetők és Adatkötés (A Modern Keretrendszerek Magja)

A proxyk állnak a modern keretrendszerek, mint például a Vue 3, reaktivitási rendszereinek motorja mögött. Amikor megváltoztat egy tulajdonságot egy proxied állapotobjektumon, a set csapda használható a felhasználói felület vagy az alkalmazás más részeinek frissítésére.

Íme egy rendkívül leegyszerűsített példa:


function createObservable(target, callback) {
  const handler = {
    set(obj, prop, value) {
      const result = Reflect.set(obj, prop, value);
      callback(prop, value); // Változás esetén hívjuk meg a visszahívási függvényt
      return result;
    }
  };
  return new Proxy(target, handler);
}

const state = {
  count: 0,
  message: 'Hello'
};

function render(prop, value) {
  console.log(`VÁLTOZÁS ÉSZLELVE: A(z) '${prop}' tulajdonság értéke '${value}' lett. UI újrarajzolása...`);
}

const observableState = createObservable(state, render);

observableState.count = 1;
// Konzol kimenet: VÁLTOZÁS ÉSZLELVE: A(z) 'count' tulajdonság értéke '1' lett. UI újrarajzolása...

observableState.message = 'Goodbye';
// Konzol kimenet: VÁLTOZÁS ÉSZLELVE: A(z) 'message' tulajdonság értéke 'Goodbye' lett. UI újrarajzolása...

3. Negatív Tömbindexek

Egy klasszikus és szórakoztató példa a natív tömb viselkedésének kiterjesztése a negatív indexek támogatására, ahol a -1 az utolsó elemre utal, hasonlóan a Pythonhoz hasonló nyelvekhez.


function createNegativeArrayProxy(arr) {
  const handler = {
    get(target, property) {
      const index = Number(property);
      if (!Number.isNaN(index) && index < 0) {
        // A negatív indexet alakítsuk át egy pozitív, a tömb végéről számított indexre
        property = String(target.length + index);
      }
      return Reflect.get(target, property);
    }
  };
  return new Proxy(arr, handler);
}

const originalArray = ['a', 'b', 'c', 'd', 'e'];
const proxiedArray = createNegativeArrayProxy(originalArray);

console.log(proxiedArray[0]);  // Kimenet: a
console.log(proxiedArray[-1]); // Kimenet: e
console.log(proxiedArray[-2]); // Kimenet: d
console.log(proxiedArray.length); // Kimenet: 5

Teljesítménnyel Kapcsolatos Megfontolások és Bevált Gyakorlatok

Bár a proxyk hihetetlenül erősek, nem csodaszerek. Kulcsfontosságú megérteni a következményeiket.

A Teljesítménybeli Többletterhelés

A proxy egy közvetett réteget vezet be. Minden műveletnek egy proxied objektumon át kell haladnia a kezelőn, ami egy kis többletterhelést jelent egy egyszerű objektumon végzett közvetlen művelethez képest. A legtöbb alkalmazás (például adatvalidáció vagy keretrendszer szintű reaktivitás) esetében ez a többletterhelés elhanyagolható. Azonban teljesítménykritikus kódban, mint például egy szűk ciklusban, amely millió elemet dolgoz fel, ez szűk keresztmetszetté válhat. Mindig végezzen teljesítménymérést, ha a teljesítmény elsődleges szempont.

Proxy Invariánsok

Egy csapda nem hazudhat teljesen a cél objektum természetéről. A JavaScript egy 'invariánsoknak' nevezett szabályrendszert kényszerít ki, amelyet a proxy csapdáknak be kell tartaniuk. Egy invariáns megsértése TypeError-t eredményez.

Például, a deleteProperty csapda egyik invariánsa az, hogy nem adhat vissza true-t (a siker jelzésére), ha a cél objektum megfelelő tulajdonsága nem konfigurálható. Ez megakadályozza, hogy a proxy azt állítsa, hogy törölt egy olyan tulajdonságot, amelyet nem lehet törölni.


const target = {};
Object.defineProperty(target, 'unbreakable', { value: 10, configurable: false });

const handler = {
  deleteProperty(target, prop) {
    // Ez megsérti az invariánst
    return true;
  }
};

const proxy = new Proxy(target, handler);

try {
  delete proxy.unbreakable; // Ez hibát fog dobni
} catch (e) {
  console.error(e.message);
  // Kimenet: 'deleteProperty' a proxyn: true-t adott vissza a nem konfigurálható 'unbreakable' tulajdonságra
}

Mikor Használjunk Proxykat (és Mikor Ne)

Visszavonható Proxyk

Olyan esetekben, amikor szükség lehet egy proxy 'kikapcsolására' (pl. biztonsági okokból vagy memóriakezelés miatt), a JavaScript a Proxy.revocable()-t biztosítja. Ez egy objektumot ad vissza, amely tartalmazza mind a proxyt, mind egy revoke függvényt.


const target = { data: 'érzékeny adat' };
const handler = {};

const { proxy, revoke } = Proxy.revocable(target, handler);

console.log(proxy.data); // Kimenet: érzékeny adat

// Most pedig visszavonjuk a proxy hozzáférését
revoke();

try {
  console.log(proxy.data); // Ez hibát fog dobni
} catch (e) {
  console.error(e.message);
  // Kimenet: A 'get' művelet nem hajtható végre egy visszavont proxyn
}

Proxyk vs. Egyéb Metaprogramozási Technikák

A Proxyk előtt a fejlesztők más módszereket használtak hasonló célok elérésére. Hasznos megérteni, hogyan viszonyulnak a Proxyk ezekhez.

`Object.defineProperty()`

Az Object.defineProperty() közvetlenül módosít egy objektumot getterek és setterek definiálásával specifikus tulajdonságokra. A Proxyk ezzel szemben egyáltalán nem módosítják az eredeti objektumot; becsomagolják azt.

Konklúzió: A Virtualizáció Ereje

A JavaScript Proxy API több, mint egy okos funkció; ez egy alapvető változás abban, ahogyan az objektumokat tervezhetjük és interakcióba léphetünk velük. Azáltal, hogy lehetővé teszik számunkra az alapvető műveletek elfogását és testreszabását, a Proxyk kaput nyitnak az erőteljes minták világába: a zökkenőmentes adatvalidációtól és transzformációtól a modern felhasználói felületeket működtető reaktív rendszerekig.

Bár egy kis teljesítményköltséggel és betartandó szabályokkal járnak, a tiszta, lazán csatolt és erőteljes absztrakciók létrehozására való képességük páratlan. Az objektumok virtualizálásával robusztusabb, karbantarthatóbb és kifejezőbb rendszereket építhet. Legközelebb, amikor egy komplex, adatkezeléssel, validációval vagy megfigyelhetőséggel kapcsolatos kihívással szembesül, fontolja meg, hogy a Proxy-e a megfelelő eszköz a feladathoz. Lehet, hogy éppen ez lesz a legelegánsabb megoldás az eszköztárában.