La POO en JavaScript

Semblable à Java… en plus souple.

Créer des objets

Un objet est déclaré avec des accolades, à l’intérieur desquelles on déclare une liste de propriétés qui sont des paires nom:valeur.

On accède à la clé avec le point (BP) ou les crochets.

Les objets sont dynamiques : pas de new, ajout de propriétés simplifié —> cela demande une certaine rigueur pour ne pas faire n’importe quoi !

let uneFleur = {nom:"tulipe", couleur:"jaune"};
console.log(uneFleur); //{ nom: 'tulipe', couleur: 'jaune' }
console.log(uneFleur.nom + " === " + uneFleur["nom"]); //tulipe === tulipe
uneFleur.couleur="orange"; //orange
console.log(uneFleur.couleur);

Il est possible de faire des tableaux d’objets, même des tableaux de tableaux d’objets…

—> notation JSON.

Créer des classes

1. façon traditionnelle

Une classe se déclare avec let (comme une variable) et le mot-clé function : elle prend entre zéro et plusieurs paramètres, des attributs et des éventuelles fonctions.

Une instance se crée avec le mot-clé new et en renseignant les valeurs des différents paramètres.

let UneClasseALancienne = function (unParam, autreParam) {
    this.unParam = unParam;
    this.autreParam = autreParam;
    this.uneFonction =  function () {
        console.log("Je suis une fonction de classe.");
    }
}

let uneInstance = new UneClasseALancienne("une chaine de caractères", 42);
console.log(uneInstance);
/*
	UneClasseALancienne {
	  unParam: 'une chaine de caractères',
	  autreParam: 42,
	  uneFonction: [Function (anonymous)]
	}
*/
console.log(uneInstance.uneFonction()); //Je suis une fonction de classe.

2. Nouvelle façon (TypeScript)

Une classe se déclare avec le mot-clé class, elle possède un constructeur auquel on passe des paramètres et au sein duquel on déclare les attributs, elle possède également des méthodes.

Comme en Java, mais simplifié… On passe en fait par le tsc, compiler du TypeScript.

class UneClasse {
    constructor(unParam, autreParam) {
        this.unParam = unParam;
        this.autreParam = autreParam;
    }
    uneFonction() {
        console.log("Je suis une fonction de classe.");
    }
}
let uneNouvelleInstance = new UneClasse("une chaine de caractères", 42);
console.log(uneNouvelleInstance); //UneClasse { unParam: 'une chaine de caractères', autreParam: 42 }
console.log(uneNouvelleInstance.uneFonction()); //Je suis une fonction de classe.

Héritage

Une classe hérite des attributs et méthodes du parent.

• à l’ancienne, le lien à la classe parent se fait explicitement lors de la déclaration de la classe enfant avec ClasseParent.call(this, params parent);

• avec la nouvelle manière, le lien à la classe parent se fait avec extends lors de la déclaration de la classe enfant et on utilise super(params parent); dans le constructeur enfant pour faire appel au constructeur parent

BP : préférer l’utilisation de class et extends.

(+) Notion de prototype

Notion qui me reste hermétique… et qui est désuète.

Un prototype est la structure || forme que doit respecter la classe enfant et permet l’héritage des fonctions parent avec ClasseEnfant.prototype = Object.create(ClasseParent.prototype);.

Il est ensuite possible de substituer les fonctions avec ClasseEnfant.prototype.fonctionASubstituer = ...

Librairies

Un fichier JavaScript peut être considéré comme une libraire (ex : jQuery).

Contexte d’exécution

Quand on a différentes librairies, on veut avoir des contextes (ou cadres) d’exécution.

On utilise des fonctions anonymes, déclarées avec let uneFonctionAnonyme = function(params) { instructions } et appelées simplement avec uneFonctionAnonyme(valeurs);.

Une autre façon de déclarer une fonction anonyme est d’enlever le let et de l’encapsuler entre parenthèses : (function(param) { instructions }) ();.

BP : c’est mieux d’encapsuler la fonction anonyme car elle n’est pas enregistrée (elle n’a pas de nom), ce qui permet un gain de performance.

Il est possible de les déclarer et de les appeler immédiatement : fonctions anonymes immédiatement invoquées. La fonction est encapsulée dans des parenthèses, on renseigne la valeur des paramètres juste après : (function(param) { instructions }) (valeurs);

On utilise également des fonctions fléchées qui diffèrent des fonctions anonymes car elles n’utilisent pas le mot-clé function. Il s’agit d’une simplification de la syntaxe de déclaration dans laquelle les paramètres sont entre parenthèses (qui restent vides s’il n’y a pas de paramètres), suivis d’une flèche => et des instructions entre accolades. Lors de l’appel, les instructions sont évaluées et le résultat est retourné : let uneFonctionFlechee = () => { instructions };.

En Java, cela équivaut aux fonctions lambda.

let fonctionAnonyme = function(param) {
    console.log("Je suis une fonction anonyme !");
}

let fonctionInvoquee = (
	function(param) {
    console.log("Je suis immédiatement invoquée !");
})("un paramètre");

(() => {
    console.log("Je suis aussi une fonction invoquée, mais fléchée !");
})();

(+) Notion de closure

Désuet…

Spécialisation de méthodes :

via prototype possible mais verbeux et statique

via une fonction contextualisée (une closure) qui permet de retourner une fonction encapsulée (protégée du code)

exemple avec un compteur : on utilise une fonction anonyme automatiquement invoquée qui let un compteur et qui retourne une fonction anonyme dans laquelle j’incrémente le compteur et retourne le compter

—> donc le let est immédiatement invoqué lorsque le script est interprété (quand il passe sur la ligne) et ensuite quand on appelle la fonction, y a que le return qui est exécuté (ça incrémente le compteur et il est hors de portée si on passe par la fonction)

(+) pattern factory par closure

Stockage local

Deux variables sont disponibles pour sauvegarder des choses dans le navigateur, qui disparaissent lorsque le cache est supprimé : LocalStorage et SessionStorage, avec des méthodes associées comme setItem(cle,valeur), geItem(cle), removeItem(cle), clear().

object = { name: "Bob", age: 42 };

// sauvegarder un tableau, prealablement transforme en string
localStorage.setItem("oneObject", JSON.stringify(object));

// recuperer ce tableau
object = JSON.parse(localStorage.getItem("key"));

console.log(object);

Traitements asynchrones

On parle de “synchrone” lorsque les traitements sont effectués les uns après les autres et d’”asynchrone” lorsqu’ils sont effectués en parallèle.

Les traitements asynchrones permettent de laisser des traitements un peu longs se faire et récupérer le résultat plus tard, ce qui donne des applications plus réactives.

Option 1 : les callbacks

Désuet… Révolution à l’époque, maintenant on utilise des observables et des promesses.

“Capacité de passer une fonction à une autre fonction et s‘assurer que cette fonction peut être appelée dans notre fonction”.

Le mot-clé callback est passé en paramètre d’une fonction A lors de sa déclaration. Lors de l’appel de cette fonction A, une fonction B est passée pour le paramètre callback.

Exemple d’utilisation : mettre à jour une information sur un site (nombre de visiteurs, compteurs…) grâce aux méthodes setTimeout() ou setInterval() utilisées comme callbacks.

// Exemple d'Alain Cariou
//  les méthodes direHello() et direHaha() sont passés en tant que callback 
//  à la méthode repeter
function direHello() {
    console.log("Hello World !");
}

function direHaha() {
    console.log("Haha !")
}

function repeter(callback) {
    setInterval(function() {
        callback()
    }, 1000);
}

repeter(direHello);
console.log("Après répéter");
repeter(direHaha);

Option 2 : les promesses (très actuel)

“Mécanisme qui permet de faire un traitement de manière asynchrone”.

Il fonctionne avec un objet Promise qui prend en paramètre une fonction, qui elle-même prends deux paramètres (resolve si la promesse est un succès et reject en cas d’erreur).

Pour l’exécuter, on l’appelle et on récupère le résultat avec .then. On peut utiliser un . catch.

Exemple de traitement : interroger une API.

// Exemple d'Alain Cariou
function getData() {
    return new Promise((resolve, reject) => {
        console.log("Début promesse !");
        resolve({"ok": "Tout s'est bien passé !"});

        // setTimeout(() => {
        //     resolve({"ok": "Tout s'est bien passé !"});
        //     reject(new Error("Echec de la promesse !"));
        // }, 2000);
    });
}

let result;
console.log("I - Je fais des trucs.");
getData().then((data) => {
    result = data;
    console.log("II - Récupération des données : " + data);
}).catch((error) => {
    console.log(error);
});
result = getData();
console.log("III - Je fais d'autres trucs !");
console.log(result);

(+) les observables

Hors programme.

On peut chaîner les uns aux autres, on s’y subscribe (le flux de données peut continuer à arriver) ≠ promesse qui est juste une action qui commence et se termine.