Cara Menggunakan Objek Proksi dalam JavaScript

Objek dalam JavaScript ialah jenis data yang berguna yang membolehkan kami mentakrifkan data kompleks dengan pasangan nilai kunci mudah, seperti kamus. Kadangkala, anda mungkin mahu menukar cara objek JavaScript berfungsi secara lalai. Di sinilah Objek Proksi membantu. Dalam artikel ini, kita akan membincangkan apakah objek proksi, sebab ia berguna dan cara menggunakannya.

Apakah Objek Proksi?

Sebelum memahami apa itu Objek Proksi, mari lihat perkataan Proksi. Proksi bermaksud sesuatu yang bertindak seperti perkara asal tetapi bukan perkara asal. Begitu juga, Objek Proksi ialah objek yang dicipta menggunakan objek asal yang boleh memintas dan mengubah cara objek asal berfungsi.

Pembina Proksi mengambil dua parameter

• sasaran: objek yang anda ingin buat proksi untuk

• pengendali: objek dengan operasi yang ingin anda ubah atau takrifkan semula
  

const proxyObject = new Proxy(target, handler)

Bagaimana Objek Proksi Berfungsi?

Apabila kami mencipta Objek Proksi dengan pengendali yang mempunyai operasi yang ingin anda ubah, ia memintas operasi tersebut, menangkap panggilan ke objek sasaran dan menjalankan logik tersuai yang anda tetapkan untuk operasi tersebut.

Operasi dipanggil perangkap, yang pada asasnya adalah kaedah dalaman objek. Antaranya ialah:

• dapatkan

• set

• deleteProperty

Di sini, saya telah mencipta visual ringkas yang menunjukkan cara Objek Proksi berfungsi. Jika kami cuba mengakses atau menetapkan nilai, ia memintas dan menjalankan operasi (perangkap) yang ditakrifkan dalam pengendali.

Baiklah, saya harap apa dan bagaimana Objek Proksi adalah jelas. Seterusnya, kami akan membincangkan beberapa kes penggunaan untuk menunjukkan sebab Objek Proksi berguna.

Gunakan kes Objek Proksi

Pembalakan

Katakanlah anda ingin mencipta sistem di mana setiap kali harta diakses daripada objek, ia merekodkan maklumat.

const platform = {
  type: "peerlist.io",
  handle: "sachin87",
};

const proxyPlatformObj = new Proxy(platform, {
  get(target, key) {
    console.log(`[Info]: Accessing ${key} at ${Date.now()}`);
    return target[key];
  },
});

// try to access the property
proxyPlatformObj.type;

// [Info]: Accessing type at 1729661722827

// 'peerlist.io'

Ini ialah kes penggunaan yang sangat mudah, tetapi ia berguna apabila pengelogan diperlukan dan anda boleh mengembangkannya untuk melakukan perkara yang lebih maju.

Kami juga boleh membenarkan pengguna mengakses hartanah yang tidak tersedia secara langsung. Contohnya, dalam kes di atas, kami mungkin mahukan URL penuh platform dengan pemegang pengguna.

const proxyPlatformObj = new Proxy(platform, {
  get(target, key) {
    console.log(`[Info]: Accessing ${key} at ${Date.now()}`);
    if (key === "url") {
      return `https://${target.type}/${target.handle}`;
    }
    return target[key];
  },
});

// try to access the url property
proxyPlatformObj.url;

// [Info]: Accessing url at 1729662118855
// 'https://peerlist.io/sachin87'

Pengesahan

Kes penggunaan lain ialah menyemak nilai sebelum menambahkannya. Sebagai contoh, katakan kita ingin menyemak nilai pemegang sebelum menetapkannya. Kami akan mengesahkan dua syarat asas:

• Sepatutnya dalam huruf kecil

• Ia boleh menjadi abjad angka
  

const proxyObject = new Proxy(target, handler)

Anda mungkin tertanya-tanya apakah Reflect.set(sasaran, kunci, nilai). Ia adalah objek ruang nama dengan kaedah statik untuk memanggil kaedah dalaman objek JavaScript yang boleh dipintas. Jika anda tidak mahu pengesahan untuk semua sifat, anda boleh menggunakan objek Reflect untuk mengekalkan tingkah laku lalai.

Kami bercakap tentang dua pengelogan dan pengesahan kes penggunaan, tetapi anda boleh memintas kaedah dalaman lain berdasarkan keperluan anda.

Kesimpulan

Kami bercakap tentang apa itu Objek Proksi, cara ia berfungsi dan beberapa kegunaannya. Objek Proksi berguna, tetapi kita harus sedar tentang kelemahannya. Kita harus menggunakannya hanya apabila perlu untuk mengelakkan penambahan kerumitan atau pepijat secara tidak sengaja.

Itu sahaja untuk topik ini. Terima kasih kerana membaca! Jika anda mendapati artikel ini membantu, sila pertimbangkan untuk menyukai, mengulas dan berkongsinya dengan orang lain.

Bacaan Lanjut

• Dokumen Proksi MDN

• MDN Reflect Doc

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