JavaScript 如何在使用对象的属性时抛出错误

在 JavaScript 中，对象以键值对的格式包含属性。我们可以通过将对象作为引用来访问对象的任何属性，使用属性名称。

有时候，我们尝试访问对象中不存在的属性。在这种情况下，我们会得到未定义的值。让我们通过以下示例来理解。

示例（访问对象属性）

在下面的示例中，我们创建了一个对象并添加了一些属性。此外，我们还添加了一些嵌套属性。之后，我们尝试访问 “prop4” 的嵌套属性 “prop5”，用户可以在输出中观察到其值。

另外，我们尝试访问 “prop6” 属性，并且对象返回未定义，因为它在对象中不存在。

<html>
<body>
   <h2>Accessing the object properties in JavaScript</h2>
   <div id="content"> </div>
   <script>
      let content = document.getElementById('content');
      let object = {
         name: 'Shubham',
         prop1: 'Hello',
         prop2: 'World',
         prop3: '!',
         prop4: {
            prop5: 'This is a nested object.'
         }
      }
      content.innerHTML = "The value of prop5 is : " + object.prop4.prop5;
      content.innerHTML += "<br> The value of prop3 is : " + object.prop3;
      content.innerHTML += "<br> The value of prop6 is : " + object.prop6;
   </script>
</body>
</html>

所以，每当一个属性在对象中不存在时，我们可以抛出一个错误，表示该属性在对象中不存在。

在这里，我们将学习一种不同的方法，通过访问对象属性时抛出一个错误。

使用’ in ‘运算符在访问对象属性时抛出错误

‘in’运算符允许我们检查一个属性是否存在于对象中。我们可以使用键作为’in’运算符的左操作数，对象作为右操作数。

我们可以检查一个属性是否存在于对象中。如果不存在，我们可以抛出一个错误。

语法

用户可以按照下面的语法使用’in’运算符在访问对象属性时抛出一个错误。

if(key in obj){
}else {
   // throw error
}

在上面的语法中，key是一个属性，用来检查它是否存在于对象中。

示例

在下面的示例中，我们创建了table_obj对象，并添加了一些键值对。名为get_property_value()的函数检查属性是否存在于对象中。如果属性存在于对象中，它会返回属性值。否则，它会抛出错误。

在try-catch块中，我们捕获了一个错误。在输出中，用户可以观察到get_property_value()函数对于’table_price1’属性抛出了错误，而不是返回该属性的undefined值。

<html>
<body>
   <h3>Using the <i> in </i> operator  to throw an error while accessing the object properties in JavaScript</h3>
   <div id = "content"> </div>
   <script>
      let content = document.getElementById('content');
      // creating an object for table details
      let table_obj = {
         table_name: "table1",
         table_type: "table",
         table_size: "10x10",
         table_color: "black",
         table_price: 1000
      }
      function get_property_value(key) {
         if (key in table_obj) {
            return table_obj[key];
         } else {
            throw new Error(key + " is not a valid property name.");
         }
      }
      try {
         content.innerHTML += "table_name : - " + get_property_value("table_name");
         content.innerHTML += "<br>" + get_property_value("table_price1");
      } catch (e) {
         content.innerHTML += "<br>" + e.message;
      }
   </script>
</body>
</html>

使用defineProperty()方法访问对象属性时抛出错误

Javascript的defineProperty()方法允许我们向对象添加属性。我们可以为属性描述符添加getter，从而抛出错误。

语法

用户可以按照下面的语法使用defineProperty()方法，在访问对象属性时抛出错误。

Object.defineProperty(obj_name, 'prop_name', {
   get: () => {
      // throw an error
   }
});

在上面的语法中，我们将描述符作为defineProperty()方法的第三个参数传递。我们可以从描述符函数中为对象的特定属性抛出错误。

参数

Obj_name - 这是要将属性添加到对象的对象名称。
Prop_name - 这是要添加到对象的属性名。
{ get: () => {} } - 这是对象属性的getter函数。

示例

在下面的示例中，我们创建了一个名为empty_obj的空对象，其中没有属性。我们使用defineProperties()方法来添加属性。作为描述符，我们添加了一个带有错误消息的get()方法。

在输出中，用户可以观察到当我们试图访问’prop1’属性时，它会抛出一个错误。

<html>
<body>
   <h3>Using the <i> defineProperty() </i> method to throw an error while accessing the object properties in JavaScript </h3>
   <div id = "content"> </div>
   <script>
      let content = document.getElementById('content');
      let empty_obj = {};
      Object.defineProperty(empty_obj, 'prop1', {
         get: () => {
            throw new Error('You cannot access prop1 property');
         }
      });
      try {
         content.innerHTML = "The value of prop1 property in the empty object is " + empty_obj.prop1;
      }
      catch (err) {
         content.innerHTML = "The error is : - " + err;
      }
   </script>
</body>
</html>

使用Proxy()构造函数访问对象属性时抛出错误

Proxy()构造函数允许我们为对象创建一个代理，并覆盖对象的所有描述符，比如获取器和设置器。在这里，我们可以覆盖getters()并编写一个新函数来抛出错误。

语法

用户可以使用以下语法使用Proxy()构造函数，在访问对象属性时抛出错误。

let proxy_obj = new Proxy(target_Obj, {
   get: function (target, prop) {
      // throw error
   },
});

在上述语法中，target_obj是一个要为其创建代理的对象。我们将包含get()方法的对象作为第二个参数传递。在get()方法中，我们可以验证对象属性并如果对象属性无效则抛出错误。

示例

在下面的示例中，我们使用Proxy()构造函数为targetObj对象创建了代理。在创建代理时，我们检查用户是否访问了’prop5’属性。如果没有，我们总是抛出错误。这意味着只能访问对象的’prop5’属性。然而，由于我们没有在对象中定义该属性，它将返回一个undefined值。

<html>
<body>
   <h3>Using the <i> defineProperty() </i> method to throw an error while accessing the object properties in JavaScript </h3>
   <div id = "content"> </div>
   <script>
      let content = document.getElementById('content');
      let targetObj = {
         prop1: 'Hello',
      }
      let proxy_obj = new Proxy(targetObj, {
         get: function (target, prop) {
            if (prop != 'prop5') {
               throw new Error('You are only allowed to access prop5');
            }
         },
      });
      try {
         content.innerHTML += "The value of prop1 is: " + proxy_obj.prop1 + "<br>";
      } catch (e) {
         content.innerHTML += "The error is - " + e + "<br>";
      }
   </script>
</body>
</html>