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

JavaScript Getter（get关键字）

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

JavaScript Setter (set关键字)

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

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

为什么使用Getter和Setter？

它提供了更简单的语法

它允许属性和方法的语法相同

它可以确保更好的数据质量

在幕后做事情很有用

<!DOCTYPE html> 
<html> 
 <meta charset="utf-8"> 
 <title>js</title> 
 <body> 
 <h2> JavaScript Getters和Setters </h2> 
 <p>完美的创建反对象：</p> 
 <p id="demo"></p> 
   <script> var obj = { 
        counter : 0, get reset() { this.counter = 0; 
        }, get increment() { this.counter++; 
        }, get decrement() { this.counter--; 
        }, set add(value) { this.counter += value; 
        }, set subtract(value) { this.counter -= value; 
        } 
    }; 
// Play with the counter: obj.reset; 
    obj.add = 5; 
    obj.subtract = 1; 
    obj.increment; 
    obj.decrement; 
// Display the counter: document.getElementById("demo").innerHTML = obj.counter; 
  </script> 
 </body>
</html>