JAVASCRIPT ORIENTÉ- AKHROUF Said © 2021
OBJET
SAID AKHROUF (AKHROUF@[Link]) - 2021 1
PLAN DU COURS
1. Premiers Pas avec la POO
2. Caractéristiques de classes et initialiseurs
3. Le principe : héritage
4. Structure du type Object
5. Fonctionnalités avancées
6. Avantages de TypeScript
SAID AKHROUF (AKHROUF@[Link]) - 2021 2
1 – PREMIERS PAS AVEC LA
POO
A. Principes de la POO
B. Le concept : classe
C. Définition des propriétés et méthodes public, private
D. Création de classe Template
E. Le mécanisme de prototype, __proto__
F. Objet et typage des objets TypeOf, instanceOf
SAID AKHROUF (AKHROUF@[Link]) - 2021 3
1-A – PRINCIPES DE LA POO
La Programmation Orientée-Objet a apporté 3 principes :
•Héritage : passage automatique des attributs et des méthodes
de la classe mère aux classes filles
•Encapsulation : public (+) ; private (–)
•Polymorphisme : redéfinition sans conflits
SAID AKHROUF (AKHROUF@[Link]) - 2021 4
1-B – LE CONCEPT : CLASSE
Classe : entité de base : modèle utilisé pour créer des objets
SAID AKHROUF (AKHROUF@[Link]) - 2021 5
SAID AKHROUF (AKHROUF@[Link]) - 2021 6
1-C – DÉFINITION DES PROPRIÉTÉS
ET MÉTHODES PUBLIC, PRIVATE
Public :
var client = new Object();
[Link] = "Mohamed"; [Link] = 33;
[Link] = function () { [Link](`${[Link]} a ${[Link]}`);}
let client2 ={ nom:"Mohamed", age:33,
afficher : function() { [Link](`${[Link]} a ${[Link]}`) } };
function Client (nom, age) {
[Link] = nom; [Link] = age;
[Link] = function () { [Link](`${[Link]} a ${[Link]}`) } ; }
SAID AKHROUF (AKHROUF@[Link]) - 2021 7
1-C – DÉFINITION DES PROPRIÉTÉS
ET MÉTHODES PUBLIC, PRIVATE
Private :
function Client2 (nom, age) {
let n=nom;let a; // attributs privés
if (age>0) a=age; else throw "Age ne peut pas être négatif";
[Link]=function(){return n;}; [Link]=function(nom){ n = nom}
[Link]=function(){return a;}; [Link]=function(age){ if(age>0) a=age; else throw
"Erreur";}
const display = function () { [Link](`${n} a ${a}`)} ; // méthode privée
[Link] = function() { display();};
}
let c5 = new Client2("Fahima", 44);
[Link](c5.a); [Link](); // erreur
SAID AKHROUF (AKHROUF@[Link]) - 2021 8
1-D – CRÉATION DE CLASSE
TEMPLATE
class Point {
#x;#y; // attributs privés
constructor(X,Y) { this.X = X; this.Y = Y; }
get X(){ return this.#x;} set X(X) { this.#x = X; } // nouveaux accesseurs
get Y(){ return this.#y;} set Y(Y) { this.#y = Y;}
deplacer(X, Y) { this.X = X; this.Y = Y; }
deplacer2(point) { [Link](point.X, point.Y); }
afficher() { [Link](`(${this.X},${this.Y})`) }
toString() { return `(${this.X},${this.Y})`;}
}
SAID AKHROUF (AKHROUF@[Link]) - 2021 9
1-E – LE MÉCANISME DE
PROTOTYPE, __PROTO__
Le prototype indique la base d’un type donné
Le prototype permet également d’étendre une classe donnée
[Link].Z = 0; // ajouter l’attribut Z à tous les Point
Chaque objet possède également un attribut « __proto__ » qui
déterminer le type de base utilisé pour la création de l’objet
let p = new Point(5,5);
[Link](p.__proto__); // {constructor: ƒ, deplacer: ƒ, deplacer2: ƒ, …}
[Link]([Link](p)); // même résultat
SAID AKHROUF (AKHROUF@[Link]) - 2021 10
1-F – OBJET ET TYPAGE DES
OBJETS TYPEOF,
INSTANCEOF
Javascript est langage à typage :
• faible pas besoin de déclarer le types des variables, attributs, objets
• dynamique les variables et attributs peuvent changer de types de valeurs
let x = 1;
x = ‘alpha’;
let o = new Object();
[Link] = ‘Mohamed’;
[Link] = 33;
[Link] = function() { [Link](`${[Link]} a ${[Link]}`); }
SAID AKHROUF (AKHROUF@[Link]) - 2021 11
1-F – OBJET ET TYPAGE DES
OBJETS TYPEOF, INSTANCEOF
L’opérateur typeof retourne le type de la variable, de l’attribut ou de l’objet
typeof x; // retourne string
L’opérateur logique instanceof indique si un objet est une instance de la
classe donnée
let p = new Point(5,10);
p instanceof Point; // retourne true
p instanceof Object; // retourne true
SAID AKHROUF (AKHROUF@[Link]) - 2021 12
2 – CARACTÉRISTIQUES DE
CLASSES ET INITIALISEURS
A. Utilité des constructeurs
B. Constructeur basé sur [Link]
C. Constructeur literal
D. Principe de scope safe
E. Création par singleton, pattern
F. Méthodes de création des propriétés, portée (private, public, static)
des propriétés
G. Portée des méthodes, mécanismes de polymorphisme
H. Préserver et gérer le Contexte this
SAID AKHROUF (AKHROUF@[Link]) - 2021 13
2-A – UTILITÉ DES
CONSTRUCTEURS
Le constructeur est une méthode qui permet d’initialiser (les attributs
d’) un objet
function Client(nom, age) { /* début du constructeur */
[Link] = nom; [Link] = age;
[Link] = function() { [Link](`${[Link]} a ${[Link]}`);
/* fin du constructeur */ }
class Client {
constructor(nom, age) {/* début du constructeur */
[Link] = nom; [Link] = age; /* fin du constructeur */ }
}
SAID AKHROUF (AKHROUF@[Link]) - 2021 14
2-B – CONSTRUCTEUR BASÉ
SUR [Link]
function Client (nom, age) {
[Link] = nom; [Link] = age;
[Link] = function () { [Link](`${[Link]} a ${[Link]}`) } ; }
let c1 = new Client(‘Mohamed’, 33);
let c2 = [Link](c1);
[Link](); // Mohamed a 33
[Link] = ‘Ali’; [Link] = 44;
[Link](); // Ali a 44
[Link](); // Mohamed a 33
SAID AKHROUF (AKHROUF@[Link]) - 2021 15
2-C – CONSTRUCTEUR
LITERAL
let client2 = { nom : "Mohamed", age : 33,
afficher : function () { [Link](`${[Link]} a ${[Link]}`)} };
SAID AKHROUF (AKHROUF@[Link]) - 2021 16
2-D – PRINCIPE DE SCOPE
SAFE
Portée locale vs globale
if (true) { var x = 1; let y = 2; const z = 3; }
[Link](x); // affiche 1
[Link](y); // Uncaught ReferenceError: y is not defined
[Link](z); // Uncaught ReferenceError: z is not defined
Portée contexte
[Link](this);
function logFunction() { [Link](this); }
logFunction(); // erreur
class Client { logNom() { [Link](this); } }
(new Client).logNom(); // affiche Client {} SAID AKHROUF (AKHROUF@[Link]) - 2021 17
2-E – CRÉATION PAR
SINGLETON, PATTERN
Le patron Singleton : une seule instance possible
class Employe {
constructor() {
if (typeof [Link] === 'object’) { return [Link]; }
[Link] = this;
return this; }
}
function Employe() {
if ([Link]) { return [Link]; }
if (!(this instanceof Employe)) { return new Employe(); }
[Link] = this; }
SAID AKHROUF (AKHROUF@[Link]) - 2021 18
2-F – MÉTHODES DE CRÉATION DES
PROPRIÉTÉS, PORTÉE (PRIVATE,
PUBLIC, STATIC) DES PROPRIÉTÉS
Private & public
(voir slides 7 à 9)
SAID AKHROUF (AKHROUF@[Link]) - 2021 19
2-F – MÉTHODES DE CRÉATION DES
PROPRIÉTÉS, PORTÉE (PRIVATE,
PUBLIC, STATIC) DES PROPRIÉTÉS
Propriétés et méthodes « static » : attributs et méthodes de classe
class Personne {
static nb = 0;
static nombrePersonnesCreees() { return [Link]; }
constructor() {[Link]++; }
}
let p = new Personne();
[Link]; // undefined
[Link]();//Uncaught TypeError: [Link] is not a function
[Link]; // 1
[Link](); // 1
SAID AKHROUF (AKHROUF@[Link]) - 2021 20
2-G – PORTÉE DES MÉTHODES,
MÉCANISMES DE POLYMORPHISME
Le principe de polymorphisme donne la possibilités la possibilité aux classes
filles de changer le comportement des méthodes héritées.
Toutefois, il serait nécessaire d’appeler le code initial (celui de la classe mère)
Par exemple, dans la classe Cube on va avoir :
superficie() { return [Link]()*6; }
// Au lieu de faire : return [Link] * [Link] * 6
Le même mot (super) peut être également utilisé pour appeler le
constructeur. Par exemple, dans le constructeur de Rectangle :
constructor (origine, nom, longueur, largeur) {
super(origine, nom, longueur); // au lieu de réécrire les 3 instructions
[Link] = largeur; } SAID AKHROUF (AKHROUF@[Link]) - 2021 21
2-H – PRÉSERVER ET GÉRER
LE CONTEXTE THIS
Le mot clé « this » fait référence à l’objet courant ; c’est-à-dire celui qu’on
utilise lors des appels.
This permet d’accéder aux attributs et aux méthodes de cet objet.
Par ailleurs, il est possible de reporter la définition de l’objet utilisé.
Exemple 1 :
let afficher = function() { return `(${this.X},${this.Y})`;}
let p = { X:5, Y:3, display:afficher}; [Link]();
Exemple 2 :
const point = {x:5, y:3 display: function() { return `(${this.X},${this.Y})`;}}
const afficher = [Link]; [Link](afficher()); // undefined
SAID AKHROUF (AKHROUF@[Link]) - 2021 22
const afficher2 = [Link](point); [Link](afficher2()); (5,3)
3 – LE PRINCIPE : HÉRITAGE
A. Comprendre les mécanismes d'héritage en JS
B. Héritage simple, multiple
C. Héritage par prototype
SAID AKHROUF (AKHROUF@[Link]) - 2021 23
3-A – COMPRENDRE LES
MÉCANISMES D'HÉRITAGE EN JS
Le plus simple des 3 principes de l’orienté-objet puisque issu du langage
naturel du monde réel.
Le principe consiste dans le passage des caractéristiques d’une classe à
d’autres afin (surtout) d’éviter de réécrire ou de faire copier/coller.
D’une façon générale, il existe 2 types :
•Simple : une classe peut avoir au max une seule classe mère ;
•Multiple : une classe peut avoir plusieurs classe mères en au max une seul
SAID AKHROUF (AKHROUF@[Link]) - 2021 24
3-B – HÉRITAGE SIMPLE,
MULTIPLE
Héritage Simple
Par mot clé :
class Carre extends FormeGeometrique {
// ……
}
SAID AKHROUF (AKHROUF@[Link]) - 2021 25
3-B – HÉRITAGE SIMPLE,
MULTIPLE
Héritage Multiple
Non supporté mais peut être réalisé (simuler) : un objet va hériter d’une classe
puis on change son prototype afin de prendre les caractéristiques d’une
deuxième classe.
SAID AKHROUF (AKHROUF@[Link]) - 2021 26
3-B – HÉRITAGE SIMPLE,
MULTIPLE
Héritage Multiple
class Avion { constructor() { [Link] = 2; } decoller() { [Link]('décollage'); } }
class Bateau{ constructor() { [Link] = 11; } accoster() { [Link]('accostage'); } }
class Canadair extends Classes([Avion,Bateau]) { constructor() { super(); [Link] = 1;} }
function Classes(bases) {
class Bases {
constructor() { [Link](base => [Link](this, new base())); } }
[Link](base => { [Link]([Link])
.filter(prop => prop != 'constructor')
.forEach(prop => [Link][prop] = [Link][prop])})
return Bases; }
SAID AKHROUF (AKHROUF@[Link]) - 2021 27
3-C – HÉRITAGE PAR
PROTOTYPE
let entreprise = { nom : "Sonatrach"} ;
let client = { contact:"info@[Link]"}
client.__proto__ = entreprise;
[Link] ;// retourne « Sonatrach »
SAID AKHROUF (AKHROUF@[Link]) - 2021 28
4 – STRUCTURE DU TYPE
OBJECT
A. Création Object literal, avec un constructeur
B. Création de propriétés et méthodes
C. Duplication d'objet par valeur, référence
D. Gestion du contexte this avec [Link] et [Link]
E. Démystifier les propriétés de Object
F. Modules : Object, AMD
SAID AKHROUF (AKHROUF@[Link]) - 2021 29
4-A – CRÉATION OBJECT LITERAL,
AVEC UN CONSTRUCTEUR
const Client = function(nom, age) {
return {
nom : nom, age : age,
afficher : function() { [Link](`${[Link]} a ${[Link]}`); }
}
}
let c1 = new Client('Mohamed', 33)
SAID AKHROUF (AKHROUF@[Link]) - 2021 30
4-B – CRÉATION DE
PROPRIÉTÉS ET
MÉTHODES
Javascript permet la création dynamique des objets
var PDate = [Link];
[Link](PDate, "année", {
get: function() { return [Link]() },
set: function(y) { [Link](y) } });
var now = new Date(); [Link]ée = 2000;
var client = { nom:"Mohamed", ne_le: new Date(1954, 10, 1)}
[Link](client, {
"age":{ get: function(){ return new Date().getFullYear()- this.ne_le. getFullYear(); }});
SAID AKHROUF (AKHROUF@[Link]) - 2021 31
4-C – DUPLICATION D'OBJET
PAR VALEUR, RÉFÉRENCE
L’affectation permet à une variable d’utiliser la même référence d’un autre
objet
var p = { x: 5, y:10 };
var q = p; q.x = 22;
La méthode « assign » permet de clôner un objet
var p = { x: 5, y:5 };
var q = [Link]({}, p);
La méthode « assign » permet de fusionner des objets
var d3 = { x: 3, y: 3, z: 3 }; var d2 = { x: 2, y: 2 }; var d1 = { x: 1 };
var p = [Link]({}, d3, d2, d1); //x:1,y:2,z:3 SAID AKHROUF (AKHROUF@[Link]) - 2021 32
4-D – GESTION DU CONTEXTE THIS
AVEC [Link] ET [Link]
[Link] :
const client = { nom : 'Mohamed’, age : 33}
function afficher () { return `${[Link]} a ${[Link]}`;}
let msg = [Link](client);
[Link] :
var Client = { afficher : function() { return `${[Link]} a ${[Link]}`;}}
const client1 = { nom : 'Mohamed’, age : 33}
[Link](client1);
SAID AKHROUF (AKHROUF@[Link]) - 2021 33
4-E – DÉMYSTIFIER LES
PROPRIÉTÉS DE OBJECT
Constructeur utilisé pour la création de l’objet
Vérifier si l’objet a une propriété donnée
Vérifier si l’objet actuel a été utilisé comme prototype d’un autre objet
Vérifier si la propriété peut être parcouru avec for … in
Retourne une chaîne représentant l’objet pour une localisation donnée (ar-DZ)
Retourne une chaîne représentant l’objet
Retourne la valeur équivalente à l’objet
(obselète)
(obselète)
(obselète)
(obselète)
SAID AKHROUF (AKHROUF@[Link]) - 2021 34
4-F –MODULES : OBJECT,
AMD
Après avoir été supporté longtemps par différentes bibliothèques et
Framework comme :
• AMD : implémenté initialement par la bibliothèque [Link]
• CommonJS : système de module créé pour un serveur [Link]
• UMD (Universal Module Definition) : un autre système qui supporte les deux
précédents
Maintenant, les navigateurs supportent nativement les modules (ESM).
Le principe est très simple : un module devra « export » des parties
(constantes, variables, fonctions, classes, … ) de son code et les autres
modules vont « import » ces parties SAID AKHROUF (AKHROUF@[Link]) - 2021 35
4-F –MODULES : OBJECT,
AMD
ESM – Ecma Script Module
[Link]
export class Point { /* copier le code du slide 9*/ }
[Link]
import * as Point from ‘./modules/[Link]’;
let p = new [Link](5,3);
[Link]
<script type="module" src="[Link]" ></script>
SAID AKHROUF (AKHROUF@[Link]) - 2021 36
4-F –MODULES : OBJECT,
AMD
AMD (Asynchronous Module Definition) :
• Importe les modules de manière asynchrone
• Fait pour le frontend (quand il a été proposé)
SAID AKHROUF (AKHROUF@[Link]) - 2021 37
4-F –MODULES : OBJECT,
AMD
AMD (Asynchronous Module Definition) :
[Link]
define({ afficher: function () { alert(‘ca marche’); }})
[Link]
require(["exemple"], function (ex) { [Link](); });
[Link]
<script data-main="js/main" src="js/[Link]"></script>
SAID AKHROUF (AKHROUF@[Link]) - 2021 38
5 – FONCTIONNALITÉS
AVANCÉES
A. Déclaration des variables, typage, nomenclature, accès au DOM
B. Comprendre le mécanisme de Hoisting
C. Promises et la Programmation asynchrone
D. Echange Ajax d'objets structurés et sérialisation de multiples formats
(texte, image, JSON)
E. Création d'un Namespace static, Namespace objet, module pattern,
namespace proxy
F. Fonctions anonymes, closures
G. Comprendre les principes du callback
SAID AKHROUF (AKHROUF@[Link]) - 2021 39
5-A – DÉCLARATION DES VARIABLES,
TYPAGE, NOMENCLATURE,
ACCÈS AU DOM
Les variables peuvent être déclarées avec l’un des mots suivants :
• var : technique initiale de déclaration (permet la re-déclaration, …)
• let : technique plus rigoureuse (permet un meilleur contrôle du code)
• const : plutôt une constante (même rigueur que let)
Il faut prendre en considération les remarques suivantes quant au nom :
• Peut contenir des lettres, des chiffres, des traits de soulignement et des signes
dollar
• Doit commencer par une lettre, $ ou _
• Est sensible à la casse
• Différent d’un mot réservé
Il existe également des conventions à respecter lors de l’écriture du code. Par
exemple, [Link]/js/js_conventions.aspSAID AKHROUF (AKHROUF@[Link]) - 2021 40
5-A – DÉCLARATION DES VARIABLES,
TYPAGE, NOMENCLATURE,
ACCÈS AU DOM
Bien que JS est un langage faiblement typé, JS gère plusieurs types de
données :
• Chaîne de caractère (String)
• Nombres (Number et BigInt)
• Booléen (Boolean)
• undefined [si aucune ni précisée]
• null [valeur vide]
• Tableaux
• Objets
SAID AKHROUF (AKHROUF@[Link]) - 2021 41
5-A – DÉCLARATION DES VARIABLES,
TYPAGE, NOMENCLATURE,
ACCÈS AU DOM
Quand une page est chargée, le navigateur crée le DOM (Document Object
Model). Le DOM est un arbre constituer des différents éléments HTML.
Il existe plusieurs méthodes d’accès et de modification parmi elles :
• Recherche : [Link]("div1") ;
[Link]("p"); [Link]("#div1")…
• Pour chaque nœud : [Link][0]; [Link] ; [Link] ; [Link] ;
[Link] ; [Link]
• Créer un nouvel élément : [Link]("div")
• Ajouter à l’affichage : [Link](div)
• Supprimer : [Link](div)
• Accès aux attributs : [Link]("style"); [Link]("style")
• Accès au(x) formulaire(s) : [Link]["form1"]["user"]
• Contenu comme HTML : [Link] SAID AKHROUF (AKHROUF@[Link]) - 2021 42
5-B – COMPRENDRE LE
MÉCANISME DE HOISTING
Hoisting est un comportment de JavaScript qui va déplacer toutes déclarations
en haut du bloc actuel (que se soit un script ou une fonction).
Or, les variables déclarées avec let et const sont hissées en haut du bloc actuel
MAIS non initialisées :
Si on utilise une variable « let » avant sa déclaration on va générer
ReferenceError
Si on utilise une constante avant sa déclaration on va avoir une erreur de
syntaxe
Dans le mode stricte de Javascript, il n’est pas possible d’utiliser une variable
SAID AKHROUF (AKHROUF@[Link]) - 2021 43
avant sa déclaration
5-B – COMPRENDRE LE
MÉCANISME DE HOISTING
Le mode stricte a été ajouté dans ECMAScript 5 et il est activé via l’expression
"use stricte"; Cette expression est ignorée par les versions antérieures
Ce mode garantit une meilleure qualité du code en empêchant :
L’utilisation d’une variable ou un objet sans déclaration
La suppression d’une variable, un objet, une fonction ou une propriété non supprimable
La duplication du nom d’un argument
La modification d’une propriété en lecture seule (var obj = {}; [Link](obj, "x",
{value:0, writable:false});
La modification d’une propriété avec get seulement (var obj = {get x() {return 0} };)
L’utilisation pour des variables les mots eval , arguments ou nouveaux mots clés à savoir :
implements, interface, let, package, private, protected, public, static, yield
La déclaration de variables avec la fonction « eval »
L’utilisation de l’opérateur « with » (with (Math){x = cos(2)};)
L’utilisation de « this » dans une fonction : si aucun objet
SAID n’est
AKHROUFspécifié, la fonction
(AKHROUF@[Link]) - 2021 va
44
5-C – PROMISES ET LA
PROGRAMMATION ASYNCHRONE
Promise (promesse) : objet qui représente la complétion ou l'échec d'une
opération asynchrone.
var promesse = new Promise((reussite, echec) => {
if (…)) {
let resultat = appelQuelquonque();
reussite(resultat);
} else { echec(new Error(’problème n° 1’)); } });
[Link]( res => fonction1(res) )
.catch( err => fonction2(err)); SAID AKHROUF (AKHROUF@[Link]) - 2021 45
5-C – PROMISES ET LA
PROGRAMMATION ASYNCHRONE
Deux mots clés sont introduits dans ECMAScript2017 (ES8) pour simplifier les
promesses :
• async permet une fonction asynchrone et son résultat est une promesse
• await permet d’attendre une promesse (résolue ou rejeter). ne peut être
utilisée qu’à l’intérieur d’une fonction async
const message = async nom => { return nom; }
message('mohamed').then( resultat => [Link](`Bienvenue ${resultat}`); );
const message2 = async msg => {
const texte = await message(msg);
[Link] (`Bienvenue ${texte}`); }
SAID AKHROUF (AKHROUF@[Link]) - 2021 46
5-D – ECHANGE AJAX D'OBJETS
STRUCTURÉS ET SÉRIALISATION DE
MULTIPLES FORMATS (TEXTE, IMAGE, JSON)
API Fetch :
• Pour récupérer des ressources de manière asynchrone ; successeur de
XMLHttpRequest
• Fournit des objets Request, Response, Header, Body pour manipuler les
requêtes et leurs résultats
• La méthode fetch() renvoie une promesse résolue avec la réponse (objet
Response) ayant la propriété [Link] pour savoir si la requête a réussi.
La promesse échoue en cas d’erreur réseau
SAID AKHROUF (AKHROUF@[Link]) - 2021 47
5-D – ECHANGE AJAX D'OBJETS
STRUCTURÉS ET SÉRIALISATION DE
MULTIPLES FORMATS (TEXTE, IMAGE, JSON)
Exemple 1 :
fetch('[Link]
.then( reponse => { if ([Link]) { return [Link](); }
throw new Error(’book unknown’);)
.then( liste => afficherUtilisateurs(liste))
.catch( error => [Link]([Link]) );
Exemple 2 :
const options = { method:’POST’, headers:{"Content-Type":"application/json"},
body : [Link]({ username : [Link] }};
fetch('[Link] options)
.then(...);
SAID AKHROUF (AKHROUF@[Link]) - 2021 48
5-E –CRÉATION D'UN NAMESPACE
STATIC, NAMESPACE OBJET,
MODULE PATTERN, NAMESPACE PROXY
Les variables globales doivent être réservées aux objets qui ont a besoin et
elles doivent être nommées pour éviter toute ambiguïté et minimiser le risque
de collision de noms
Alors que faire à ce sujet? Il faut créer un petit nombre d'objets globaux qui
serviront de facto d'espaces de noms (namespace) pour les modules
Namespace static :
Affectation directe : var lms={}; [Link]=true; lms.m1=function() { }
Objet littéral : var lms={ [Link] m1:function() { } }
Patron Module : var lms=(function(){ var sms=true; return{ m1:function(){}})()
Namespace dynamique :
Fournir un argument : var lms=(function(ctx){var sms=true; ctx.m1=function(){}})
(lms)
SAID AKHROUF (AKHROUF@[Link]) - 2021 49
Namespace Proxy : var lms={};
5-F – FONCTIONS
ANONYMES, CLOSURES
Fonctions anonymes : Des fonction sans nom !
var x = function(a,b) {return a+b;} var somme=x(5,3); (function(){alert(‘ok’);})
()
Closures (fermeture) : C’est la possibilité de renvoyer une fonction à
l’intérieur d’une fonction dans le but de cacher des propriétés et des
méthodes
function Compteur() { var nb=0; function incrementer() { return nb += 1; };
return incrementer;}
var c = Compteur();
SAID AKHROUF (AKHROUF@[Link]) - 2021 50
alert(c());
5-G – COMPRENDRE LES
PRINCIPES DU CALLBACK
Callback : une fonction envoyé comme argument à une autre fonction. Ce
principe était très utilisé avec la programmation asynchrone
Exemple :
function afficher(msg) { alert(msg) }
function envoyerSms(msg) { … }
function traitement( a, b, fn) { var c = a+b; fn(c); }
traitement(5, 3, afficher);
traitement(2, 6, envoyerSms);
SAID AKHROUF (AKHROUF@[Link]) - 2021 51
6 – AVANTAGES DE TYPE
SCRIPT
A. Typage de données.
B. Constructeurs, instances (méthode et propriété), interfaces.
C. Création de Class, Objects (private, public, static...).
D. Getters, Setters.
E. Héritage, surcharge.
F. Gestion du contexte.
G. Polymorphisme
SAID AKHROUF (AKHROUF@[Link]) - 2021 52
6-A – TYPAGE DE DONNÉES
Un des points les plus importants qui nous amènent à utiliser Type Script (la
surcouche JavaScript développé par Microsoft et influencé par C#) est le typage fort
: d’où déjà le nom
Les types de données disponibles sont :
• Booléen : let marie : boolean = false;
• Nombre (number ou bigint)
• Chaîne (string)
• Tableau : let t : number[]=[1,2]; let t2 : Array<number> = [1,2]
• Tuple : let cl :[number, string]
• Enumération : enum Regions { nord, sud, est, ouest }
• Inconnu (unknown)
• N’importe (any)
• Vide (void)
• Nul (null) et indéfini (undefined) SAID AKHROUF (AKHROUF@[Link]) - 2021 53
•
6-B – CONSTRUCTEURS, INSTANCES
(MÉTHODE ET PROPRIÉTÉ),
INTERFACES.
SAID AKHROUF (AKHROUF@[Link]) - 2021 54
6-C – CRÉATION DE CLASS,
OBJECTS (PRIVATE, PUBLIC,
STATIC...)
export interface IForme3D { import { IForme3D } from './Iforme3D'
nom? : string; class Carre implements IForme3D {
readonly longueur : number ;
longueur : number;
superficie() :()=>number ;
private nom? :string;
volume() : number ;
} constructor (nom:string, longueur:number) {
[Link] = nom ; [Link]=longueur ;
}
Par défaut, tous les attributs sont superficie() { return longueur * longueur ; }
publiques volume() { return 0;}
« private » ou « # » accessible
}
uniquement dans la classe qu’il a
déclarer
« protected » permet aux classes
filles d’accéder à ces attributs SAID AKHROUF (AKHROUF@[Link]) - 2021 55
6-D – GETTERS, SETTERS
class Point {
private x: number;
get X(): number { return this.x; }
set X(x: number) { if(x>=0) this.x=x else throw new Error("X doit être >=0");}
}
SAID AKHROUF (AKHROUF@[Link]) - 2021 56
6-E – HÉRITAGE,
SURCHARGE
Héritage :
Pour indiquer l’héritage, utiliser le mot clé extends. Type Script ne supporte
pas l’héritage multiple
Le mot clé super permet particulièrement d’exécuter une méthode selon
l’implémentation faite dans la classe mère (en cas de redéfinition)
Surcharge :
Contrairement à JavaScript, TypeScript supporte la surcharge de méthodes il
est possible d’avoir plusieurs méthodes avec le même nom MAIS différents
arguments
static somme(a:string, b:string):string { returnSAID
`${a}
AKHROUF ${b}`; }
(AKHROUF@[Link]) - 2021 57
6-F – GESTION DU
CONTEXTE
Tout comme JavaScript, le contexte est détecté par le mot this qui désigne
l’objet courant c’est-à-dire celui sur lequel on travaille.
SAID AKHROUF (AKHROUF@[Link]) - 2021 58
6-G – POLYMORPHISME
Polymorphis
La compilation suit la
déclaration
me
L’exécution suit
l’instanciation
SAID AKHROUF (AKHROUF@[Link]) - 2021 59