使用对象属性时如何抛出错误?
在 JavaScript 中,对象包含键值格式的属性。我们可以将对象作为引用,使用属性名称访问对象的任何属性。
有时,我们尝试访问对象中不存在的对象属性。在这种情况下,我们会得到未定义的值。让我们通过下面的例子来理解它。
示例(访问对象属性)
在下面的例子中,我们创建了对象并添加了一些属性。此外,我们还添加了一些嵌套属性。之后,我们尝试访问"prop5"属性,它是"prop4"的嵌套属性。用户可以在输出中观察它的值。
此外,我们尝试访问"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"属性抛出错误,而不是返回该属性的未定义值。
<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'); // 为表格详细信息创建一个对象 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: () => { } } − 这是对象属性的 getters 函数。
示例
在下面的示例中,我们创建了具有零个属性的 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() 构造函数允许我们为对象创建代理并覆盖对象的所有描述符,例如 getter 和 setter。在这里,我们可以覆盖 getters() 并编写一个可以抛出错误的新函数。
语法
用户可以使用以下语法在访问对象属性时使用 Proxy() 构造函数抛出错误。
let proxy_obj = new Proxy(target_Obj, { get: function (target, prop) { // throw error }, });
在上述语法中,target_obj 是一个为其创建代理的对象。我们已将包含 get() 方法的对象作为第二个参数传递。在 get() 方法中,我们可以验证对象属性,如果对象属性无效,则抛出错误。
示例
在下面的示例中,我们使用 Proxy() 构造函数为 targetObj 对象创建了代理。在创建代理时,我们检查用户是否访问了"prop5"属性。如果没有,我们总是抛出错误。这意味着从对象中只能访问"prop5"属性。但是,它将为"prop5"属性返回未定义的值,因为我们没有在对象中定义它。
<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>