JavaScript Object Accessors

JavaScript accessors (Getter en Setter)

ECMAScript 5 (2009) introduceerde Getter en Setter.

Getter en Setter laten u object accessors (gecalculateerde eigenschappen) definiëren.

JavaScript Getter (get-sleutelwoord)

Dit voorbeeld gebruikt lang Eigenschappen om te verkrijgen language Waarde van het eigenschap.

实例

// 创建对象：
var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "en",
  get lang() {
    return this.language;
  }
};
// 使用 getter 来显示来自对象的数据：
document.getElementById("demo").innerHTML = person.lang;

Probeer het zelf

JavaScript Setter (set-sleutelwoord)

Dit voorbeeld gebruikt lang Eigenschappen om in te stellen language Waarde van het eigenschap.

实例

var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "",
  set lang(lang) {
    this.language = lang;
  }
};
// 使用 setter 来设置对象属性：
person.lang = "en";
// 显示来自对象的数据：
document.getElementById("demo").innerHTML = person.language;

Probeer het zelf

JavaScript-functie of Getter?

Waar ligt het verschil tussen de twee voorbeelden?

Voorbeeld 1

var person = {
  firstName: "Bill",
  lastName : "Gates",
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};
// Gebruik methoden om gegevens van objecten weer te geven:
document.getElementById("demo").innerHTML = person.fullName();

Probeer het zelf

Voorbeeld 2

var person = {
  firstName: "Bill",
  lastName : "Gates",
  get fullName() {
    return this.firstName + " " + this.lastName;
  }
};
// 使用 getter 来显示来自对象的数据：
document.getElementById("demo").innerHTML = person.fullName;

Probeer het zelf

Voorbeeld 1 bereikt fullName via functie: person.fullName().

Voorbeeld 2 bereikt fullName via eigenschappen: person.fullName.

De tweede voorbeeld biedt een eenvoudiger syntaxis.

Datakwaliteit

Bij het gebruik van getter en setter kan JavaScript een betere datakwaliteit waarborgen.

在本例中，使用 lang Eigenschappen worden in hoofdletters geretourneerd language Waarde van het eigenschap:

实例

// 创建对象：
var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "en",
  get lang() {
    return this.language.toUpperCase();
  }
};
// 使用 getter 来显示来自对象的数据：
document.getElementById("demo").innerHTML = person.lang;

Probeer het zelf

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

实例

var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "",
  set lang(lang) {
    this.language = lang.toUpperCase();
  }
};
// 使用 setter 来设置对象属性：
person.lang = "en";
// 显示来自对象的数据：
document.getElementById("demo").innerHTML = person.language;

Probeer het zelf

为什么使用 Getter 和 Setter？

  • 它提供了更简洁的语法
  • 它允许属性和方法的语法相同
  • 它可以确保更好的数据质量
  • 有利于后台工作

一个计数器实例

实例

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;
  }
};
// Counter operatie:
obj.reset;
obj.add = 5;
obj.subtract = 1;
obj.increment;
obj.decrement;
Object.defineProperty()

Probeer het zelf

Object.defineProperty() 方法也可用于添加 Getter 和 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;}
});
// Counter operatie:
obj.reset;
obj.add = 5;
obj.subtract = 1;
obj.increment;
obj.decrement;

Probeer het zelf

Browserondersteuning

Internet Explorer 8 of eerder ondersteunt Getter en Setter niet:

Ja 9.0 Ja Ja Ja