« this » dans différents contextes en JavaScript - javascript tome v

: « this » dans différents contextes :
JAVASCRIPT (Programmation Internet) VOL. 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 différents contextes :
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).
I. En mode STRICT , « this » dans une fonction ordinaire représente
undefined .
<script type="text/javascript"> "use strict";
// En MODE STRICT,
// this dans une fonction ordinaire
// représente l'objet global widonw.
function o(p){
///////// this.prop=45;
// TypeError: this is undefined test.html:6:5
console.log('"',this,'"');
console.log(this===window);
console.log('"',p,'"');
}
o();
/*
" undefined " test.html:8:5
false test.html:9:5

J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V
La variable « this » 2 / 113 vendredi, 31. mai 2019
" undefined " test.html:10:5
*/
let io=new o(this);
/*
" Object { } " test.html:8:5
false test.html:9:5
" Window ... " test.html:10:5
*/
</script>
II. En mode STANDARD , « this » dans une fonction ordfinaire re-
présente l ’objet global window . Mais dans (ou pendant) la défi-
nition des propriétés d’une fonction, « this » représente le cons-
tructeur et, dans une instance, il représente l’instance.
<script type="text/javascript">
// En MODE STANDARD,
// this dans une fonction ordinaire
// représente l'objet global widonw.
function o(p){
this.prop=45;
console.log('"',this,'"');
console.log(this===window);
console.log('"',p,'"');
}
o();
/*
" Window " test.html:7:5
true test.html:8:5
" undefined " test.html:9:5
*/
let io=new o(this);
/*
" Object { prop: 45 } " test.html:7:5
false test.html:8:5
" Window ... " test.html:9:5
*/
</script>

J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V
La variable « this » 3 / 113 vendredi, 31. mai 2019
III. Dans une instance , « this » représente TOUJOURS
l’instance :
<script type="text/javascript"> "use strict";
// this dans une instanc représente
// TOUJOURS un poineur sur l'instance.
function o(p){
this.prop=45;
}
let io=new o();
console.log(io.prop) // 45
let fdummy=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>
IV. Dans une référence à une instance « this » représente TOU-
JOURS cette instance :
<script model="text/javascript"> "use strict";
let inverso=[];
Array.prototype.list = function(p){
let l=this.length;
console.log(this, p);
while(l--) {
if(p===this[l]) inverso.push(this[l]+" ***");

J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V
La variable « this » 4 / 113 vendredi, 31. mai 2019
else inverso.push(this[l]);
}
return inverso;
};
console.dir([3,7,2,1,3,3,5,9].list(3));
</script>
V. Dans une fonction fléchée (expression de fonction) et dans un
littéral d’objet « this » représente TOUJOURS l’objet global
Window quelque soit le mode :
<script type="text/javascript"> "use strict";
var a="global";
console.log(this); // Window
const o = _ => {
var a='locale' ; // « a » n'écrase pas le global
var oFct = function(){
console.log(this);
// Object { oFct: oFct() }
console.log(a , window.a , this.a);
// global global locale
};

J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V
La variable « this » 5 / 113 vendredi, 31. mai 2019
console.log(this); // Window
return this;
};
const r = o();
console.log(this , o.this); // Window
console.log(a , window.a , this.a , r.a);
// global global global global
</script>
<script type="text/javascript"> "use strict";
let fdummy=_=>console.log(this);
fdummy(); // Window
let o={
fdummy2:_=>console.log(this)
} // littéral d’objet
o.fdummy2(); // Window
</script>
V. Dans une expression de fonction :
<script type="text/javascript"> "use strict";
var a="global";
console.log(this); // Window
const o = 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
}
};
const i = new o();
i.oFct();
console.log(this , i.this); // Window