Getters et setters

Niveaux d'accès et héritage

En programmation orientée objet, on créé souvent des méthodes pour modifier ou accéder à des attributs ou autres instances. En effet, ces éléments sont souvent protégés et accessibles uniquement au sein même de la classe (donc des méthodes). Il y a plusieurs types d'accessibilités pour des méthodes et attributs :

• private : Accessible uniquement à l'intérieur de la classe (par des méthodes de la classe).

• public : Accessible à l'extérieur de la classe, via la manipulation d'une instance par exemple.

• protected : Accessible uniquement dans la classe et les classes enfants (par héritage).

Il est possible d'avoir de petites variations de fonctionnement d'un langage à l'autre, il est important de toujours se référer à la documentation du langage manipulé.

Le but d'un setter est de redéfinir l'attribut précisé (une méthode setName pour modifier l'attribut name) et le but d'un getter est de renvoyer l'attribut précisé (une méthode getName pour obtenir la valeur de l'attribut name).

Dans la remarque précédente, j'ai parlé d'héritage de classe. En effet, il y a des systèmes de classes parent et de classes enfant. Lors de la définition d'une classe, dans la plupart des langages on peut faire en sorte qu'elle hérite de méthodes et attributs d'une autre classe, qui sera alors son parent. Le mot clé utilisé pour définir cet héritage est généralement extends. Cependant la notation varie fortement d'un langage à l'autre.

Voici un exemple de définition de classe et d'initialisation d'instance utilisant les notions abordées, de getters, setters et héritage.

// Classe parent (constructor est la méthode en JavaScript qui est executée
// lors de l'initialisation d'une instance. On appelle cela la méthode d'initialisation.
// Elle porte un nom différent selon les langages mais s'appelle souvent "init")
class Car {
  constructor(brand) {
    this.carname = brand;
  }
  present() {
    return 'I have a ' + this.carname;
  }
}
// Classe enfant de "Car", nommée "Model".
class Model extends Car {
  constructor(brand, mod) {
    super(brand);
    this.model = mod;
  }
  show() {
    return this.present() + ', it is a ' + this.model;
  }
}
// Initialisation d'une instance de la classe "Model", nommée "myCar".
let myCar = new Model("Ford", "Mustang");
document.getElementById("demo").innerHTML = myCar.show();
// On peut aussi utiliser une méthode définit dans sa classe parent.
document.getElementById("name").innerHTML = myCar.present();

Utiliser les getters en JavaScript

Parcourir le DOM se fait à l'aide de getters. Ce sont des méthodes permettant d'accéder à certains éléments du DOM à partir d'autres. On part toujours d'un seul élément principal qui est le "document", c'est l'élément qui englobe tous les autres éléments HTML de notre page, si l'on met de côtés quelques subtilités dont on se passera ici par soucis de simplicité.

Par exemple l'instruction :

var form = document.getElementById("formulaire");

permet de créer une variable form et d'y stocker l'élément (censé être unique) de notre contenu HTML qui possède l'id (l'attribut id) "formulaire". Élément sur lequel nous pouvons aussi appliquer des getters pour parcourir ses éléments enfants, c'est à dire les éléments HTML contenus à l'intérieur de cette balise.

Vous remarquerez ici que document est un élément du DOM sur lequel je peux utiliser des getters pour parcourir l'ensemble du contenu HTML de ma page.

Il faut savoir qu'il est aussi possible d'obtenir une liste d'éléments si notre getters nous permet de "sélectionner" plusieurs éléments. Par exemple, plusieurs éléments peuvent posséder la classe elem à l'intérieur d'une div avec un id "formulaire". Comme cela :

<div id="formulaire">
    <p class="elem">coucou</p>
    <p class="elem">salut</p>
    <p class="elem">bonjour</p>
</div>

Ainsi, pour récupérer une liste de tous ces paragraphes, nous pouvons faire :

var paragraphes = document.getElementById("formulaire").getElementsByClassName("elem");

Ici, nous voulons la liste de tous les éléments possédant la classe elem contenu dans la balise HTML d'id "formulaire", elle même contenu dans le document.

Vous avez énormément de getters différents, il ne sert à rien de tous les présenter ni même de tous les retenir. En effet, il suffit d'avoir compris leur principe pour savoir les utiliser. Si vous avez besoin d'un getters dont vous ne connaissez pas l'existence, il suffit de chercher sur les forums ou bien la doc JavaScript.

Sachez seulement qu'il existe une solution pour obtenir via les getters n'importe quel élément en utilisant n'importe lequel de ses attributs HTML. Voici quelques exemples de getters très utilisés ci-dessous :

Méthode	Description
getElementsById	Permet d'obtenir le premier élément d'un certains id.
getElementsByClassName	Permet d'obtenir la liste de tous les éléments possédant la classe indiquée.
getElementsByTagName	Permet d'obtenir la liste de tous les éléments d'un certains type de balise (div, p, span, input, form, etc..)
querySelector	Permet d'obtenir le premier élément rencontré concerné par le sélecteur CSS indiqué.
querySelectorAll	Permet d'obtenir la liste de tous les éléments concernés par le sélecteur CSS indiqué.

Vous pouvez vous rendre compte, si vous êtes familiers avec CSS qu'avoir des getters permettant de sélectionner des éléments par sélecteur est de loin la méthode la plus puissante.