参考手册
JavaScript 对象
JavaScript 对象显示
JavaScript 对象构造器
返回 JavaScript 对象

JavaScript 对象访问器

JavaScript 访问器（Getter 和 Setter）

ECMAScript 5 (2009) 引入了 Getter 和 Setter。

Getter 和 Setter 允许您定义对象访问器（被计算的属性）。

JavaScript Getter（get 关键词）

本例使用 lang 属性来获取 language 属性的值。

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <h1>JavaScript Getter 和 Setter</h1>
  7. <p>Getter 和 Setter 允许您通过方法获取和设置属性。</p>
  9. <p>此示例使用 lang 属性来获取语言属性的值。</p>
  11. <p id="demo">
  13. <script>
  14. // 创建对象：
  15. var person = {
  16.   firstName: "Bill",
  17.   lastName : "Gates",
  18.   language : "en",
  19.   get lang() {
  20.     return this.language;
  21.   }
  22. };
  23. // 使用 getter 显示来自对象的数据：
  24. document.getElementById("demo").innerHTML = person.lang;
  25. </script>
  27. </body>
  28. </html>
运行一下

JavaScript Setter（set 关键词）

本例使用 lang 属性来设置 language 属性的值。

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <h1>JavaScript Getter 和 Setter</h1>
  7. <p>Getter 和 Setter 允许您通过方法获取和设置属性。</p>
  9. <p>此示例使用 lang 属性设置语言属性的值。</p>
  11. <p id="demo">
  13. <script>
  14. // Create an object:
  15. var person = {
  16.   firstName: "埃隆",
  17.   lastName : "马斯克",
  18.   language : "en",
  19.   set lang(value) {
  20.     this.language = value;
  21.   }
  22. };
  23. // 使用 set 设置属性：
  24. person.lang = "zh";
  25. // 显示对象的数据：
  26. document.getElementById("demo").innerHTML = person.language;
  27. </script>
  29. </body>
  30. </html>
运行一下

JavaScript 函数还是 Getter？

下面两个例子的区别在哪里？

例子 1
  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <h1>JavaScript 对象方法</h1>
  7. <p>可以使用存储为函数的属性来访问对象数据。</p>
  9. <p id="demo">
  11. <script>
  12. // 创建对象：
  13. var person = {
  14.   firstName: "埃隆",
  15.   lastName : "马斯克",
  16.   fullName : function() {
  17.     return this.firstName + " " + this.lastName;
  18.   }
  19. };
  20. // 使用方法显示对象的数据：
  21. document.getElementById("demo").innerHTML = person.fullName();
  22. </script>
  24. </body>
  25. </html>
运行一下
例子 2
  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <h1>JavaScript 对象方法</h1>
  7. <p>可以使用 getter 访问对象数据。</p>
  9. <p id="demo">
  11. <script>
  12. // 创建对象：
  13. var person = {
  14.   firstName: "埃隆",
  15.   lastName : "马斯克",
  16.   get fullName() {
  17.     return this.firstName + " " + this.lastName;
  18.   }
  19. };
  20. // 使用 getter 显示对象的数据：
  21. document.getElementById("demo").innerHTML = person.fullName;
  22. </script>
  24. </body>
  25. </html>
运行一下

例子 1 以函数形式访问 fullName：person.fullName()。

例子 2 以属性形式访问 fullName：person.fullName。

第二个例子提供了更简洁的语法。

数据质量

使用 getter 和 setter 时，JavaScript 可以确保更好的数据质量。

在本例中，使用 lang 属性以大写形式返回 language 属性的值：

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <h1>JavaScript Getter 和 Setter</h1>
  7. <p>Getter 和 Setter 允许您通过方法获取和设置属性。</p>
  9. <p id="demo">
  11. <script>
  12. // 创建对象：
  13. var person = {
  14.   firstName: "埃隆",
  15.   lastName : "马斯克",
  16.   language : "en",
  17.   get lang() {
  18.     return this.language.toUpperCase();
  19.   }
  20. };
  21. // 使用 getter 显示对象的数据：
  22. document.getElementById("demo").innerHTML = person.lang;
  23. </script>
  25. </body>
  26. </html>
运行一下

在本例中，使用 lang 属性将大写值存储在 language 属性中：

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <h1>JavaScript Getter 和 Setter</h1>
  7. <p>Getter 和 Setter 允许您通过方法获取和设置属性。</p>
  9. <p id="demo">
  11. <script>
  12. // 创建对象：
  13. var person = {
  14.   firstName: "埃隆",
  15.   lastName : "马斯克",
  16.   language : "",
  17.   set lang(lang) {
  18.     this.language = lang.toUpperCase();
  19.   }
  20. };
  21. // 使用 set 设置属性：
  22. person.lang = "en";
  23. // 显示对象的数据：
  24. document.getElementById("demo").innerHTML = person.language;
  25. </script>
  27. </body>
  28. </html>
运行一下

为什么使用 Getter 和 Setter？

  • 它提供了更简洁的语法
  • 它允许属性和方法的语法相同
  • 它可以确保更好的数据质量
  • 有利于后台工作

对象定义属性

对象的 defineProperty) 方法也可用于添加getter和setter：

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <h2>JavaScript Getters and Setters</h2>
  7. <p>Perfect for creating counters:</p>
  9. <p id="demo"></p>
  11. <script>
  12. // Define an object
  13. const obj = {counter : 0};
  15. // Define Setters and Getters
  16. Object.defineProperty(obj, "reset", {
  17.   get : function () {this.counter = 0;}
  18. });
  19. Object.defineProperty(obj, "increment", {
  20.   get : function () {this.counter++;}
  21. });
  22. Object.defineProperty(obj, "decrement", {
  23.   get : function () {this.counter--;}
  24. });
  25. Object.defineProperty(obj, "add", {
  26.   set : function (value) {this.counter += value;}
  27. });
  28. Object.defineProperty(obj, "subtract", {
  29.   set : function (value) {this.counter -= value;}
  30. });
  32. // Play with counter:
  33. obj.reset;
  34. obj.add = 5;
  35. obj.subtract = 1;
  36. obj.increment;
  37. obj.decrement;
  38. document.getElementById("demo").innerHTML = obj.counter;
  39. </script>
  41. </body>
  42. </html>
运行一下

浏览器支持

Internet Explorer 8 或更早的版本不支持 Getter 和 Setter：

Yes9.0YesYesYes
JavaScript 对象显示
JavaScript 对象构造器

分类导航