Cara Menggunakan Objek Proksi dalam JavaScript

Linda Hamilton
Lepaskan: 2024-11-01 06:52:30
asal
972 orang telah melayarinya

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)
Salin selepas log masuk
Salin selepas log masuk

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

How to Use Proxy Objects in JavaScript

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'
Salin selepas log masuk

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'
Salin selepas log masuk

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)
Salin selepas log masuk
Salin selepas log masuk

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!

sumber:dev.to
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