04. Στοιχεία πρόσβασης (accessors) αντικειμένων JavaScript

Object Accessors


Βοηθοί JavaScript (Getters και Setters)

Το ECMAScript 5 (2009) εισήγαγε τους Getter και Setters.

Οι getters και οι setters σάς επιτρέπουν να ορίσετε Accessors αντικειμένων (Computed Properties).


JavaScript Getter (Η λέξη-κλειδί Get)

Αυτό το παράδειγμα χρησιμοποιεί μια lang ιδιότητα για να πάρει get την τιμή της language ιδιότητας.

Παράδειγμα

// 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 (Η λέξη-κλειδί Set)

Αυτό το παράδειγμα χρησιμοποιεί μια lang ιδιότητα για να θέσει set την τιμή της language ιδιότητας.

Παράδειγμα

var 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 Function ή Getter;

Ποιες είναι οι διαφορές μεταξύ αυτών των δύο παραδειγμάτων;

Παράδειγμα 1

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

Δοκιμάστε τον εαυτό σας »

Παράδειγμα 2

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;

Δοκιμάστε τον εαυτό σας »

Το παράδειγμα 1 έχει πρόσβαση στο fullName ως συνάρτηση: person.fullName ().

Το παράδειγμα 2 έχει πρόσβαση στο fullName ως ιδιότητα: person.fullName.

Το δεύτερο παράδειγμα παρέχει απλούστερη σύνταξη.


Ποιότητα δεδομένων

Η JavaScript μπορεί να εξασφαλίσει καλύτερη ποιότητα δεδομένων όταν χρησιμοποιούνται οι getters και οι setters.

Χρησιμοποιώντας την lang ιδιότητα, σε αυτό το παράδειγμα, επιστρέφει η τιμή της language ιδιότητας με κεφαλαία γράμματα:

Παράδειγμα

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

Δοκιμάστε τον εαυτό σας »

Η χρήση της lang ιδιότητας, σε αυτό το παράδειγμα, αποθηκεύει μια τιμή με κεφαλαία γράμματα στην language ιδιότητα:

Παράδειγμα

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

Δοκιμάστε τον εαυτό σας »


Γιατί να χρησιμοποιείτε Getters και Setters;

  • Δίνει απλούστερη σύνταξη
  • Επιτρέπει ισότιμη σύνταξη για ιδιότητες και μεθόδους
  • Μπορεί να εξασφαλίσει καλύτερη ποιότητα δεδομένων
  • Είναι χρήσιμο για να κάνεις πράγματα πίσω από τη σκηνή

Object.defineProperty()

Η Object.defineProperty() μέθοδος μπορεί επίσης να χρησιμοποιηθεί για να προσθέσει Getters και Setters:

Παράδειγμα

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

// Define 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;}
});

// Play with the counter:
obj.reset;
obj.add = 5;
obj.subtract = 1;
obj.increment;
obj.decrement;

Δοκιμάστε τον εαυτό σας »


Υποστήριξη προγραμμάτων περιήγησης

Οι Getters και οι Setters δεν υποστηρίζονται στον Internet Explorer 8 ή σε παλαιότερη έκδοση:

Yes9.0YesYesYes

Days
Hours
Minutes

04. Στοιχεία πρόσβασης (accessors) αντικειμένων JavaScript

Κοινοποίηση

Share on facebook
Share on twitter

Ακολουθήστε μας

Αρέσει σε %d bloggers: