JavaScript 访问器（Getter 和 Setter）
Getter 和 Setter 允许您定义对象访问器（被计算的属性）。
<!DOCTYPE html>
<html lang="en">
<body>
<p id="demo"></p>
<script>
const person = {
nama: "DianDian",
age: 20,
city: "ShenZhen",
language:"China",
get lang(){
return this.language;
}
};
document.getElementById("demo").innerHTML = person.lang;
</script>
</body>
//ChinaJavaScript Setter（set 关键词）
本例使用 lang 属性来设置 language 属性的值。
实例
<!DOCTYPE html>
<html lang="en">
<body>
<p id="demo"></p>
<script>
const person = {
nama: "DianDian",
age: 20,
city: "ShenZhen",
language:"China",
set lang(value){
this.language=value;
}
};
person.lang="Dian"
document.getElementById("demo").innerHTML = person.language;
</script>
</body>
//DianJavaScript 函数还是 Getter？
下面两个例子的区别在哪里？
例子 1
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
// 创建对象：
var person = {
firstName: "Bill",
lastName: "Gates",
fullName: function () {
return this.firstName + " " + this.lastName;
}
};
// 使用方法显示对象的数据：
document.getElementById("demo").innerHTML = person.fullName();
</script>
</body>
</html>
//Bill Gates例子 2
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
// 创建对象：
var person = {
firstName: "Bill",
lastName: "Gates",
get fullName() {
return this.firstName + " " + this.lastName;
}
};
// 使用 getter 显示对象的数据：
document.getElementById("demo").innerHTML = person.fullName;
</script>
</body>
</html>
//Bill Gates例子 1 以函数形式访问 fullName：person.fullName()。
例子 2 以属性形式访问 fullName：person.fullName。
第二个例子提供了更简洁的语法。
数据质量
使用 getter 和 setter 时，JavaScript 可以确保更好的数据质量。
在本例中，使用 lang 属性以大写形式返回 language 属性的值：
实例
<!DOCTYPE html>
<html lang="en">
<body>
<p id="demo"></p>
<script>
const person = {
nama: "DianDian",
age: 20,
city: "ShenZhen",
language: "China",
get lang() {
return this.language.toUpperCase();
}
};
document.getElementById("demo").innerHTML = person.lang;
</script>
</body>
//CHINA在本例中，使用 lang 属性将大写值存储在 language 属性中：
实例
<!DOCTYPE html>
<html lang="en">
<body>
<p id="demo"></p>
<script>
var person = {
nama: "DianDian",
age: 20,
city: "ShenZhen",
language: "",
set lang(lang) {
this.language = lang.toUpperCase();
}
};
person.lang = "China"
document.getElementById("demo").innerHTML = person.language;
</script>
</body>
//CHINA一个计数器实例
实例
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Getter 和 Setter</h1>
<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;
?? }
};
// 操作计数器：
obj.reset;
obj.add = 5;
obj.subtract = 1;
obj.increment;
obj.decrement;
// 显示计数器：
document.getElementById("demo").innerHTML = obj.counter;
</script>
</body>
</html>Object.defineProperty() 方法也可用于添加 Getter 和 Setter：
实例
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Getter 和 Setter</h1>
<p>创建完美的计数器：</p>
<p id="demo"></p>
<script>
// 定义对象
var obj = { counter: 0 };
// 定义 Setter 和 Getter
Object.defineProperty(obj, "reset", {
???? get : function () { this.counter = 0; }
});
Object.defineProperty(obj, "increment", {
???? get : function () { this.counter++; }
});
Object.defineProperty(obj, "decrement", {
???? get : function () { this.counter--; }
});
Object.defineProperty(obj, "add", {
???? set : function (value) { this.counter += value; }
});
Object.defineProperty(obj, "subtract", {
???? set : function (value) { this.counter -= value; }
});
// 操作计数器：
obj.reset;
obj.add = 5;
obj.subtract = 1;
obj.increment;
obj.decrement;
document.getElementById("demo").innerHTML = obj.counter;
</script>
</body>
</html>