Perbedaan antara pembekuan dan segel

Saya baru saja mendengar tentang metode JavaScript freezedan seal, yang dapat digunakan untuk membuat Objek apa pun tidak berubah.

Berikut adalah contoh singkat cara menggunakannya:

var o1 = {}, o2 = {};
Object.freeze(o2);

o1["a"] = "worked";
o2["a"] = "worked";

alert(o1["a"]);   //prints "worked"
alert(o2["a"]);   //prints "undefined"

Apa perbedaan antara freezedan seal? Bisakah mereka meningkatkan kinerja?

Object.seal

• Ini mencegah menambah dan / atau menghapus properti dari objek yang disegel; menggunakan deleteakan mengembalikan false
• Itu membuat setiap properti yang ada tidak dapat dikonfigurasi : mereka tidak dapat dikonversi dari 'deskriptor data' ke 'deskriptor accessor' (dan sebaliknya), dan tidak ada atribut deskriptor accessor yang dapat dimodifikasi sama sekali (sedangkan deskriptor data dapat mengubah writableatribut mereka , dan valueatribut mereka jika writeableitu benar).
• Dapat melempar TypeErrorketika mencoba mengubah nilai objek yang disegel itu sendiri (paling umum dalam mode ketat )

Object.freeze

• Apa yang Object.sealdilakukan, ditambah:
• Ini mencegah memodifikasi setiap properti yang ada

Tidak ada yang memengaruhi objek 'mendalam' / cucu. Misalnya, jika objdibekukan, obj.eltidak dapat dipindahkan, tetapi nilai obj.eldapat dimodifikasi, misalnya obj.el.iddapat diubah.

Kinerja:

Menyegel atau membekukan suatu objek dapat mempengaruhi kecepatan enumerasinya, tergantung pada browser:

• Firefox: kinerja enumerasi tidak terpengaruh
• IE: dampak kinerja enumerasi dapat diabaikan
• Chrome: kinerja enumerasi lebih cepat dengan objek yang disegel atau dibekukan
• Safari: objek bersegel atau beku menghitung 92% lebih lambat (per 2014)

Pengujian: Benda bersegel , Benda beku .

Saya menulis proyek uji yang membandingkan 3 metode ini:

• Object.freeze()
• Object.seal()
• Object.preventExtensions()

Tes unit saya mencakup kasus CRUD:

• [C] tambahkan properti baru
• [R] baca properti yang ada
• [U] memodifikasi properti yang ada
• [D] menghapus properti yang ada

Hasil:

Anda selalu dapat mencari ini di MDN. Pendeknya:

• Membekukan : membuat objek tidak berubah, yang berarti tidak ada perubahan pada properti yang ditentukan diizinkan, kecuali mereka adalah objek.
• Seal : mencegah penambahan properti, namun properti yang didefinisikan masih dapat diubah.

Object.freeze()membuat objek beku, yang berarti mengambil objek yang ada dan pada dasarnya memanggilnya Object.seal(), tetapi juga menandai semua properti "pengakses data" sebagai writable:false, sehingga nilainya tidak dapat diubah. - Kyle Simpson, Anda Tidak Tahu JS - Ini & Objek Prototipe

Saya melihat perbedaan antara Freeze dan Seal di ECMAScript 5 dan membuat skrip untuk menjelaskan perbedaan. Frozen menciptakan objek yang tidak berubah termasuk data dan struktur. Seal mencegah perubahan pada antarmuka yang diberi nama - tidak ada tambahan, hapus - tetapi Anda dapat mengubah objek dan mendefinisikan ulang arti antarmuka-nya.

function run()
{
    var myObject = function() 
    { 
        this.test = "testing"; 
    }

    //***************************SETUP****************************

    var frozenObj = new myObject();
    var sealedObj = new myObject();

    var allFrozen = Object.freeze(frozenObj);
    var allSealed = Object.seal(sealedObj);
    alert("frozenObj of myObject type now frozen - Property test= " + frozenObj.test);
    alert("sealedObj of myObject type now frozen - Property test= " + sealedObj.test);

    //***************************FROZEN****************************

    frozenObj.addedProperty = "added Property"; //ignores add
    alert("Frozen addedProperty= " + frozenObj.addedProperty);
    delete frozenObj.test; //ignores delete
    alert("Frozen so deleted property still exists= " + frozenObj.test);
    frozenObj.test = "Howdy"; //ignores update
    alert("Frozen ignores update to value= " + frozenObj.test);
    frozenObj.test = function() { return "function"; } //ignores
    alert("Frozen so ignores redefinition of value= " + frozenObj.test);

    alert("Is frozen " + Object.isFrozen(frozenObj));
    alert("Is sealed " + Object.isSealed(frozenObj));
    alert("Is extensible " + Object.isExtensible(frozenObj));

    alert("Cannot unfreeze");
    alert("result of freeze same as the original object: " + (frozenObj === allFrozen).toString());

    alert("Date.now = " + Date.now());

    //***************************SEALED****************************

    sealedObj.addedProperty = "added Property"; //ignores add
    alert("Sealed addedProperty= " + sealedObj.addedProperty);
    sealedObj.test = "Howdy"; //allows update
    alert("Sealed allows update to value unlike frozen= " + sealedObj.test);
    sealedObj.test = function() { return "function"; } //allows
    alert("Sealed allows redefinition of value unlike frozen= " + sealedObj.test);
    delete sealedObj.test; //ignores delete
    alert("Sealed so deleted property still exists= " + sealedObj.test);
    alert("Is frozen " + Object.isFrozen(sealedObj));
    alert("Is sealed " + Object.isSealed(sealedObj));
    alert("Is extensible " + Object.isExtensible(sealedObj));

    alert("Cannot unseal");
    alert("result of seal same as the original object: " + (sealedObj === allSealed).toString());

    alert("Date.now = " + Date.now());
}

Saya tahu saya mungkin sedikit terlambat tetapi

• Kesamaan: keduanya digunakan untuk membuat objek yang tidak dapat diperluas .
• Perbedaan: Dalam membekukan atribut yang dapat dikonfigurasi, enumerable dan dapat ditulis objek diatur ke false. di mana seperti dalam atribut Tertulis yang dapat disetel diatur ke truedan atribut lainnya salah.

Anda sekarang dapat memaksa properti objek tunggal untuk dibekukan alih-alih membekukan seluruh objek. Anda dapat mencapai ini dengan Object.definePropertydengan writable: falsesebagai parameter.

var obj = {
    "first": 1,
    "second": 2,
    "third": 3
};
Object.defineProperty(obj, "first", {
    writable: false,
    value: 99
});

Dalam contoh ini, obj.firstsekarang nilainya dikunci ke 99.

Saya telah membuat tabel sederhana untuk membandingkan fungsi-fungsi di bawah ini dan menjelaskan perbedaan antara fungsi-fungsi ini.

• Object.freeze ()
• Object.seal ()
• Object.preventExtensions ()