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>
//China
JavaScript 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>
//Dian
JavaScript 函数还是 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>