深入学习JavaScript对象访问器（Getter和Setter）

互联网 19-11-29

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();

var person = {   firstName: "John",   lastName : "Doe",   get fullName() {     return this.firstName + " " + this.lastName;   } }; // 使用getter显示来自对象的数据： document.getElementById("demo").innerHTML = 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：