Javascript
 Computer >> コンピューター >  >> プログラミング >> Javascript

JavaScriptでオブジェクトの変更を防ぐ方法は？

ECMAScript 5では、オブジェクトの変更を防ぐためのいくつかのメソッドが導入されています。これらの予防策により、誤ってまたはその他の方法でオブジェクトの機能を変更することがなくなります。

予防方法には3つのレベルがあります

1）拡張を防ぐ

このレベルでは、新しいプロパティやメソッドを追加することはできませんが、既存のプロパティやメソッドにアクセスすることはできます。ここでは、それぞれのオブジェクトを削除する機能があります。 Object.preventExtensions（） このタスクを実行するために使用される方法です。これにより、新しいプロパティがオブジェクトに追加されるのを防ぐことができます。

例

<html>
<body>
<script>
   var object1 = {
      prop1: 1
   };
   Object.preventExtensions(object1);
   delete object1.prop1 // value got deleted
   try {
      Object.defineProperty(object1, 'prop2', {
      value: 2
   });
   } catch (err) {
   document.write(err);
   }
   document.write("</br>");
   document.write(object1.prop1);
</script>
</body>
</html>

出力

TypeError: Cannot define property prop2, object is not extensible
undefined // deleted so undefined

2）シール

これは拡張機能を防ぐことと同じですが、既存のプロパティやメソッドを削除することもできません。このタスクを実行するにはObject.seal（） メソッドが使用されます。

例

<html>
<body>
<script>
   var object1 = {
      prop1: 1
   };
   Object.seal(object1);
   object1.prop1 = 2;                 // value got changed
   delete object1.prop1;
   try {
      Object.defineProperty(object1, 'prop2', {
      value: 2
   });
   } catch (err) {
      document.write(err);
   }
   document.write("</br>");
   document.write(object1.prop1); // it gives value as 2 because of seal.
</script>
</body>
</html>

出力

TypeError: Cannot define property prop2, object is not extensible
2  // because of seal the value can't be deleated but got updated

3）フリーズ

シールの機能に加えて、フリーズでは既存のプロパティにアクセスすることさえできません。オブジェクトをフリーズするには、 Object.freeze（）を使用します 方法。また、オブジェクトを不変にすることもできます 。

例

<html>
<body>
<script>
   var object1 = {
      prop1: 1
   };
   Object.freeze(object1);
   object1.prop1 = 2;          //  value got updated
   delete object1.prop1;        // value got deleted
   try {
      Object.defineProperty(object1, 'prop2', {
      value: 2
   });
   } catch (err) {
      document.write(err);
   }
   document.write("</br>");
   document.write(object1.prop1);  // it gives 1 as output despite value updated to 2
</script>
</body>
</html>

出力

TypeError: Cannot define property prop2, object is not extensible
1 // because of freeze the value won't get delete and won't get update. 

  1. JavaScriptでインポートされたオブジェクトを非構造化するにはどうすればよいですか？

    以下は、JavaScriptでインポートされたオブジェクトを非構造化するコードです- 例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style&g

  2. 多次元JavaScriptオブジェクトを作成するにはどうすればよいですか？

    以下は、多次元JavaScriptオブジェクトを作成するためのコードです- 例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> &n