Akademi JavaScript · Pelajaran

Mencipta Proksi

Balut objek untuk memintas operasi.

Pelajaran 1 daripada 413 langkah

Mencipta Proksi ialah pelajaran Akademi JavaScript percuma di CoddyKit. Ini ialah pelajaran 1 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Akademi JavaScript, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Akademi JavaScript merangkumi sejumlah 4 pelajaran.

Apakah Itu Proksi

Proksi membalut objek dan membolehkan Anda memintas operasi asas seperti membaca, menulis dan memadam sifat.

Anda menciptanya dengan new Proxy(target, handler), dengan pengendali mentakrifkan perangkap yang menyesuaikan tingkah laku.

Pengendali Kosong

Dengan pengendali kosong, proksi berkelakuan sama seperti target. Setiap operasi diteruskan terus.

const target = { greeting: 'hello' };
const proxy = new Proxy(target, {});

console.log(proxy.greeting);
proxy.greeting = 'hi';
console.log(target.greeting);

target dan Proksi Berkongsi state

Proksi tidak menyalin target. Kedua-duanya merujuk objek asas yang sama, jadi perubahan melalui mana-mana satu dapat dilihat pada kedua-duanya.

const target = { count: 0 };
const proxy = new Proxy(target, {});

proxy.count = 5;
console.log(target.count);
target.count = 10;
console.log(proxy.count);

Menambah Perangkap get

Perangkap get memintas pembacaan sifat. Di sini, setiap pembacaan akan logged sebelum nilainya dikembalikan.

const proxy = new Proxy({ name: 'Ada' }, {
  get(target, prop) {
    console.log('reading ' + prop);
    return target[prop];
  }
});

console.log(proxy.name);

Parameter Perangkap

Perangkap get menerima target, nama property dan receiver (proksi). Anda menentukan perkara yang hendak dikembalikan.

const proxy = new Proxy({ a: 1 }, {
  get(target, prop) {
    return prop in target ? target[prop] : 'missing';
  }
});

console.log(proxy.a);
console.log(proxy.b);

Sifat Terhitung Semasa Pembacaan

Perangkap get boleh mengembalikan nilai yang sebenarnya tidak disimpan oleh target, dengan mengiranya serta-merta.

const proxy = new Proxy({ first: 'Ada', last: 'Lovelace' }, {
  get(target, prop) {
    if (prop === 'full') return target.first + ' ' + target.last;
    return target[prop];
  }
});

console.log(proxy.full);

Menambah Perangkap set

Perangkap set memintas penulisan. Anda mesti mengembalikan true untuk menandakan kejayaan, jika tidak penetapan dianggap gagal.

const proxy = new Proxy({}, {
  set(target, prop, value) {
    console.log('setting ' + prop + ' = ' + value);
    target[prop] = value;
    return true;
  }
});

proxy.score = 42;
console.log(proxy.score);

Perangkap has

Perangkap has memintas operator in, membolehkan Anda menyesuaikan semakan keahlian.

const proxy = new Proxy({ a: 1 }, {
  has(target, prop) {
    console.log('checking ' + prop);
    return prop in target;
  }
});

console.log('a' in proxy);
console.log('b' in proxy);

Perangkap deleteProperty

Perangkap deleteProperty memintas delete. Kembalikan true untuk menandakan kejayaan.

const proxy = new Proxy({ secret: 'x', ok: 'y' }, {
  deleteProperty(target, prop) {
    console.log('deleting ' + prop);
    delete target[prop];
    return true;
  }
});

delete proxy.secret;
console.log(Object.keys(proxy));

Banyak Perangkap Tersedia

Selain get dan set, proksi menyokong perangkap untuk has, deleteProperty, ownKeys, apply (untuk fungsi), construct dan banyak lagi. Anda hanya perlu melaksanakan perangkap yang diperlukan.

const proxy = new Proxy({ x: 1, y: 2 }, {
  ownKeys(target) {
    console.log('listing keys');
    return Object.keys(target);
  }
});

console.log(Object.keys(proxy));

Mengapa Proksi Penting

Proksi membolehkan Anda menambah pengesahan, perekodan, nilai lalai dan kereaktifan tanpa mengubah objek sasaran. Proksi menggerakkan rangka kerja seperti sistem kereaktifan Vue. Seterusnya, Anda akan meneliti perangkap get dan set dengan lebih mendalam.

const logged = new Proxy({ v: 0 }, {
  get: (t, p) => { console.log('get ' + p); return t[p]; },
  set: (t, p, val) => { console.log('set ' + p); t[p] = val; return true; }
});
logged.v = 9;
console.log(logged.v);

Semakan Pantas

Apakah yang dicipta oleh new Proxy(target, handler)?

Imbas Kembali: Mencipta Proksi

Anda telah mempelajari cara memintas operasi objek:

  • new Proxy(target, handler) membalut objek dengan perangkap.
  • Pengendali kosong meneruskan semuanya; proksi dan target berkongsi state.
  • Perangkap biasa: get, set, has, deleteProperty, ownKeys.
  • Perangkap set dan pemadaman mesti mengembalikan true apabila berjaya.
Percuma untuk bermula

Pelajari JavaScript dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus
59
Pelajaran
200

Soalan Lazim

Adakah pelajaran “Mencipta Proksi” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Akademi JavaScript, termasuk “Mencipta Proksi”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Akademi JavaScript merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Mencipta Proksi”?

Balut objek untuk memintas operasi. Anda berlatih Akademi JavaScript menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Akademi JavaScript?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Akademi JavaScript di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 4.

Berapa lamakah pelajaran “Mencipta Proksi” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Akademi JavaScript ini?

Ya. Setiap pelajaran Akademi JavaScript menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

  1. Mencipta Proksi
  2. Perangkap get dan set
  3. API Reflect
  4. Kes Penggunaan Praktikal Proksi
← Kembali ke Akademi JavaScript