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};// 定义 settersobject.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：
internet explorerchromefirefoxsafariopera
9.0+
支持
支持
支持
支持
本文来自 js教程 栏目，欢迎学习！
以上就是深入学习javascript对象访问器（getter和setter）的详细内容。