ES6 dalam Tindakan: Cara Menggunakan Proksi

ES6 Proxies: Metaprogramming Powerhouse in JavaScript

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:

<code class="language-javascript">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</code>

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.

<code class="language-javascript">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);
}</code>

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!