Cara menggunakan objek pencairan javascript

Anda dapat menggunakan mode ketat di semua program Anda. Ini membantu Anda menulis kode pembersih, seperti mencegah Anda menggunakan variabel yang tidak dideklarasikan

"use strict" hanyalah ekspresi string. Browser lama tidak akan membuat kesalahan jika mereka tidak memahaminya

Pada artikel ini, kita akan melihat apa masalah objek di JavaScript dan mengapa kita perlu "membekukan" objek di JavaScript. Kita juga akan mempelajari cara "deep-freeze" objek dalam JavaScript

Masalah dengan Objek di JavaScript. Kita semua tahu bahwa objek JavaScript bisa berubah. Bagaimana kita bisa membuatnya tidak berubah? . Kami masih dapat menetapkan kembali properti dan mengubah nilainya

Contoh 1

HTML

<script>

  const obj1 = { key1: "val1", key2: "val2", key3: "val3" };

"Before Change"
{
key1: "val1",
key2: "val2",
key3: "val3"
}
"After Change"
{
key1: "val1",
key2: "val2",
key3: "val3"
}

"Before Change"
{
key1: "val1",
key2: "val2",
key3: "val3"
}
"After Change"
{
key1: "val1",
key2: "val2",
key3: "val3"
}

"Before Change"
{
key1: "val1",
key2: "val2",
key3: "val3"
}
"After Change"
{
key1: "val1",
key2: "val2",
key3: "val3"
}

"Before Change"
{
key1: "val1",
key2: "val2",
key3: "val3"
}
"After Change"
{
key1: "val1",
key2: "val2",
key3: "val3"
}

"Before Change"
{
key1: "val1",
key2: "val2",
key3: "val3"
}
"After Change"
{
key1: "val1",
key2: "val2",
key3: "val3"
}

"Before Change"
{
key1: "val1",
key2: "val2",
key3: "val3"
}
"After Change"
{
key1: "val1",
key2: "val2",
key3: "val3"
}

Keluaran

"Before Change"
{
 key1: "val1",
 key2: "val2",
 key3: "val3"
}
"After Change"
{
 key1: "val",
 key2: "val2",
 key3: "val3"
}

Bagaimana cara memperbaiki masalah di atas?

Kita bisa menggunakan Object. metode freeze() yang disediakan oleh JavaScript untuk mencegah penambahan properti baru dengan memperbarui dan menghapus properti yang ada.  

Contoh 2

JavaScript

"Before Change"
{
 key1: "val1",
 key2: "val2",
 key3: ["val3", "val4", "val5"]
}
"After Change"
{
 key1: "val1",
 key2: "val2",
 key3: ["val", "val", "val"]
}

"Before Change"
{
 key1: "val1",
 key2: "val2",
 key3: ["val3", "val4", "val5"]
}
"After Change"
{
 key1: "val1",
 key2: "val2",
 key3: ["val", "val", "val"]
}

"Before Change"
{
 key1: "val1",
 key2: "val2",
 key3: ["val3", "val4", "val5"]
}
"After Change"
{
 key1: "val1",
 key2: "val2",
 key3: ["val", "val", "val"]
}

"Before Change"
{
 key1: "val1",
 key2: "val2",
 key3: ["val3", "val4", "val5"]
}
"After Change"
{
 key1: "val1",
 key2: "val2",
 key3: ["val", "val", "val"]
}

"Before Change"
{
 key1: "val1",
 key2: "val2",
 key3: ["val3", "val4", "val5"]
}
"After Change"
{
 key1: "val1",
 key2: "val2",
 key3: ["val", "val", "val"]
}

"Before Change"
{
 key1: "val1",
 key2: "val2",
 key3: ["val3", "val4", "val5"]
}
"After Change"
{
 key1: "val1",
 key2: "val2",
 key3: ["val", "val", "val"]
}

"Before Change"
{
 key1: "val1",
 key2: "val2",
 key3: ["val3", "val4", "val5"]
}
"After Change"
{
 key1: "val1",
 key2: "val2",
 key3: ["val", "val", "val"]
}

"Before Change"
{
 key1: "val1",
 key2: "val2",
 key3: ["val3", "val4", "val5"]
}
"After Change"
{
 key1: "val1",
 key2: "val2",
 key3: ["val", "val", "val"]
}

"Before Change"
{
 key1: "val1",
 key2: "val2",
 key3: ["val3", "val4", "val5"]
}
"After Change"
{
 key1: "val1",
 key2: "val2",
 key3: ["val3", "val4", "val5"]
}

"Before Change"
{
 key1: "val1",
 key2: "val2",
 key3: ["val3", "val4", "val5"]
}
"After Change"
{
 key1: "val1",
 key2: "val2",
 key3: ["val3", "val4", "val5"]
}

"Before Change"
{
key1: "val1",
key2: "val2",
key3: "val3"
}
"After Change"
{
key1: "val1",
key2: "val2",
key3: "val3"
}

"Before Change"
{
 key1: "val1",
 key2: "val2",
 key3: ["val3", "val4", "val5"]
}
"After Change"
{
 key1: "val1",
 key2: "val2",
 key3: ["val3", "val4", "val5"]
}

"Before Change"
{
 key1: "val1",
 key2: "val2",
 key3: ["val3", "val4", "val5"]
}
"After Change"
{
 key1: "val1",
 key2: "val2",
 key3: ["val3", "val4", "val5"]
}

"Before Change"
{
 key1: "val1",
 key2: "val2",
 key3: ["val3", "val4", "val5"]
}
"After Change"
{
 key1: "val1",
 key2: "val2",
 key3: ["val3", "val4", "val5"]
}

"Before Change"
{
 key1: "val1",
 key2: "val2",
 key3: ["val3", "val4", "val5"]
}
"After Change"
{
 key1: "val1",
 key2: "val2",
 key3: ["val3", "val4", "val5"]
}

"Before Change"
{
 key1: "val1",
 key2: "val2",
 key3: ["val3", "val4", "val5"]
}
"After Change"
{
 key1: "val1",
 key2: "val2",
 key3: ["val", "val", "val"]
}

"Before Change"
{
 key1: "val1",
 key2: "val2",
 key3: ["val3", "val4", "val5"]
}
"After Change"
{
 key1: "val1",
 key2: "val2",
 key3: ["val3", "val4", "val5"]
}

"Before Change"
{
 key1: "val1",
 key2: "val2",
 key3: ["val3", "val4", "val5"]
}
"After Change"
{
 key1: "val1",
 key2: "val2",
 key3: ["val3", "val4", "val5"]
}

"Before Change"
{
key1: "val1",
key2: "val2",
key3: "val3"
}
"After Change"
{
key1: "val1",
key2: "val2",
key3: "val3"
}

Keluaran

"Before Change"
{
key1: "val1",
key2: "val2",
key3: "val3"
}
"After Change"
{
key1: "val1",
key2: "val2",
key3: "val3"
}

Ini bukan pendekatan terbaik karena hanya membuat objek beku yang dangkal dan jika objek memiliki beberapa objek/array bersarang sebagai properti, objek/array bersarang masih dapat dimodifikasi

Contoh 3

HTML

<script>

  <5

<6<7

<6<9

script0script1

script2

"Before Change"
{
key1: "val1",
key2: "val2",
key3: "val3"
}
"After Change"
{
key1: "val1",
key2: "val2",
key3: "val3"
}

"Before Change"
{
key1: "val1",
key2: "val2",
key3: "val3"
}
"After Change"
{
key1: "val1",
key2: "val2",
key3: "val3"
}

"Before Change"
{
 key1: "val1",
 key2: "val2",
 key3: ["val3", "val4", "val5"]
}
"After Change"
{
 key1: "val1",
 key2: "val2",
 key3: ["val3", "val4", "val5"]
}

  >0

  >2

  >4

"Before Change"
{
key1: "val1",
key2: "val2",
key3: "val3"
}
"After Change"
{
key1: "val1",
key2: "val2",
key3: "val3"
}

"Before Change"
{
key1: "val1",
key2: "val2",
key3: "val3"
}
"After Change"
{
key1: "val1",
key2: "val2",
key3: "val3"
}

"Before Change"
{
key1: "val1",
key2: "val2",
key3: "val3"
}
"After Change"
{
key1: "val1",
key2: "val2",
key3: "val3"
}

Keluaran. Ini adalah situasi ketika kita perlu membuat deep freeze untuk suatu objek

"Before Change"
{
 key1: "val1",
 key2: "val2",
 key3: ["val3", "val4", "val5"]
}
"After Change"
{
 key1: "val1",
 key2: "val2",
 key3: ["val", "val", "val"]
}

Bagaimana menerapkannya?

Kami akan menggunakan rekursi untuk mengimplementasikan deep freeze objek. Idenya adalah untuk memeriksa apakah setiap properti adalah objek atau bukan. Jika properti adalah objek, kami akan memeriksa apakah dibekukan atau tidak. Jika tidak dibekukan, panggil fungsi bekukan pada properti itu secara rekursif. Dengan cara ini, kita akan membuat deep freeze pada objek