共计 1621 个字符，预计需要花费 5 分钟才能阅读完成。
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>
为什么使用 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>
Object.defineProperty()方法还可用于添加 Getters 和 Setter
正文完
发表至： javascript
2019-08-30
