Aksesori Objek JavaScript

Aksesori JavaScript (Getter dan Setter)

ECMAScript 5 (2009) memperkenalkan Getter dan Setter.

Getter dan Setter memungkinkan Anda mendefinisikan aksesori objek (properti yang dihitung).

JavaScript Getter (kata kunci get)

Contoh ini menggunakan lang Sifat untuk diambil language Nilai sifat.

实例

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

亲自试一试

JavaScript Setter (kata kunci set)

Contoh ini menggunakan lang Sifat untuk disetel language Nilai sifat.

实例

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

亲自试一试

Fungsi JavaScript atau Getter?

Di mana perbedaan antara dua contoh di bawah ini?

Contoh 1

var person = {
  firstName: "Bill",
  lastName : "Gates",
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};
// Menggunakan metode untuk menampilkan data dari objek:
document.getElementById("demo").innerHTML = person.fullName();

亲自试一试

Contoh 2

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

亲自试一试

Contoh 1 mengakses fullName dalam bentuk fungsi: person.fullName().

Contoh 2 mengakses fullName dalam bentuk sifat: person.fullName.

Contoh kedua menyediakan sintaks yang lebih sederhana.

Kualitas data

Pada saat menggunakan getter dan setter, JavaScript dapat memastikan kualitas data yang lebih baik.

在本例中，使用 lang Sifat diembalikan dalam bentuk huruf besar. language Nilai sifat:

实例

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

亲自试一试

在本例中，使用 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;

亲自试一试

为什么使用 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;
  }
};
// 操作计数器：
obj.reset;
obj.add = 5;
obj.subtract = 1;
obj.increment;
obj.decrement;
Object.defineProperty()

亲自试一试

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;}
});
// 操作计数器：
obj.reset;
obj.add = 5;
obj.subtract = 1;
obj.increment;
obj.decrement;

亲自试一试

浏览器支持

Internet Explorer 8 或更早的版本不支持 Getter 和 Setter：

Yes 9.0 Yes Yes Yes