Hoe kun je het wijzigen van een object in JavaScript verbieden?

Je kunt de ingebouwde methoden van Object gebruiken:

1. Object.preventExtensions(obj): Voorkomt dat er nieuwe eigenschappen aan het object worden toegevoegd, maar staat toe bestaande eigenschappen te wijzigen en te verwijderen.
2. Object.seal(obj): Voorkomt het toevoegen en verwijderen van eigenschappen, maar staat toe bestaande eigenschappen te wijzigen. Dit is in feite preventExtensions + verbod op verwijderen.
3. Object.freeze(obj): Voorkomt het toevoegen, verwijderen en wijzigen van eigenschappen. Maakt het object diepgaand onveranderlijk. Dit is seal + verbod op wijzigen van bestaande eigenschappen.

Voorbeeld van gebruik:

// Initiële object
let myObject = { name: 'Alice', age: 30 };

// preventExtensions
Object.preventExtensions(myObject);
myObject.city = 'London'; // Heeft geen effect in strikte modus, wordt genegeerd in niet-strikte modus.

// seal
let mySealedObject = { name: 'Bob', age: 25 };
Object.seal(mySealedObject);
mySealedObject.age = 26; // Werkt
delete mySealedObject.name; // Werkt niet in strikte modus.
mySealedObject.city = 'Paris'; // Werkt niet in strikte modus.

// freeze
let myFrozenObject = { name: 'Charlie', age: 35 };
Object.freeze(myFrozenObject);
myFrozenObject.age = 36; // Werkt niet in strikte modus.
delete myFrozenObject.name; // Werkt niet in strikte modus.
myFrozenObject.city = 'New York'; // Werkt niet in strikte modus.

Het is belangrijk om te onthouden dat Object.freeze oppervlakkig is. Als het object verwijzingen bevat naar andere objecten, kunnen deze geneste objecten worden gewijzigd als ze niet zelf ook bevroren zijn. Voor diepe bevriezing is een recursieve functie nodig.

// Voorbeeld van diepe bevriezing
function deepFreeze(obj) {
  Object.freeze(obj); // Bevries het huidige object

  for (const key in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, key)) {
      const prop = obj[key];

      // Als de eigenschap een object is (en niet null), bevries het dan recursief
      if (typeof prop === 'object' && prop !== null && !Object.isFrozen(prop)) {
        deepFreeze(prop);
      }
    }
  }
}

let nestedObject = {
  name: 'Deep',
  details: {
    level: 1
  }
};

deepFreeze(nestedObject);
nestedObject.details.level = 2; // Werkt niet in strikte modus.

Vergelijkingstabel:

Methode	Eigenschappen toevoegen	Eigenschappen verwijderen	Eigenschappen wijzigen
Object.preventExtensions()	Nee	Ja	Ja
Object.seal()	Nee	Nee	Ja
Object.freeze()	Nee	Nee	Nee