JavaScript

Classes

Raconté par Arnaud de Mesmay sur la base d'un cours créé par Rémi Forax et Vincent Jugé.

Fonction vs Méthode

Un objet peut contenir des fonctions comme valeurs.
Une fonction dans un objet est appelée méthode.

const square = {
  surface: function(x) { return x * x; }
};
const disc = {
  surface: function(r) { return Math.PI * r * r; }
};
console.log(square.surface(3));
console.log(disc.surface(3));

this

Paramètre implicite qui contient l'objet sur lequel
on a appelé une méthode
(l'objet sur lequel on utilise l'opérateur '.').

const square = {
  side: 2,
  surface: function() {
   return this.side * this.side;
  }
};
console.log(square.surface());

this et appel de fonction

Que vaut this si on l'appelle comme une fonction ?

const isAdult = function() {
  return this.age >= 18;
}
let person = { age: 32, hasGrownUp: isAdult };
console.log(person.hasGrownUp());
console.log(isAdult(person));

isAdult ne prend pas d'argument et this vaut undefined !

Partage de méthodes

Si on a deux objets, il faut définir surface deux fois,
même si c'est le même code !?

const square1 = {
  side: 1,
  surface: function() { return this.side * this.side; }
};
const square2 = {
  side: 2,
  surface: function() { return this.side * this.side; }
};
console.log(square1.surface());
console.log(square2.surface());

Ça paraît idiot !

Les Classes

Définition d'une classe

Une classe définit un modèle de création d'objets.

Une classe contient des méthodes (fonctions qui agissent sur this) et un constructeur (méthode d'initialisation).

class Square {
  constructor(side) {
    this.side = side;
  }
  surface() {
    return this.side * this.side;
  }
}
let square = new Square(3);
console.log(square.surface());

Par convention, le nom des classes commence toujours par une majuscule.

Le mot-clé New

new permet de créer et d'initialiser des objets qui seront munis des méthodes listés dans une classe.

class Square {
  constructor(side) {
    this.side = side;
    this.numberOfSides = 4;
  }
  surface() { return this.side * this.side; }
  perimeter() {
    return this.side * this.numberOfSides;
  }
}
let square = new Square(10);
console.log(square.surface());
console.log(square.perimeter());

new Square crée un objet, initialise celui-ci avec la fonction constructor de la classe Square, et le munit de toutes les méthodes définies dans la classe Square.

Création d'objets

Deux syntaxes !

Avec les accolades :: si on n'a que des valeurs, ou un seul objet ;
const foo = { key1: 2, key2: 'hello' };
Avec new :: si on a plusieurs objets avec des méthodes. class Foo { constructor(key1, key2) { this.key1 = key1; this.key2 = key2; } meth1(x) { return ...; } } const foo = new Foo(2, 'hello'); foo.meth1(false);

Héritage (1/2)

Une classe B peut représenter un sous-ensemble (extends) d'une classe A : ses membres ont des capacités étendues.

Pour créer un B, on commence par créer un A grâce au mot-clé super.

class Rectangle {
  constructor(side1, side2) {
    this.side1 = side1;
    this.side2 = side2;
  }
  surface() { return this.side1 * this.side2; }
  perimeter() { return 2 * (this.side1 + this.side2); }
}
class Square extends Rectangle {
  constructor(side) {
    super(side, side);
  }
}
const square = new Square(10);
console.log(square.surface());
console.log(square.perimeter());

Héritage (2/2)

On peut ajouter des fonctions
et réécrire les fonctions de la classe mère.

Le mot-clé super permet d'invoquer une fonction de la classe mère
quand on a réécrit une fonction de même nom.

class Human {
  constructor(name) { this.name = name; }
  hello() { console.log(`Hi! I'm ${this.name}!`); }
}
class Student extends Human {
  constructor(name, field) {
    super(name);
    this.field = field;
  }
  hobbies() { console.log(`I love ${this.field}!`); }
  hello() { super.hello(); this.hobbies(); }
}
const alice = new Human("Alice");
const bob = new Student("Bob", "Web programming");
alice.hello();
bob.hello();

La notation "class"
et l'héritage…

permettent de regrouper dans un même endroit l'initialisation et la manipulation d'un type nommé.

existent déjà dans plusieurs autres languages
(C++, Java, Swift, Rust) et sont donc mieux comprises que la notion de délégation propre à JavaScript.

Classes prédéfinies

Classe prédéfinie : tableau

Pour JavaScript, un tableau (array) est un objet ;
length est une propriété des objets tableaux.

const array = [1, 2, 4];
// propriété :
array.length;
// méthode :
array.slice(1);
const array2 = new Array();
array2.length;

Le mot-clé new permet de créer un objet.

Classe prédéfinie : function

Pour JavaScript, une fonction (function) est un objet ;
name ou length sont des propriétés des objets fonctions.

const add = function(x,y) { return x + y; };
// propriété :
add.length;
// méthode :
add.toString();
const fun = new Function("a","b","return a + b;");
fun(1, 2);
fun.length;

length renvoie le nombre de paramètres de la fonction.