« this » dans différents contextes en JavaScript

Jean-Dadet Luyalu Dr. Diasoluka

Description

L’objet pointé par « this » varie selon son environnement englobant (espace global, fonction ordinaire, fonction fléchée, élément HTML,..), et son contexte (« mode sloppy » ou « mode strict »).
Quelque soit le mode (strict ou sloppy) « this » dans une instance (telle que défini dans le constructeur) représente l’instance.
Il est toujours prudent de tester le « this » et y veiller dans les deux contextes environnementaux (sloppy et strict).

Informations

• Publié par: diasoluyalu
• Publié le: 24 mars 2019
• Nombre de lectures: 2
• Langue: Français

Extrait

:« this » dans diférents contextes:
J AVA S C R I P T(Programmation Internet)V O L .
V

J.B. Dadet DIASOLUKA Luyalu Nzoyifuanga
+243 - 851278216 - 899508675 - 991239212 - 902263541
813572818
La dernière révision de ce texte est disponible sur CD.

CHAPITRE 11 : « this » dans diférents contextes :

L’objet pointé par «this» varie selon son
environnement englobant (espace global, fonction
ordinaire, fonction léchée, élément HTML,..), et son
contexte(«modesloppy» ou «modestrict»).

Quelque soit le mode (strict ousloppy) «this» dans
une instance (telle que déini dans le constructeur)
représente l’instance.

Il est toujours prudent de tester le « this» et y veiller
dans les deux contextes environnementaux (sloppy et
strict).

I.Enmode STRICT, «this» dans une fonction
ordinaire représenteundeined.

<scripttype="text/javascript">"use strict";
// En MODE STRICT,
// this dans une fonction ordinaire
// représente l'objet global widonw.

functiono(p){
///////// this.prop=45;
//TypeError: this is undefinedtest.html:6:5
console.log('"',this,'"');
console.log(this===window);
console.log('"',p,'"');

}

J.D.B. DIASOLUKA Nz.Luyalu
JavaScript Tome-V

o();
/*
" undefined "test.html:8:5
false test.html:9:5
" undefined "test.html:10:5
*/

letio=newo(this);
/*
" Object {} "test.html:8:5
false test.html:9:5
" Window ... "test.html:10:5
*/
</script>

II.Enmode STANDARD, «this» dans une fonction
ordinaire représente l’objet global window. Mais
dans (ou pendant) la déinition des propriétés d’une
fonction, «this» représente le constructeur et,
dans une instance, il représente l’instance.

<scripttype="text/javascript">
// En MODE STANDARD,
//this dans une fonction ordinaire
//représente l'objet global widonw.

functiono(p){
this.prop=45;
console.log('"',this,'"');
console.log(this===window);
console.log('"',p,'"');
}

o();
/*
"Window "test.html:7:5
truetest.html:8:5

La variable« this »mercredi, 20./ 142 2
mars 2019

J.D.B. DIASOLUKA Nz.Luyalu
JavaScript Tome-V
"undefined "test.html:9:5
*/

letio=newo(this);
/*
"Object { prop: 45 } "test.html:7:5
falsetest.html:8:5
"Window ... "test.html:9:5
*/
</script>

III.Dans uneinstance,
TOUJOURS l’instance :

«this»

<scripttype="text/javascript">"use strict";
// this dans une instanc représente
// TOUJOURS un poineur sur l'instance.

functiono(p){
this.prop=45;
}

letio=newo();
console.log(io.prop)// 45

letfdummy=p=>p.prop=100;
// fdummy modifie la valeur de prop
// de l'objet lui envoyé.

io.df=function(){fdummy(this)};
// Définition d'une méthode de io qui
// appelle fdummy en lui passant io
// via this.

io.df();// appel de la méthode io.df()
console.log(io.prop)// 100
// affiche la nouvelle valeur de io.prop.
</script>

représente

La variable« this »mercredi, 20. 3/ 142
mars 2019

J.D.B. DIASOLUKA Nz.Luyalu
JavaScript Tome-V
IV.Dans unefonction léchéede (expression
fonction)dans un etlittéral d’objet «this»
représente TOUJOURS l’objet globalWindow
quelque soit le mode :

<scripttype="text/javascript">"use strict";
vara="global";
console.log(this);// Window

consto= _ => {
vara='locale';// « a » n'écrase pas le global

varoFct=function(){
console.log(this);
// Object { oFct: oFct() }

console.log(a,window.a,this.a);
// global global locale
};

console.log(this);// Window
return this;
};

constr =o();
console.log(this,o.this);// Window
console.log(a,window.a,this.a,r.a);
// global global global global
</script>

<scripttype="text/javascript">"use strict";
letfdummy=_=>console.log(this);
fdummy(); // Window

leto={
fdummy2:_=>console.log(this)
}// littéral d’objet
o.fdummy2(); //Window
</script>

La variable« this » 4mercredi, 20./ 142
mars 2019

J.D.B. DIASOLUKA Nz.Luyalu
JavaScript Tome-V

V.Dans uneexpression de fonction:

<scripttype="text/javascript">"use strict";
vara="global";
console.log(this);// Window

consto=function(){
this.a='locale';// « a » n'écrase pas le global

this.oFct=function(){
console.log(this);
// Object { oFct: oFct() }

console.log(a,window.a,this.a);
// global global locale
}
};

consti =newo();
i.oFct();
console.log(this,i.this);// Window
console.log(a,window.a,this.a,i.a);
// global global global locale
</script>

VI.

Dans unefonction ordinaire:

<scripttype="text/javascript">"use strict";
letfdummy=_=>console.log(this);
La variable« this »/ 142mercredi, 20. 5
mars 2019

J.D.B. DIASOLUKA Nz.Luyalu
JavaScript Tome-V
// Window {
// frames:Window, postMessage: ƒ, blur: ƒ,
// focus:ƒ, close: ƒ, …}
fdummy();

// Fonction classique
functionfdummy2(){
console.log(this);
// undefined si "use strict";
//Si mode standard :
//Window {frames: Window, postMessage: ƒ,
//blur: ƒ, focus: ƒ, close: ƒ, …}
}
fdummy2();

leto=function(){
console.log(this)}// Object {
/*
1ero {}
Afdummy3:_=>console.log(this)
B__proto__:Object
*/

this.fdummy3=_=>console.log(this)
// Object { fdummy3: fdummy3() }
/*
1ero {fdummy3: ƒ}
Afdummy3:_=>console.log(this)
B__proto__:Object
*/
}
leti=newo();
i.fdummy3();

leto4=newFunction()
o4.prototype.fdummy4=_=>console.log(this)// Window
// Window {frames: Window, postMessage: ƒ,
// blur:ƒ, focus: ƒ, close: ƒ, …}
leti4=newo4();
i4.fdummy4();

(function(){console.log(this)})();

La variable« this » 6/ 142mercredi, 20.
mars 2019

J.D.B. DIASOLUKA Nz.Luyalu
JavaScript Tome-V
// undefined si "use strict":
// Si mode normal :
// Window {frames: Window, postMessage: ƒ,
// blur:ƒ, focus: ƒ, close: ƒ, …}
</script>

VII.Dans uneclass, «this» représente le casse-tête
qui suit selon la nature de la méthode (static ou
non) :Dans une méthode non static de class, this
représente la classe en tant queobjet. Dans une
méthode static this représente la classe en tant que
classe.

<scripttype="text/javascript">"use strict";
vara="global";
console.log(this);// Window

consto = {
a:'locale',// « a » n'écrase pas le global

oFct:function(){
console.log(this);
// Object { oFct: oFct() }

console.log(a,window.a,this.a);
// global global locale
}
};

o.oFct();
console.log(this,o.this);
// Window undefined

console.log(a,window.a,this.a,o.a);
// global global global locale
</script>

La variable« this »mercredi, 20./ 142 7
mars 2019

J.D.B. DIASOLUKA Nz.Luyalu
JavaScript Tome-V

<scripttype="text/javascript">"use strict";
classuneClass {
nMeth() {return this;}
staticsMeth() {return this;}
// Ne peut être appelé que du sein du corps de la
classe.
}

varobj =newuneClass();
console.log(obj.nMeth());
// uneClass {}[YANDEX]
// Object {} [FIREFOX]

///////// obj.sMeth();
// TypeError:
// obj.sMethis not a function [FIREFOX]
// Uncaught TypeError:
// obj.sMethis not a function [YANDEX]

varnMeth = obj.nMeth;
console.log(nMeth());// undefined [FIREFOX] [YANDEX]

varsMeth = obj.sMeth;
///////// sMeth();// undefined
// TypeError: sMeth is not a function [FIREFOX]
// Uncaught TypeError: sMeth is not a function [YANDEX]

console.log(uneClass.sMeth());
// class uneClass[YANDEX]
// function uneClass()[FIREFOX]
varsMeth = uneClass.sMeth;
console.log(sMeth());// undefined [FIREFOX] [YANDEX]
</script>
La variable« this » 8/ 142mercredi, 20.
mars 2019

J.D.B. DIASOLUKA Nz.Luyalu
JavaScript Tome-V

Avec YANDEX :

14:51