Accesseurs d'objet JavaScript

Accesseurs JavaScript (Getter et Setter)

ECMAScript 5 (2009) a introduit les getters et setters.

Les getters et setters vous permettent de définir les accesseurs d'objet (attributs calculés).

JavaScript Getter (mot-clé get)

Dans cet exemple, nous utilisons lang Attribut pour obtenir language Valeur de l'attribut.

Instance

// Créer l'objet :
var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "en",
  get lang() {
    return this.language;
  }
};
// Utiliser le getter pour afficher les données provenant de l'objet :
document.getElementById("demo").innerHTML = person.lang;

Essayer vous-même

JavaScript Setter (mot-clé set)

Dans cet exemple, nous utilisons lang Attribut pour définir language Valeur de l'attribut.

Instance

var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "",
  set lang(lang) {
    this.language = lang;
  }
};
// Utiliser le setter pour définir la propriété de l'objet :
person.lang = "en";
// Afficher les données provenant de l'objet :
document.getElementById("demo").innerHTML = person.language;

Essayer vous-même

Fonction JavaScript ou Getter ?

Où se situe la différence entre les deux exemples suivants ?

Exemple 1

var person = {
  firstName: "Bill",
  lastName : "Gates",
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};
// Utiliser une méthode pour afficher les données provenant d'un objet :
document.getElementById("demo").innerHTML = person.fullName();

Essayer vous-même

Exemple 2

var person = {
  firstName: "Bill",
  lastName : "Gates",
  get fullName() {
    return this.firstName + " " + this.lastName;
  }
};
// Utiliser le getter pour afficher les données provenant de l'objet :
document.getElementById("demo").innerHTML = person.fullName;

Essayer vous-même

Exemple 1 : accès à fullName en tant que fonction : person.fullName().

Exemple 2 : accès à fullName en tant qu'attribut : person.fullName.

Le deuxième exemple fournit une syntaxe plus concise.

Qualité des données

En utilisant getter et setter, JavaScript peut assurer une meilleure qualité des données.

Dans cet exemple, utiliser lang Les attributs sont renvoyés en majuscules. language La valeur de l'attribut :

Instance

// Créer l'objet :
var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "en",
  get lang() {
    return this.language.toUpperCase();
  }
};
// Utiliser le getter pour afficher les données provenant de l'objet :
document.getElementById("demo").innerHTML = person.lang;

Essayer vous-même

Dans cet exemple, utiliser lang Les propriétés stockent les valeurs majuscules dans language Dans les propriétés :

Instance

var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "",
  set lang(lang) {
    this.language = lang.toUpperCase();
  }
};
// Utiliser le setter pour définir la propriété de l'objet :
person.lang = "en";
// Afficher les données provenant de l'objet :
document.getElementById("demo").innerHTML = person.language;

Essayer vous-même

Pourquoi utiliser Getter et Setter ?

  • Il fournit une syntaxe plus concise
  • Il permet une syntaxe identique pour les propriétés et les méthodes
  • Il garantit une meilleure qualité des données
  • Utile pour le travail en arrière-plan

Une instance de compteur

Instance

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;
  }
};
// Opérations sur le compteur :
obj.reset;
obj.add = 5;
obj.subtract = 1;
obj.increment;
obj.decrement;
Object.defineProperty()

Essayer vous-même

Object.defineProperty() La méthode peut également être utilisée pour ajouter Getter et Setter :

Instance

// Définir l'objet
var obj = {counter : 0};
// Définir les 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;}
});
// Opérations sur le compteur :
obj.reset;
obj.add = 5;
obj.subtract = 1;
obj.increment;
obj.decrement;

Essayer vous-même

Support du navigateur

Internet Explorer 8 et versions antérieures ne prennent pas en charge Getter et Setter :

Oui 9.0 Oui Oui Oui