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 Properti untuk diambil language Nilai properti.

实例

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

Coba Sendiri

JavaScript Setter (kata kunci set)

Contoh ini menggunakan lang Properti untuk disetel language Nilai properti.

实例

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

Coba Sendiri

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

Coba Sendiri

Contoh 2

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

Coba Sendiri

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

Contoh 2 mengakses fullName dalam bentuk properti: 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 Properti diembalik dalam bentuk huruf besar. language Nilai properti:

实例

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

Coba Sendiri

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

Coba Sendiri

为什么使用 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;
  }
};
// Operasi penhitungan:
obj.reset;
obj.add = 5;
obj.subtract = 1;
obj.increment;
obj.decrement;
Object.defineProperty()

Coba Sendiri

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;}
});
// Operasi penhitungan:
obj.reset;
obj.add = 5;
obj.subtract = 1;
obj.increment;
obj.decrement;

Coba Sendiri

Dukungan Browser

Internet Explorer 8 atau versi yang lebih awal tidak mendukung Getter dan Setter:

Ya 9.0 Ya Ya Ya