HTML CSS JAVASCRIPT PYTHON PYTHON2 JAVA C C++ C# SQL Excel Linux AI BOOTSTRAP PHP 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ

在 JavaScript 中使用"get"将属性作为属性进行访问?

front end technologyjavascriptobject oriented programming

属性访问器提供基于点符号或括号符号的对对象属性的访问。关联数组是理解对象的好方法(又称映射、字典、哈希、查找表)。属性名称的名称是此数组内的键。

在讨论对象的属性时，经常会区分属性和方法。但属性和技术之间的区别只是一种既定做法。例如，当属性的值是对函数示例的引用时，可以调用该属性来执行函数。

语法

ObjectName[propertyName]

在本课中，您将借助示例学习 JavaScript getter 和 setter 方法。

JavaScript 中存在两类对象属性 -

  • 数据属性
  • 访问器属性

JavaScript 中的访问器属性是检索或修改对象值的方法。为了做到这一点，我们使用以下两个关键字 -

  • 定义一个名为"get"的 getter 方法来获取属性的值
  • 使用关键字"set"定义 setter 方法来设置属性值

示例 1

要在 JavaScript 中访问对象的属性，请使用 getter 方法。例如 -

以下代码中定义了 getter 函数 getName() 来访问对象的属性。此外，每当访问值时，我们都会将其作为属性进行访问。每当您尝试将值作为方法进行访问时，都会发生错误。

<!DOCTYPE html>
<html>
<title>Access property as a property using 'get' in JavaScript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
   <script>
      const farm = {
         // this is data property
         fruitName: 'Pineapple',
         // this is accessor property(getter)
         get getName() {
            return this.fruitName;
         }
      };
   
      // written to access data property
      document.write(farm.fruitName +'<br>'); // Pineapple

      // written to access getter methods
      document.write(farm.getName); // Pineapple

      // written trying to access as a method
      document.write(farm.getName()); // throws error
   </script>
</body>
</html>

请按键盘上的 f12 键访问浏览器控制台以查看结果。

TypeError: farm.getName is not a function

示例 2

JavaScript Setter。可以使用 setter 方法在 JavaScript 中更改对象的值。例如

在下面的示例中，setter 方法用于修改对象的值。此 set 关键字用于构建 setter 方法。setter 中应该只有一个形式参数。

下面程序中 fruitName 的值是 Pineapple。然后将 Orange 替换为值。

<!DOCTYPE html>
<html>
<title>Access property as a property using 'get' in JavaScript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
   <script>
      const farm = {
         fruitName: 'Pineapple',
         
         //this is accessor property(setter)
         set changeName(newName) {
            this.fruitName = newName;
         }
      };
      document.write(farm.fruitName +'<br>'); // Pineapple

      // this is change(set) object property using a setter
      farm.changeName = 'Orange ';
      document.write(farm.fruitName); // Orange
   </script>
</body>
</html>

示例 3

在此示例中，让我们了解如何在 JavaScript 中创建 getter 和 setter，用户也可以使用 Object.defineProperty() 方法。

在下面的示例中，方法 Object.defineProperty() 用于访问和修改对象的属性。

Object.defineProperty() 函数有三个参数。

  • 第一个参数是 objectName。
  • 第二个参数是属性的名称。
  • 第三个参数是描述属性的对象。
<!DOCTYPE html>
<html>
<title>Access property as a property using 'get' in JavaScript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
   <script>
      const farm = {
         fruitName: 'Pineapple'
      }

      // written to get property
      Object.defineProperty(farm, "getName", {
         get : function () {
            return this.fruitName;
         }
      });

      // written to setting property
      Object.defineProperty(farm, "changeName", {
         set : function (value) {
            this.fruitName = value;
         }
      });
      document.write(farm.fruitName +'<br>'); // Pineapple

      // written to changing the property value
      farm.changeName = 'Orange ';
      document.write(farm.fruitName); // Orange
   </script>
</body>
</html>

点属性访问器

在此使用点属性访问器访问对象的属性；该属性必须是合法的 JavaScript 身份。

语法

ObjectName.propertyName

示例 4

使用点属性访问器是访问对象的 JavaScript 属性的最早和最常用的方法。借助此函数，只能访问所述对象的有效 ID。

<!DOCTYPE html>
<html>
<title>Access property as a property using 'get' in JavaScript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
   <script>
      let object1={
         studName : "Steve Jackson",
         studAge : 22,
         studAddress : "Delhi"
      };
      let studName=object1.studName;
      document.write(studName);
   </script>
</body>
</html>

使用方括号

此处，方括号用于检索对象的属性。其工作方式与使用方括号访问数组项相同。

语法

ObjectName[propertyName]

示例 5

使用方括号属性访问器访问点属性访问器不允许您访问的任何对象属性。它主要用于检索数组对象的属性和不正确的标识符。

<!DOCTYPE html>
<html>
<title>Access property as a property using 'get' in JavaScript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
   <script>
      const school = {
         'student-1': 'Bob Smith',
         '6': 'six'
      };
      document.write(school['student-1'] +'<br>');
      document.write(school[6]);
   </script>
</body>
</html>

相关文章

打印 下一节 ❯❮ 上一节