在 JavaScript 中使用“get”作为属性访问属性？

属性访问器提供基于点表示法或括号表示法的对象属性访问。关联数组是理解对象（也称为映射、字典、哈希、查找表）的好方法。属性名称是此数组中的键。

在讨论对象属性时，经常会区分属性和方法。但是，属性和方法之间的区别仅仅是一种约定俗成的做法。例如，当属性的值是对 Function 实例的引用时，可以调用该属性来执行一个函数。

语法

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>

更新于：2022-08-23

484 次浏览

启动您的 职业生涯

通过完成课程获得认证

开始
广告