Cara deep freeze objek di javascript

Saat bekerja dengan nilai dan objek dalam JavaScript, terkadang Anda mungkin perlu membatasi apa yang dapat dilakukan dengannya untuk mencegah perubahan pada objek konfigurasi di seluruh aplikasi, objek keadaan, atau konstanta global

Fungsi dengan akses ke data tersebut dapat memodifikasinya secara langsung padahal seharusnya tidak (dan ini juga dapat berasal dari kesalahan yang tidak disengaja yang dibuat oleh pengembang). Selain itu, pengembang lain yang mengerjakan basis kode yang sama (atau menggunakan kode Anda) mungkin membuat perubahan tersebut secara tidak terduga

Syukurlah JavaScript menyediakan beberapa konstruksi untuk menangani situasi semacam ini

Dalam tutorial ini, kita akan membahas konsep kekekalan dan metode objek

const user = {
  name: "Jane",
  surname: "Traveller",
  stayDuration: "3 weeks",
  roomAssigned: 1022,
}

const user = {
  name: "Jane",
  surname: "Traveller",
  stayDuration: "3 weeks",
  roomAssigned: 1022,
}

Memahami kekekalan dalam JavaScript

Singkatnya, membuat objek tidak berubah berarti bahwa perubahan lebih lanjut tidak akan berlaku. Pada dasarnya, statusnya menjadi hanya-baca. Sampai batas tertentu, inilah yang dicapai oleh kata kunci

const user = {
  name: "Jane",
  surname: "Traveller",
  stayDuration: "3 weeks",
  roomAssigned: 1022,
}

const jarOfWine = "full";

// throws error "Uncaught TypeError: Assignment to constant variable."
jarOfWine = "empty";

Namun tentu saja, kita tidak dapat menggunakan

const user = {
  name: "Jane",
  surname: "Traveller",
  stayDuration: "3 weeks",
  roomAssigned: 1022,
}

const user = {
  name: "Jane",
  surname: "Traveller",
  stayDuration: "3 weeks",
  roomAssigned: 1022,
}

Primitif vs. objek

Kumpulan tipe data pertama adalah nilai yang hanya terdiri dari satu item. Ini termasuk primitif seperti string atau angka yang tidak dapat diubah

let nextGame = "Word Duel";

// change to "Word Dual"? Doesn't stick.
nextGame[7] = “a”;

nextGame; // still "Word Duel"

// Of course, if we'd declared nextGame with `const`, then we couldn't reassign it.
nextGame = "Word Dual";

nextGame; // now "Word Dual"

Saat kami menyalin tipe primitif ini, kami menyalin nilai

const jarOfWine = "full";

const emptyJar = jarOfWine; // both jars are now 'full'

Kedua variabel,

const guest = user;

const guest = user;

Saat Anda mendeklarasikan objek, seperti pada kode berikut, variabel

const guest = user;

const user = {
  name: "Jane",
  surname: "Traveller",
  stayDuration: "3 weeks",
  roomAssigned: 1022,
}

Ini seperti menuliskan alamat gua yang berisi tumpukan emas Anda. Alamatnya bukan gua. Jadi, saat kami mencoba menyalin objek menggunakan metode penetapan yang sama seperti saat kami menyalin string, kami akhirnya hanya menyalin referensi atau alamat dan kami tidak memiliki dua objek terpisah

const guest = user;

Memodifikasi

const guest = user;

const guest = user;

guest.name = "John";

// now both user and guest look like this:
{
  name: "John",
  surname: "Traveller",
  stayDuration: "3 weeks",
  roomAssigned: 1022,
}

Anda biasanya dapat menguji ini dengan metode

const guest = user;

Object.is(user, guest) // returns true

user === guest // returns true

Ini permainan serupa dengan kata kunci

const user = {
  name: "Jane",
  surname: "Traveller",
  stayDuration: "3 weeks",
  roomAssigned: 1022,
}

Ini terjadi ketika kami berhasil memodifikasi properti

const guest = user;

const guest = user;

const user = {
  name: "Jane",
  surname: "Traveller",
  stayDuration: "3 weeks",
  roomAssigned: 1022,
}

guest.name = "John";

Dengan kata lain, apa yang diberikan

const user = {
  name: "Jane",
  surname: "Traveller",
  stayDuration: "3 weeks",
  roomAssigned: 1022,
}

Membatasi perubahan pada properti objek dan seluruh objek

Karena objek dalam JavaScript disalin dengan referensi, selalu ada risiko bahwa referensi yang disalin mengubah objek aslinya. Bergantung pada kasus penggunaan Anda, perilaku seperti itu mungkin tidak diinginkan. Dalam hal ini, mungkin masuk akal untuk "mengunci" objek

(Idealnya, Anda akan membuat salinan objek Anda dan memodifikasinya, bukan objek aslinya. Meskipun sebagian besar mekanisme penyalinan atau kloning dangkal, jika Anda bekerja dengan objek bersarang dalam, Anda pasti menginginkan kloning dalam. )

JavaScript menyediakan tiga metode yang melakukan berbagai tingkat pembatasan akses ke objek. Ini termasuk

guest.name = "John";

// now both user and guest look like this:
{
  name: "John",
  surname: "Traveller",
  stayDuration: "3 weeks",
  roomAssigned: 1022,
}

guest.name = "John";

// now both user and guest look like this:
{
  name: "John",
  surname: "Traveller",
  stayDuration: "3 weeks",
  roomAssigned: 1022,
}

guest.name = "John";

// now both user and guest look like this:
{
  name: "John",
  surname: "Traveller",
  stayDuration: "3 weeks",
  roomAssigned: 1022,
}

Lebih dari 200 ribu pengembang menggunakan LogRocket untuk menciptakan pengalaman digital yang lebih baik

guest.name = "John";

// now both user and guest look like this:
{
  name: "John",
  surname: "Traveller",
  stayDuration: "3 weeks",
  roomAssigned: 1022,
}

5 dan

guest.name = "John";

// now both user and guest look like this:
{
  name: "John",
  surname: "Traveller",
  stayDuration: "3 weeks",
  roomAssigned: 1022,
}

6 bendera properti

Namun, sebelum kita melanjutkan, mari telusuri beberapa konsep dasar di balik mekanisme yang membatasi akses ke properti. Secara khusus, kami tertarik pada bendera properti, seperti

guest.name = "John";

// now both user and guest look like this:
{
  name: "John",
  surname: "Traveller",
  stayDuration: "3 weeks",
  roomAssigned: 1022,
}

guest.name = "John";

// now both user and guest look like this:
{
  name: "John",
  surname: "Traveller",
  stayDuration: "3 weeks",
  roomAssigned: 1022,
}

Anda biasanya dapat memeriksa nilai flag ini saat menggunakan metode

guest.name = "John";

// now both user and guest look like this:
{
  name: "John",
  surname: "Traveller",
  stayDuration: "3 weeks",
  roomAssigned: 1022,
}

Object.is(user, guest) // returns true

user === guest // returns true

const hunanProvince = {
  typeOfWine: "Emperor's Smile",
};

Object.getOwnPropertyDescriptors(hunanProvince);

// returns
{
  typeOfWine: {
    value: "Emperor's Smile",
    writable: true,
    enumerable: true,
    configurable: true
  },
}

Meskipun kita biasanya lebih mementingkan nilai sebenarnya dari properti kita saat bekerja dengan objek JavaScript, properti memiliki atribut lain selain atribut

Object.is(user, guest) // returns true

user === guest // returns true

Ini termasuk atribut

Object.is(user, guest) // returns true

user === guest // returns true

guest.name = "John";

// now both user and guest look like this:
{
  name: "John",
  surname: "Traveller",
  stayDuration: "3 weeks",
  roomAssigned: 1022,
}

guest.name = "John";

// now both user and guest look like this:
{
  name: "John",
  surname: "Traveller",
  stayDuration: "3 weeks",
  roomAssigned: 1022,
}

Object.is(user, guest) // returns true

user === guest // returns true

Bendera

guest.name = "John";

// now both user and guest look like this:
{
  name: "John",
  surname: "Traveller",
  stayDuration: "3 weeks",
  roomAssigned: 1022,
}

guest.name = "John";

// now both user and guest look like this:
{
  name: "John",
  surname: "Traveller",
  stayDuration: "3 weeks",
  roomAssigned: 1022,
}

guest.name = "John";

// now both user and guest look like this:
{
  name: "John",
  surname: "Traveller",
  stayDuration: "3 weeks",
  roomAssigned: 1022,
}

Object.is(user, guest) // returns true

user === guest // returns true

Lalu ada

guest.name = "John";

// now both user and guest look like this:
{
  name: "John",
  surname: "Traveller",
  stayDuration: "3 weeks",
  roomAssigned: 1022,
}

Object.is(user, guest) // returns true

user === guest // returns true

Jika

guest.name = "John";

// now both user and guest look like this:
{
  name: "John",
  surname: "Traveller",
  stayDuration: "3 weeks",
  roomAssigned: 1022,
}

guest.name = "John";

guest.name = "John";

// now both user and guest look like this:
{
  name: "John",
  surname: "Traveller",
  stayDuration: "3 weeks",
  roomAssigned: 1022,
}

Object.is(user, guest) // returns true

user === guest // returns true

guest.name = "John";

// now both user and guest look like this:
{
  name: "John",
  surname: "Traveller",
  stayDuration: "3 weeks",
  roomAssigned: 1022,
}

guest.name = "John";

Object.defineProperty(hunanProvince, "capital", {
  value: "Caiyi Town",
  writable: true,
});

hunanProvince.capital = "Possibly Gusu";

Object.getOwnPropertyDescriptors(hunanProvince);
// now returns
{
  typeOfWine: {
    value: "Emperor's Smile",
    writable: true,
    enumerable: true,
    configurable: true
  },
  capital: {
    value: "Possibly Gusu",
    writable: true,
    enumerable :false,
    configurable: false
  },
}

Perhatikan bahwa

Object.is(user, guest) // returns true

user === guest // returns true

guest.name = "John";

// now both user and guest look like this:
{
  name: "John",
  surname: "Traveller",
  stayDuration: "3 weeks",
  roomAssigned: 1022,
}

guest.name = "John";

const hunanProvince = {
  typeOfWine: "Emperor's Smile",
};

Object.getOwnPropertyDescriptors(hunanProvince);

// returns
{
  typeOfWine: {
    value: "Emperor's Smile",
    writable: true,
    enumerable: true,
    configurable: true
  },
}

const hunanProvince = {
  typeOfWine: "Emperor's Smile",
};

Object.getOwnPropertyDescriptors(hunanProvince);

// returns
{
  typeOfWine: {
    value: "Emperor's Smile",
    writable: true,
    enumerable: true,
    configurable: true
  },
}

guest.name = "John";

guest.name = "John";

// now both user and guest look like this:
{
  name: "John",
  surname: "Traveller",
  stayDuration: "3 weeks",
  roomAssigned: 1022,
}

Object.is(user, guest) // returns true

user === guest // returns true

Kami juga diizinkan untuk mengubah

guest.name = "John";

// now both user and guest look like this:
{
  name: "John",
  surname: "Traveller",
  stayDuration: "3 weeks",
  roomAssigned: 1022,
}

Object.is(user, guest) // returns true

user === guest // returns true

guest.name = "John";

guest.name = "John";

Object.is(user, guest) // returns true

user === guest // returns true

guest.name = "John";

// now both user and guest look like this:
{
  name: "John",
  surname: "Traveller",
  stayDuration: "3 weeks",
  roomAssigned: 1022,
}

guest.name = "John";

// now both user and guest look like this:
{
  name: "John",
  surname: "Traveller",
  stayDuration: "3 weeks",
  roomAssigned: 1022,
}

guest.name = "John";

let nextGame = "Word Duel";

// change to "Word Dual"? Doesn't stick.
nextGame[7] = “a”;

nextGame; // still "Word Duel"

// Of course, if we'd declared nextGame with `const`, then we couldn't reassign it.
nextGame = "Word Dual";

nextGame; // now "Word Dual"

Sementara bendera ini digunakan di sini pada tingkat properti, metode seperti

guest.name = "John";

// now both user and guest look like this:
{
  name: "John",
  surname: "Traveller",
  stayDuration: "3 weeks",
  roomAssigned: 1022,
}

guest.name = "John";

// now both user and guest look like this:
{
  name: "John",
  surname: "Traveller",
  stayDuration: "3 weeks",
  roomAssigned: 1022,
}

Artikel ini menganggap Anda memiliki pengetahuan umum tentang mengapa konsep kekekalan berguna

Namun, jika Anda ingin menggali lebih dalam dan membaca beberapa argumen yang mendukung dan menentangnya, inilah panduan yang sangat berguna (dengan tautan ke sumber daya tambahan) yang membahas topik tersebut. Itu

Menggunakan const user = { name: "Jane", surname: "Traveller", stayDuration: "3 weeks", roomAssigned: 1022, } _4 vs. const user = { name: "Jane", surname: "Traveller", stayDuration: "3 weeks", roomAssigned: 1022, } 5 untuk kekekalan objek

Sekarang, mari kita lihat metode

Object.defineProperty(hunanProvince, "capital", {
  value: "Caiyi Town",
  writable: true,
});

hunanProvince.capital = "Possibly Gusu";

Object.getOwnPropertyDescriptors(hunanProvince);
// now returns
{
  typeOfWine: {
    value: "Emperor's Smile",
    writable: true,
    enumerable: true,
    configurable: true
  },
  capital: {
    value: "Possibly Gusu",
    writable: true,
    enumerable :false,
    configurable: false
  },
}

Object.defineProperty(hunanProvince, "capital", {
  value: "Caiyi Town",
  writable: true,
});

hunanProvince.capital = "Possibly Gusu";

Object.getOwnPropertyDescriptors(hunanProvince);
// now returns
{
  typeOfWine: {
    value: "Emperor's Smile",
    writable: true,
    enumerable: true,
    configurable: true
  },
  capital: {
    value: "Possibly Gusu",
    writable: true,
    enumerable :false,
    configurable: false
  },
}

Lebih banyak artikel bagus dari LogRocket

• Jangan lewatkan momen dengan The Replay, buletin yang dikurasi dari LogRocket
• Pelajari bagaimana Galileo dari LogRocket mengatasi kebisingan untuk secara proaktif menyelesaikan masalah di aplikasi Anda
• Gunakan useEffect React untuk mengoptimalkan kinerja aplikasi Anda
• Beralih di antara beberapa versi Node
• Temukan cara menganimasikan aplikasi React Anda dengan AnimXYZ
• Jelajahi Tauri, kerangka kerja baru untuk membangun binari
• Bandingkan NestJS vs. Cepat. js

Menggunakan const user = { name: "Jane", surname: "Traveller", stayDuration: "3 weeks", roomAssigned: 1022, } _4

Saat kami membekukan objek menggunakan

const user = {
  name: "Jane",
  surname: "Traveller",
  stayDuration: "3 weeks",
  roomAssigned: 1022,
}

guest.name = "John";

Mari kita telusuri sebuah contoh. Inilah dua objek yang akan kita kerjakan

let nextGame = "Word Duel";

// change to "Word Dual"? Doesn't stick.
nextGame[7] = “a”;

nextGame; // still "Word Duel"

// Of course, if we'd declared nextGame with `const`, then we couldn't reassign it.
nextGame = "Word Dual";

nextGame; // now "Word Dual"

Sekarang, mari ubah properti di objek pertama,

let nextGame = "Word Duel";

// change to "Word Dual"? Doesn't stick.
nextGame[7] = “a”;

nextGame; // still "Word Duel"

// Of course, if we'd declared nextGame with `const`, then we couldn't reassign it.
nextGame = "Word Dual";

nextGame; // now "Word Dual"

let nextGame = "Word Duel";

// change to "Word Dual"? Doesn't stick.
nextGame[7] = “a”;

nextGame; // still "Word Duel"

// Of course, if we'd declared nextGame with `const`, then we couldn't reassign it.
nextGame = "Word Dual";

nextGame; // now "Word Dual"

Jadi, objek aslinya sekarang terlihat seperti ini

let nextGame = "Word Duel";

// change to "Word Dual"? Doesn't stick.
nextGame[7] = “a”;

nextGame; // still "Word Duel"

// Of course, if we'd declared nextGame with `const`, then we couldn't reassign it.
nextGame = "Word Dual";

nextGame; // now "Word Dual"

Tentu saja, ini adalah perilaku yang diharapkan. Objek dapat diubah secara default. Sekarang, mari kita coba membekukan sebuah objek. Kami akan bekerja dengan

let nextGame = "Word Duel";

// change to "Word Dual"? Doesn't stick.
nextGame[7] = “a”;

nextGame; // still "Word Duel"

// Of course, if we'd declared nextGame with `const`, then we couldn't reassign it.
nextGame = "Word Dual";

nextGame; // now "Word Dual"

let nextGame = "Word Duel";

// change to "Word Dual"? Doesn't stick.
nextGame[7] = “a”;

nextGame; // still "Word Duel"

// Of course, if we'd declared nextGame with `const`, then we couldn't reassign it.
nextGame = "Word Dual";

nextGame; // now "Word Dual"

Untuk menguji apakah suatu objek dibekukan, JavaScript menyediakan metode

let nextGame = "Word Duel";

// change to "Word Dual"? Doesn't stick.
nextGame[7] = “a”;

nextGame; // still "Word Duel"

// Of course, if we'd declared nextGame with `const`, then we couldn't reassign it.
nextGame = "Word Dual";

nextGame; // now "Word Dual"

let nextGame = "Word Duel";

// change to "Word Dual"? Doesn't stick.
nextGame[7] = “a”;

nextGame; // still "Word Duel"

// Of course, if we'd declared nextGame with `const`, then we couldn't reassign it.
nextGame = "Word Dual";

nextGame; // now "Word Dual"

Sekarang, meskipun kami mencoba memodifikasinya seperti berikut, tidak ada efeknya

let nextGame = "Word Duel";

// change to "Word Dual"? Doesn't stick.
nextGame[7] = “a”;

nextGame; // still "Word Duel"

// Of course, if we'd declared nextGame with `const`, then we couldn't reassign it.
nextGame = "Word Dual";

nextGame; // now "Word Dual"

Namun, seperti yang akan segera kita lihat, kita akan mengalami masalah saat mulai menggunakan objek bersarang. Seperti kloning objek, pembekuan juga bisa dangkal atau dalam

Mari buat objek baru dari

let nextGame = "Word Duel";

// change to "Word Dual"? Doesn't stick.
nextGame[7] = “a”;

nextGame; // still "Word Duel"

// Of course, if we'd declared nextGame with `const`, then we couldn't reassign it.
nextGame = "Word Dual";

nextGame; // now "Word Dual"

let nextGame = "Word Duel";

// change to "Word Dual"? Doesn't stick.
nextGame[7] = “a”;

nextGame; // still "Word Duel"

// Of course, if we'd declared nextGame with `const`, then we couldn't reassign it.
nextGame = "Word Dual";

nextGame; // now "Word Dual"

let nextGame = "Word Duel";

// change to "Word Dual"? Doesn't stick.
nextGame[7] = “a”;

nextGame; // still "Word Duel"

// Of course, if we'd declared nextGame with `const`, then we couldn't reassign it.
nextGame = "Word Dual";

nextGame; // now "Word Dual"

Anda akan melihat bahwa meskipun kita membekukannya, kita masih bisa membuat perubahan pada array di objek bersarang

let nextGame = "Word Duel";

// change to "Word Dual"? Doesn't stick.
nextGame[7] = “a”;

nextGame; // still "Word Duel"

// Of course, if we'd declared nextGame with `const`, then we couldn't reassign it.
nextGame = "Word Dual";

nextGame; // now "Word Dual"

Array bilangan genap sekarang memiliki elemen pertamanya yang dimodifikasi dari

let nextGame = "Word Duel";

// change to "Word Dual"? Doesn't stick.
nextGame[7] = “a”;

nextGame; // still "Word Duel"

// Of course, if we'd declared nextGame with `const`, then we couldn't reassign it.
nextGame = "Word Dual";

nextGame; // now "Word Dual"

let nextGame = "Word Duel";

// change to "Word Dual"? Doesn't stick.
nextGame[7] = “a”;

nextGame; // still "Word Duel"

// Of course, if we'd declared nextGame with `const`, then we couldn't reassign it.
nextGame = "Word Dual";

nextGame; // now "Word Dual"

let nextGame = "Word Duel";

// change to "Word Dual"? Doesn't stick.
nextGame[7] = “a”;

nextGame; // still "Word Duel"

// Of course, if we'd declared nextGame with `const`, then we couldn't reassign it.
nextGame = "Word Dual";

nextGame; // now "Word Dual"

Jika Anda telah menguji kode Anda di konsol browser, kemungkinan besar kode tersebut gagal secara diam-diam dan tidak menimbulkan kesalahan apa pun. Jika Anda ingin kesalahan menjadi lebih eksplisit, coba gabungkan kode Anda dalam Ekspresi Fungsi yang Segera Dipanggil (IIFE) dan aktifkan mode

let nextGame = "Word Duel";

// change to "Word Dual"? Doesn't stick.
nextGame[7] = “a”;

nextGame; // still "Word Duel"

// Of course, if we'd declared nextGame with `const`, then we couldn't reassign it.
nextGame = "Word Dual";

nextGame; // now "Word Dual"

const jarOfWine = "full";

const emptyJar = jarOfWine; // both jars are now 'full'

Kode di atas sekarang harus membuang

let nextGame = "Word Duel";

// change to "Word Dual"? Doesn't stick.
nextGame[7] = “a”;

nextGame; // still "Word Duel"

// Of course, if we'd declared nextGame with `const`, then we couldn't reassign it.
nextGame = "Word Dual";

nextGame; // now "Word Dual"

const jarOfWine = "full";

const emptyJar = jarOfWine; // both jars are now 'full'

Sekarang, bagaimana kita membuat seluruh objek kita, termasuk top-level (referensi properti langsung) dan properti bersarang, dibekukan?

Seperti yang telah kita catat, pembekuan hanya diterapkan pada properti level teratas dalam objek, jadi

let nextGame = "Word Duel";

// change to "Word Dual"? Doesn't stick.
nextGame[7] = “a”;

nextGame; // still "Word Duel"

// Of course, if we'd declared nextGame with `const`, then we couldn't reassign it.
nextGame = "Word Dual";

nextGame; // now "Word Dual"

const jarOfWine = "full";

const emptyJar = jarOfWine; // both jars are now 'full'

Sekarang, upaya untuk mengubah properti bersarang tidak berhasil

Perhatikan bahwa sementara membekukan pada dasarnya menjaga terhadap perubahan objek, itu memungkinkan penugasan ulang variabel

Menggunakan guest.name = "John"; // now both user and guest look like this: { name: "John", surname: "Traveller", stayDuration: "3 weeks", roomAssigned: 1022, } _3

Dengan

guest.name = "John";

// now both user and guest look like this:
{
  name: "John",
  surname: "Traveller",
  stayDuration: "3 weeks",
  roomAssigned: 1022,
}

const user = {
  name: "Jane",
  surname: "Traveller",
  stayDuration: "3 weeks",
  roomAssigned: 1022,
}

Metode

const user = {
  name: "Jane",
  surname: "Traveller",
  stayDuration: "3 weeks",
  roomAssigned: 1022,
}

guest.name = "John";

// now both user and guest look like this:
{
  name: "John",
  surname: "Traveller",
  stayDuration: "3 weeks",
  roomAssigned: 1022,
}

guest.name = "John";

guest.name = "John";

// now both user and guest look like this:
{
  name: "John",
  surname: "Traveller",
  stayDuration: "3 weeks",
  roomAssigned: 1022,
}

Object.is(user, guest) // returns true

user === guest // returns true

const jarOfWine = "full";

const emptyJar = jarOfWine; // both jars are now 'full'

Berikut contoh lain dengan array

const jarOfWine = "full";

const emptyJar = jarOfWine; // both jars are now 'full'

Penyegelan juga mencegah pendefinisian ulang properti dengan menggunakan

let nextGame = "Word Duel";

// change to "Word Dual"? Doesn't stick.
nextGame[7] = “a”;

nextGame; // still "Word Duel"

// Of course, if we'd declared nextGame with `const`, then we couldn't reassign it.
nextGame = "Word Dual";

nextGame; // now "Word Dual"

let nextGame = "Word Duel";

// change to "Word Dual"? Doesn't stick.
nextGame[7] = “a”;

nextGame; // still "Word Duel"

// Of course, if we'd declared nextGame with `const`, then we couldn't reassign it.
nextGame = "Word Dual";

nextGame; // now "Word Dual"

Ingat, bagaimanapun, bahwa jika

guest.name = "John";

// now both user and guest look like this:
{
  name: "John",
  surname: "Traveller",
  stayDuration: "3 weeks",
  roomAssigned: 1022,
}

Object.is(user, guest) // returns true

user === guest // returns true

guest.name = "John";

const jarOfWine = "full";

const emptyJar = jarOfWine; // both jars are now 'full'

Penyegelan perubahan lain yang tidak mungkin dilakukan adalah mengubah properti data normal menjadi pengakses (yaitu, pengambil dan penyetel)

const jarOfWine = "full";

const emptyJar = jarOfWine; // both jars are now 'full'

Kebalikannya juga demikian. Anda tidak dapat mengubah pengakses menjadi properti data. Sama seperti pembekuan, penyegelan objek mencegah prototipenya berubah

const jarOfWine = "full";

const emptyJar = jarOfWine; // both jars are now 'full'

Sekali lagi, seperti pembekuan, perilaku default di sini adalah penyegelan dangkal. Jadi, Anda dapat memilih untuk menyegel objek dengan cara yang sama seperti Anda dapat membekukannya

const jarOfWine = "full";

const emptyJar = jarOfWine; // both jars are now 'full'

Kami telah memodifikasi fungsi

let nextGame = "Word Duel";

// change to "Word Dual"? Doesn't stick.
nextGame[7] = “a”;

nextGame; // still "Word Duel"

// Of course, if we'd declared nextGame with `const`, then we couldn't reassign it.
nextGame = "Word Dual";

nextGame; // now "Word Dual"

const jarOfWine = "full";

const emptyJar = jarOfWine; // both jars are now 'full'

Sekarang, objek bersarang kita juga disegel

Menggunakan guest.name = "John"; // now both user and guest look like this: { name: "John", surname: "Traveller", stayDuration: "3 weeks", roomAssigned: 1022, } _4

Metode JavaScript lain yang secara khusus dapat mencegah penambahan properti baru adalah metode

let nextGame = "Word Duel";

// change to "Word Dual"? Doesn't stick.
nextGame[7] = “a”;

nextGame; // still "Word Duel"

// Of course, if we'd declared nextGame with `const`, then we couldn't reassign it.
nextGame = "Word Dual";

nextGame; // now "Word Dual"

const user = {
  name: "Jane",
  surname: "Traveller",
  stayDuration: "3 weeks",
  roomAssigned: 1022,
}

Karena yang kami lakukan hanyalah mencegah penambahan properti baru, properti yang sudah ada jelas dapat dimodifikasi dan bahkan dihapus

const user = {
  name: "Jane",
  surname: "Traveller",
  stayDuration: "3 weeks",
  roomAssigned: 1022,
}

Sesuatu yang perlu diperhatikan adalah bahwa properti

let nextGame = "Word Duel";

// change to "Word Dual"? Doesn't stick.
nextGame[7] = “a”;

nextGame; // still "Word Duel"

// Of course, if we'd declared nextGame with `const`, then we couldn't reassign it.
nextGame = "Word Dual";

nextGame; // now "Word Dual"

const user = {
  name: "Jane",
  surname: "Traveller",
  stayDuration: "3 weeks",
  roomAssigned: 1022,
}

Untuk menguji apakah suatu objek dapat diperluas, cukup gunakan metode

let nextGame = "Word Duel";

// change to "Word Dual"? Doesn't stick.
nextGame[7] = “a”;

nextGame; // still "Word Duel"

// Of course, if we'd declared nextGame with `const`, then we couldn't reassign it.
nextGame = "Word Dual";

nextGame; // now "Word Dual"

const user = {
  name: "Jane",
  surname: "Traveller",
  stayDuration: "3 weeks",
  roomAssigned: 1022,
}

Sama seperti saat kita secara manual menyetel

guest.name = "John";

// now both user and guest look like this:
{
  name: "John",
  surname: "Traveller",
  stayDuration: "3 weeks",
  roomAssigned: 1022,
}

guest.name = "John";

// now both user and guest look like this:
{
  name: "John",
  surname: "Traveller",
  stayDuration: "3 weeks",
  roomAssigned: 1022,
}

guest.name = "John";

const user = { name: "Jane", surname: "Traveller", stayDuration: "3 weeks", roomAssigned: 1022, } 4 dan const user = { name: "Jane", surname: "Traveller", stayDuration: "3 weeks", roomAssigned: 1022, } 5 kasus penggunaan dan masalah kinerja

Singkatnya,

guest.name = "John";

// now both user and guest look like this:
{
  name: "John",
  surname: "Traveller",
  stayDuration: "3 weeks",
  roomAssigned: 1022,
}

guest.name = "John";

// now both user and guest look like this:
{
  name: "John",
  surname: "Traveller",
  stayDuration: "3 weeks",
  roomAssigned: 1022,
}

Salah satu contoh yang disebutkan sebelumnya adalah penggunaan objek global untuk manajemen status aplikasi. Anda mungkin ingin membuat objek asli tetap tidak berubah dan membuat perubahan pada salinan, terutama jika Anda ingin melacak perubahan status dan mengembalikannya

Pembekuan bertahan terhadap kode yang mencoba mengubah objek yang seharusnya tidak dimodifikasi secara langsung

Objek yang dibekukan atau disegel juga dapat mencegah penambahan properti baru yang diperkenalkan karena salah ketik, seperti nama properti yang salah ketik

Metode ini juga membantu saat melakukan debug karena pembatasan yang ditempatkan pada objek dapat membantu mempersempit kemungkinan sumber bug

Yang mengatakan, itu bisa menjadi sumber sakit kepala bagi siapa saja yang menggunakan kode Anda karena pada dasarnya tidak ada perbedaan fisik antara objek beku dan non-beku

Satu-satunya cara untuk mengetahui dengan pasti bahwa suatu benda dibekukan atau disegel adalah dengan menggunakan metode ________6______38 atau

let nextGame = "Word Duel";

// change to "Word Dual"? Doesn't stick.
nextGame[7] = “a”;

nextGame; // still "Word Duel"

// Of course, if we'd declared nextGame with `const`, then we couldn't reassign it.
nextGame = "Word Dual";

nextGame; // now "Word Dual"

adalah salah satu fitur yang

let nextGame = "Word Duel";

// change to "Word Dual"? Doesn't stick.
nextGame[7] = “a”;

nextGame; // still "Word Duel"

// Of course, if we'd declared nextGame with `const`, then we couldn't reassign it.
nextGame = "Word Dual";

nextGame; // now "Word Dual"

Jika Anda bertanya-tanya apa - jika ada - biaya kinerja yang ada saat menggunakan salah satu metode yang dibahas di atas, ada beberapa masalah kinerja historis di mesin V8. Namun, ini lebih merupakan bug daripada yang lainnya, dan memang begitu

Antara 2013 dan 2014,

guest.name = "John";

// now both user and guest look like this:
{
  name: "John",
  surname: "Traveller",
  stayDuration: "3 weeks",
  roomAssigned: 1022,
}

guest.name = "John";

// now both user and guest look like this:
{
  name: "John",
  surname: "Traveller",
  stayDuration: "3 weeks",
  roomAssigned: 1022,
}

Ini antara 2015 dan 2019. Ini menunjukkan bahwa kinerja dalam kedua kasus hampir sama di Chrome

Tetap saja, penyegelan atau pembekuan dapat memengaruhi kecepatan enumerasi objek di browser tertentu seperti Safari

Pustaka pihak ketiga untuk menangani kekekalan

Ada beberapa cara untuk menangani kekekalan dalam JavaScript. Meskipun metode yang dibahas di atas dapat berguna untuk dimiliki, kemungkinan besar Anda akan menggunakan perpustakaan untuk aplikasi substansial apa pun

Contohnya termasuk Immer dan Immutable. js. Dengan Immer, Anda menggunakan tipe data JavaScript yang sudah Anda ketahui. Namun, meskipun tidak berubah. js memperkenalkan struktur data baru, ini bisa menjadi opsi yang lebih cepat

Kesimpulan

JavaScript menyediakan metode seperti

guest.name = "John";

// now both user and guest look like this:
{
  name: "John",
  surname: "Traveller",
  stayDuration: "3 weeks",
  roomAssigned: 1022,
}

guest.name = "John";

// now both user and guest look like this:
{
  name: "John",
  surname: "Traveller",
  stayDuration: "3 weeks",
  roomAssigned: 1022,
}

Namun, seperti kloning, karena objek disalin dengan referensi, pembekuan biasanya dangkal. Oleh karena itu, Anda dapat mengimplementasikan fungsi deep freeze atau deep seal dasar Anda sendiri atau, bergantung pada kasus penggunaan Anda, manfaatkan pustaka seperti Immer atau Immutable. js

LogRocket. Debug kesalahan JavaScript lebih mudah dengan memahami konteksnya

Kode debug selalu merupakan tugas yang membosankan. Tetapi semakin Anda memahami kesalahan Anda, semakin mudah untuk memperbaikinya

LogRocket memungkinkan Anda memahami kesalahan ini dengan cara baru dan unik. Solusi pemantauan frontend kami melacak keterlibatan pengguna dengan frontend JavaScript Anda untuk memberi Anda kemampuan untuk mengetahui dengan tepat apa yang dilakukan pengguna yang menyebabkan kesalahan

LogRocket merekam log konsol, waktu muat halaman, jejak tumpukan, permintaan/respons jaringan yang lambat dengan header + badan, metadata browser, dan log khusus. Memahami dampak kode JavaScript Anda tidak akan pernah semudah ini

Bagaimana cara membekukan objek dalam JavaScript?

Bagaimana cara membekukan objek bersarang di JavaScript?

Apa perbedaan antara pembekuan objek dan pembekuan dalam?

Apa perbedaan antara pembekuan objek () vs const?