JavaScript存取器（Getter和Setter），ECMAScript 5（2009）介紹了Getter和Setters。 Getters和setter允許您定義物件存取器（Computed Properties）。
【相關課程推薦：JavaScript影片教學】
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>使用JavaScript函數還是Getter？
這兩個例子有什麼差別？
範例1：
var person = {
firstName: "John",
lastName : "Doe",
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
// 使用方法显示对象的数据：
document.getElementById("demo").innerHTML = person.fullName();範例2：
var person = {
firstName: "John",
lastName : "Doe",
get fullName() {
return this.firstName + " " + this.lastName;
}
};
// 使用getter显示来自对象的数据：
document.getElementById("demo").innerHTML = person.fullName;範例1將fullName作為函數存取：person.fullName（）。範例2將fullName作為屬性存取：person.fullName。第二個範例提供了更簡單的語法。
資料品質
使用getter和setter時，JavaScript可以確保更好的資料品質。 lang在此範例中，使用屬性language以大寫形式傳回屬性的值：
// 创建一个对象:
var person = {
firstName: "John",
lastName : "Doe",
language : "en",
get lang() {
return this.language.toUpperCase();
}
};
// 使用getter显示来自对象的数据：
document.getElementById("demo").innerHTML = person.lang;lang在此範例中，使用該屬性將大寫值儲存在language屬性中：
var person = {
firstName: "John",
lastName : "Doe",
language : "",
set lang(lang) {
this.language = lang.toUpperCase();
}
};
// 使用setter设置对象属性：
person.lang = "en";
// 显示来自对象的数据：
document.getElementById("demo").innerHTML = person.language;為什麼要使用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()
Object.defineProperty()方法還可用於添加Getters和Setter：
// 定义对象
var obj = {counter : 0};
// 定义 setters
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;}
});
// Play with the counter:
obj.reset;
obj.add = 5;
obj.subtract = 1;
obj.increment;
obj.decrement;瀏覽器支援
##Internet Explorer 8或更早版本不支援Getters和Setter：| Chrome | FireFox | Safari | Opera | |
|---|---|---|---|---|
 |
 |
 |
 |  |
| 9.0 | 支援 | 支持 | 支持 | 支持 |
本文來自 js教學
欄目，歡迎學習！ ###以上是深入學習JavaScript物件存取器（Getter和Setter）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
