JavaScript Academy · Pelajaran

Objek yang Dapat Dipindahkan

Pindahkan data secara efisien tanpa menyalinnya.

Objek yang Dapat Dipindahkan adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar JavaScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus JavaScript Academy mencakup 4 pelajaran total.

Biaya Kloning

Kloning terstruktur menyalin data bita demi bita. Untuk buffer besar (gambar, audio, larik besar), penyalinan ini lambat dan menggandakan penggunaan memori. Objek yang dapat ditransfer mengatasinya dengan memindahkan kepemilikan, bukan menyalin.

Yang Dapat Ditransfer

Hanya jenis objek tertentu yang dapat ditransfer, terutama ArrayBuffer. Jenis lainnya mencakup MessagePort, ImageBitmap, dan OffscreenCanvas.

ArrayBuffer — memori biner mentah
MessagePort — titik akhir saluran
ImageBitmap — data gambar yang telah didekodekan

Daftar Transfer

postMessage menerima argumen kedua berupa daftar objek yang dapat ditransfer. Objek dalam daftar tersebut dipindahkan, bukan disalin.

const buffer = new ArrayBuffer(1024 * 1024); // 1 MB
worker.postMessage(buffer, [buffer]); // transfer it

Pemindahan Kepemilikan

Setelah ditransfer, pihak pengirim tidak dapat lagi menggunakan buffer; buffer menjadi terlepas (byteLength 0). Pihak penerima kini memiliki memori dasar yang sama, tanpa penyalinan.

const buffer = new ArrayBuffer(8);
worker.postMessage(buffer, [buffer]);
console.log(buffer.byteLength); // 0 - now detached

Mentransfer Larik Bertipe

Anda mentransfer ArrayBuffer yang mendasari larik bertipe melalui properti .buffer. view itu sendiri tidak dapat ditransfer, tetapi buffer-nya dapat.

const data = new Float64Array(100000);
worker.postMessage(data, [data.buffer]);
// data is now detached on this side.

Menerima Transfer

Pihak penerima membaca objek yang ditransfer dari event.data persis seperti pesan yang dikloning. Perbedaannya semata-mata bahwa tidak ada penyalinan yang terjadi.

// worker.js
self.onmessage = (e) => {
  const buffer = e.data; // we now own this memory
  const view = new Uint8Array(buffer);
  view[0] = 255;
};

Mengirimkan Kembali Hasil

worker dapat mentransfer kembali buffer setelah pemrosesan, sekali lagi tanpa penyalinan, sehingga kepemilikan kembali ke utas utama.

// worker.js
self.onmessage = (e) => {
  const buffer = e.data;
  // ...process the bytes...
  self.postMessage(buffer, [buffer]); // transfer back
};

Performa Transfer dan Kloning

Untuk beberapa kilobita, perbedaannya dapat diabaikan. Untuk data biner berukuran megabita, transfer jauh lebih cepat dan mencegah lonjakan memori. Gunakan transfer untuk buffer besar.

Menghindari Galat Penggunaan Setelah Transfer

Kesalahan umum adalah membaca buffer setelah mentransfernya. Selalu perlakukan buffer sebagai sudah tidak ada setelah buffer muncul dalam daftar transfer.

worker.postMessage(buffer, [buffer]);
// BUG: buffer is detached here; this reads zero length.
// const len = buffer.byteLength; // 0

Menggabungkan Data yang Dikloning dan Ditransfer

Anda dapat mengirim objek yang berisi buffer dan hanya mentransfer buffer tersebut. Objek dikloning; buffer yang tercantum dipindahkan.

const msg = { type: 'frame', pixels: buffer };
worker.postMessage(msg, [buffer]);
// msg.type is cloned; buffer is transferred.

Kapan Menggunakan Transfer

Gunakan objek yang dapat ditransfer untuk pemrosesan gambar/audio/video, perhitungan numerik besar, dan pipeline apa pun yang memindahkan data biner besar antar-utas. Untuk data kecil bergaya JSON, kloning biasa lebih sederhana dan sudah memadai.

Pemeriksaan Singkat

Uji pemahaman Anda tentang objek yang dapat ditransfer.

Rangkuman

Anda telah mempelajari objek yang dapat ditransfer:

Berikan daftar transfer sebagai argumen kedua untuk postMessage.
ArrayBuffer dan beberapa jenis lainnya dipindahkan, bukan disalin.
buffer milik pengirim menjadi terlepas setelahnya.
Transfer larik bertipe melalui .buffer-nya.
Gunakan cara ini untuk data biner besar; gunakan kloning untuk data kecil.

Berikutnya, kasus penggunaan dan keterbatasan worker.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Objek yang Dapat Dipindahkan” gratis?

Ya — teks lengkap “Objek yang Dapat Dipindahkan” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus JavaScript Academy, upgrade ke CoddyKit PRO. Kursus JavaScript Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Objek yang Dapat Dipindahkan”?

Pindahkan data secara efisien tanpa menyalinnya. Kamu berlatih JavaScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai JavaScript Academy?

Tidak diperlukan pengalaman sebelumnya. JavaScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Objek yang Dapat Dipindahkan” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran JavaScript Academy ini?

Ya. Setiap pelajaran JavaScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke JavaScript Academy