JavaScript 对象存取器

JavaScript 存取器（Getter 和 Setter）

ECMAScript 5 (ES5 2009) 引入了 Getter 和 Setters。

Getter 和 Setter 允许您定义对象存取器（计算属性）。

JavaScript Getter（get 关键字）

这个例子使用了一个lang属性为get的值language属性。

示例

// Create an object:
const person = {
firstName: "John",
lastName: "Doe",
language: "en",
get lang() {
return this.language;
}
};

// Display data from the object using a getter:
document.getElementById("demo").innerHTML = person.lang;

亲自试一试 »

JavaScript Setter（set 关键字）

这个例子使用了一个lang属性为set的值language属性。

示例

const person = {
firstName: "John",
  lastName: "Doe",
  language: "",
set lang(lang) {
    this.language = lang;
  }
};

// Set an object property using a setter:
person.lang = "en";

// Display data from the object:
document.getElementById("demo").innerHTML = person.language;

亲自试一试 »

JavaScript 函数还是 Getter？

这两个例子有什么区别？

示例1

const person = {
firstName: "John",
lastName: "Doe",
fullName: function() {
return this.firstName + " " + this.lastName;
}
};

// Display data from the object using a method:
document.getElementById("demo").innerHTML = person.fullName();

亲自试一试 »

示例2

const person = {
firstName: "John",
lastName: "Doe",
get fullName() {
return this.firstName + " " + this.lastName;
}
};

// Display data from the object using a getter:
document.getElementById("demo").innerHTML = person.fullName;

亲自试一试 »

示例 1 将 fullName 作为函数访问：person.fullName()。

示例 2 将 fullName 作为属性访问：person.fullName。

第二个示例提供了更简单的语法。

数据质量

使用 getter 和 setter 时，JavaScript 可以确保更好的数据质量。

使用lang在此示例中，属性返回的值language大写的属性：

示例

// Create an object:
const person = {
  firstName: "John",
  lastName: "Doe",
language: "en",
get lang() {
    return this.language.toUpperCase();
  }
};

// Display data from the object using a getter:
document.getElementById("demo").innerHTML = person.lang;

亲自试一试 »

使用lang在此示例中，属性将大写值存储在language属性：

示例

const person = {
firstName: "John",
  lastName: "Doe",
language: "",
  set lang(lang) {
    this.language = lang.toUpperCase();
}
};

// Set an object property using a setter:
person.lang = "en";

// Display data from the object:
document.getElementById("demo").innerHTML = person.language;

亲自试一试 »

为什么使用 Getter 和 Setter？

它提供了更简单的语法
它允许属性和方法具有相同的语法
它可以确保更好的数据质量
对于在幕后做事情很有用

对象.defineProperty()

这个Object.defineProperty()方法也可用于添加 Getters 和 Setters：

存取器示例

// Define object
const obj = {counter : 0};

// Define setters and getters
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;

亲自试一试 »