Chinaunix首页 | 论坛 | 博客
  • 博客访问: 535739
  • 博文数量: 42
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 480
  • 用 户 组: 普通用户
  • 注册时间: 2019-08-05 16:22
文章分类

全部博文(42)

文章存档

2020年(1)

2019年(41)

我的朋友

分类: JavaScript

2019-08-30 09:38:56

JavaScript访问器(Getter和Setter),ECMAScript 5(2009)介绍了Getter和Setters。 Getters和setter允许您定义对象访问器(Computed Properties)。

JavaScript Getter(get关键字)

  1. <!DOCTYPE html>
  2.  <html>
  3. <meta charset="utf-8">
  4. <title>js</title>
  5. <body>
  6.  <h2>JavaScript Getters和Setters</h2>
  7.  <p> Getters和setter允许您通过方法获取和设置属性。</p>
  8. <p>此示例使用lang属性获取语言属性的值。</p>
  9. <p id="demo"></p> <script> // 新建一个对象。 var person = {
  10.         firstName: "John",
  11.         lastName : "Doe",
  12.         language : "en", get lang() { return this.language;
  13.         }
  14.     };
  15.  // 使用getter显示来自对象的数据: document.getElementById("demo").innerHTML = person.lang;
  16.    </script>
  17.   </body>
  18. </html>

JavaScript Setter (set关键字)


  1. <!DOCTYPE html>
  2. <html>
  3. <meta charset="utf-8">
  4.  <title>JavaScript Getters和Setters</title> <body>
  5. <h2> JavaScript Getters和Setters </h2>
  6.  <p> Getters和setter允许您通过方法获取和设置属性。</p>
  7. <p>此示例使用lang属性设置语言属性的值。</p>
  8. <p id="demo"></p>
  9.  <script> // Create an object: var person = {
  10.         firstName: "John",
  11.         lastName : "Doe",
  12.         language : "NO", set lang(value) { this.language = value;
  13.         }
  14.     };
  15. // Set a property using set: person.lang = "en";
  16.  // Display data from the object: document.getElementById("demo").innerHTML = person.language;
  17.  </script>
  18.  </body>
  19. </html>

  1. <!DOCTYPE html>
  2. <html>
  3. <meta charset="utf-8">
  4.  <title>JavaScript Getters和Setters</title> <body>
  5. <h2> JavaScript Getters和Setters </h2>
  6.  <p> Getters和setter允许您通过方法获取和设置属性。</p>
  7. <p>此示例使用lang属性设置语言属性的值。</p>
  8. <p id="demo"></p>
  9.  <script>
  10. // Create an object:
  11.     var person = {
  12.         firstName: "John",
  13.         lastName : "Doe",
  14.         language : "NO", set lang(value) {
  15.              this.language = value;
  16.         }
  17.     };
  18.  // Set a property using set: person.lang = "en";
  19.  // Display data from the object: document.getElementById("demo").innerHTML = person.language;
  20.  </script>
  21.  </body>
  22. </html>

  1. <!DOCTYPE html>
  2. <html>
  3. <meta charset="utf-8">
  4.  <title>JavaScript Getters和Setters</title> <body>
  5. <h2> JavaScript Getters和Setters </h2>
  6.  <p> Getters和setter允许您通过方法获取和设置属性。</p>
  7. <p>此示例使用lang属性设置语言属性的值。</p>
  8. <p id="demo"></p>
  9.  <script>
  10. // Create an object:
  11.    var person = {
  12.         firstName: "John",
  13.         lastName : "Doe",
  14.         language : "NO", set lang(value) { this.language = value;
  15.         }
  16.     };
  17. // Set a property using set: person.lang = "en";
  18. // Display data from the object: document.getElementById("demo").innerHTML = person.language;
  19.  </script>
  20.  </body>
  21. </html>

为什么使用Getter和Setter?

  • 它提供了更简单的语法
  • 它允许属性和方法的语法相同
  • 它可以确保更好的数据质量
  • 在幕后做事情很有用
  1. <!DOCTYPE html>
  2. <html>
  3.  <meta charset="utf-8">
  4.  <title>js</title>
  5.  <body>
  6.  <h2> JavaScript Getters和Setters </h2>
  7.  <p>完美的创建反对象:</p>
  8.  <p id="demo"></p>
  9.    <script> var obj = {
  10.         counter : 0, get reset() { this.counter = 0;
  11.         }, get increment() { this.counter++;
  12.         }, get decrement() { this.counter--;
  13.         }, set add(value) { this.counter += value;
  14.         }, set subtract(value) { this.counter -= value;
  15.         }
  16.     }; 
  17. // Play with the counter: obj.reset;
  18.     obj.add = 5;
  19.     obj.subtract = 1;
  20.     obj.increment;
  21.     obj.decrement; 
  22. // Display the counter: document.getElementById("demo").innerHTML = obj.counter;
  23.   </script>
  24.  </body>
  25. </html>

Object.defineProperty()方法还可用于添加Getters和Setter

阅读(123) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~
评论热议
请登录后评论。

登录 注册