Rumah > hujung hadapan web > tutorial js > ES6 dalam Tindakan: Cara Menggunakan Proksi

ES6 dalam Tindakan: Cara Menggunakan Proksi

Christopher Nolan
Lepaskan: 2025-02-15 10:37:09
asal
412 orang telah melayarinya

ES6 Proxies: Metaprogramming Powerhouse in JavaScript

ES6 in Action: How to Use Proxies

Konsep Utama:

proksi ES6 membolehkan metaprogramming dengan memintas akses harta benda objek. Proksi bertindak sebagai perantara antara kod anda dan objek sasaran. Ini melibatkan tiga elemen utama:

  • sasaran: objek asal proksi menguruskan. Ini boleh menjadi objek JavaScript, termasuk tatasusunan atau proksi lain.
  • pengendali: objek yang menentukan tingkah laku proksi menggunakan perangkap .
  • Perangkap: Fungsi dalam pengendali yang mengawal bagaimana proksi bertindak balas terhadap operasi tertentu (mis., Mendapatkan, menetapkan, memadam sifat).

Contoh ilustrasi:

mari kita buat proksi yang memintas akses harta:

const target = { a: 1, b: 2, c: 3 };

const handler = {
  get: (target, prop) => (prop in target ? target[prop] : 42), // Default to 42 if property doesn't exist
};

const proxy = new Proxy(target, handler);

console.log(proxy.a); // 1
console.log(proxy.b); // 2
console.log(proxy.d); // 42
Salin selepas log masuk
Proksi ini mengembalikan nilai asal jika harta itu wujud; Jika tidak, ia mengembalikan 42.

Contoh Lanjutan: Tetapan Harta Kawalan

kita dapat meningkatkan proksi untuk menyekat tugasan harta:

Contoh ini hanya membolehkan sifat tunggal aksara (a-z) ditetapkan.

const handler = {
  get: (target, prop) => (prop in target ? target[prop] : 42),
  set: (target, prop, value) => {
    if (prop.length === 1 && prop >= 'a' && prop <= 'z') {
      target[prop] = value;
      return true;
    } else {
      throw new Error(`Invalid property: ${prop}`);
    }
  },
};

const proxy = new Proxy({}, handler); // Start with an empty object

proxy.a = 10; // Allowed
proxy.b = 20; // Allowed
try {
  proxy.AB = 30; // Throws an error
} catch (e) {
  console.error(e);
}
Salin selepas log masuk

Perangkap proksi yang tersedia:

Beyond dan

, banyak perangkap menawarkan kawalan halus:

get set

: memintas
    panggilan pengendali.
  • construct new: Panggilan fungsi memintas.
  • apply: memintas penghapusan harta.
  • deleteProperty: memintas
  • cek pengendali.
  • has in: memintas penghitungan harta.
  • dan banyak lagi ... (lihat dokumentasi MDN untuk senarai lengkap) ownKeys
  • Aplikasi praktikal:

Profil:
    menjejaki kekerapan akses harta benda.
  • mengikat data:
  • Segerakkan perubahan objek dengan kemas kini UI.
  • Pengesahan:
  • menguatkuasakan jenis data atau kekangan.
  • Indeks array negatif:
  • elemen array akses dari akhir.
  • Keserasian dan batasan penyemak imbas:

Walaupun disokong secara meluas dalam penyemak imbas moden dan node.js, proksi ES6 tidak mempunyai keserasian silang penyemak imbas lengkap (terutamanya pelayar yang lebih tua). Secara kritikal, mereka tidak boleh tidak dapat dipenuhi kerana sifat asas mereka.

Soalan Lazim (Soalan Lazim):

Soalan Lazim yang disediakan sudah komprehensif dan berstruktur dengan baik. Tiada penambahan selanjutnya diperlukan.

Atas ialah kandungan terperinci ES6 dalam Tindakan: Cara Menggunakan Proksi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan