Cara menggunakan javascript get/set

Pengakses JavaScript [Getters dan Setter]

ECMAScript 5 pada tahun [2009] pertama kali memperkenalkan Getter and Setter.

Getters dan setter memungkinkan Anda untuk menentukan Object Accessors [Computed Properties].

Section Artikel

• 1 JavaScript Getter [Keyword get]
• 2 JavaScript Setter [Keyword set ]
• 3 JavaScript Fungsi atau Getter?
• 4 Kualitas data
• 5 Mengapa Menggunakan Getter dan Setter?
• 6 Object.defineProperty[]
• 7 Browser Support

JavaScript Getter [Keyword get]

Contoh ini menggunakan properti lang untuk mendapatkan nilai properti bahasa.

JavaScript Getters dan Setter

 Getters dan setter memungkinkan Anda mendapatkan dan mengatur properti melalui metode. 
 Contoh ini menggunakan properti lang untuk mendapatkan nilai properti bahasa. 



// Create an object:
var 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 [Keyword set ]

Contoh ini menggunakan properti lang untuk mengatur nilai properti bahasa.

JavaScript Getters dan Setters

 Getters dan setter memungkinkan Anda mendapatkan dan menyetel properti melalui metode. 
 Contoh ini menggunakan properti lang untuk menyetel nilai properti bahasa. 



// 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;

JavaScript Fungsi atau Getter?

Apa perbedaan antara kedua contoh ini?

JavaScript Object Method

 Data objek dapat diakses menggunakan properti yang disimpan sebagai fungsi. 



// Create an object:
var 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[];

JavaScript Object Method

 Data objek dapat diakses menggunakan getter. 




// Create an object:
var 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;

Contoh 1 akses fullName sebagai fungsi: person.fullName [].

Contoh 2 akses fullName sebagai properti: person.fullName.

Contoh kedua memberikan sintaks yang lebih sederhana.

Kualitas data

JavaScript dapat mengamankan kualitas data yang lebih baik saat menggunakan getter dan setter.

Menggunakan properti lang, dalam contoh ini, mengembalikan nilai properti bahasa dalam huruf besar.

Contoh:

JavaScript Getter dan Setter

 Getters dan setter memungkinkan Anda mendapatkan dan menyetel properti melalui metode. 



// Create an object:
var 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;

Menggunakan properti lang, dalam contoh ini, menyimpan nilai huruf besar di properti bahasa:

JavaScript Getter dan Setter

 Getters dan setter memungkinkan Anda mendapatkan dan menyetel properti melalui metode. 



// Create an object:
var person = {
  firstName: "John",
  lastName : "Doe",
  language : "",
  set lang[lang] {
    this.language = lang.toUpperCase[];
  }
};
// Set a property using set:
person.lang = "en";
// Display data from the object:
document.getElementById["demo"].innerHTML = person.language;

Mengapa Menggunakan Getter dan Setter?

• Membuat sintaks yang lebih sederhana
• Memungkinkan membuat sintaks yang sama untuk properti dan metode
• Dapat mengamankan kualitas data yang lebih baik
• Berguna untuk melakukan hal-hal di balik layar

Object.defineProperty[]

Metode Object.defineProperty[] juga bisa digunakan untuk menambahkan Getter dan Setter:

JavaScript Getter dan Setter

 Sempurna untuk membuat penghitung: 



// Define an object
var 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 counter:
obj.reset;
obj.add = 5;
obj.subtract = 1;
obj.increment;
obj.decrement;
document.getElementById["demo"].innerHTML = obj.counter;

Browser Support

Getters dan Setter tidak didukung di Internet Explorer 8 atau versi sebelumnya: