« this » - JavaScript tome v

J.B.J.B.J.B. DadetDadetDadet DIASOLUKADIASOLUKADIASOLUKA LuyaluLuyaluLuyalu NzoyifuangaNzoyifuangaNzoyifuanga
JAVASCRIPT (Programmation Internet) VOL. V
+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.
I. En mode STRICT, « this » dans une fonction représente undefi-
ned.
<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
" 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>

J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V
La variable « this » 2 / 96 mardi, 16. octobre 2018
II. En mode STANDARD, « this » dans une fonction représente l’ob-
jet global window. Mais pendant la définition des propriétés
d’une fonction, « this » représente le constructeur 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>
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)
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

J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V
La variable « this » 3 / 96 mardi, 16. octobre 2018
// appelle fdummy en lui passant io
// via this.
io.df(); // appel de la méthode io.df()
console.log(io.prop)
// affiche la nouvelle valeur de io.prop.
</script>
IV. Dans une fonction fléchée (expression de fonction) et dans un
littéral d’objet «this » représente TOUJOURS l’objet global win-
dow quelque soit le mode :
<script type="text/javascript"> "use strict";
let fdummy=_=>console.log(this);
fdummy();
let o={
fdummy2:_=>console.log(this)
} // littéral d’objet
o.fdummy2();
</script>
V. Dans une fonction non expression de fonction :
<script type="text/javascript"> "use strict";
let fdummy=_=>console.log(this);
// Window {
// frames: Window, postMessage: ƒ, blur: ƒ,
// focus: ƒ, close: ƒ,…}
fdummy();
// Fonction non expression de fonction
function fdummy2(){
console.log(this);
// undefined si "use strict";
// Si mode standard :
// Window {frames: Window, postMessage: ƒ,
// blur: ƒ, focus: ƒ, close: ƒ,…}
}
fdummy2();
let o=function(){
console.log(this)

J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V
La variable « this » 4 / 96 mardi, 16. octobre 2018
/*
1.o {}
A fdummy3: _=>console.log(this)
B__proto__:Object
*/
this.fdummy3=_=>console.log(this)
/*
1.o {fdummy3:ƒ}
A fdummy3: _=>console.log(this)
B__proto__:Object
*/
}
let i=new o();
i.fdummy3();
let o4=new Function()
o4.prototype.fdummy4=_=>console.log(this)
// Window {frames: Window, postMessage: ƒ,
// blur: ƒ, focus: ƒ, close: ƒ,…}
let i4=new o4();
i4.fdummy4();
(function(){console.log(this)})();
// undefined si "use strict":
// Si mode normal :
// Window {frames: Window, postMessage: ƒ,
// blur: ƒ, focus: ƒ, close: ƒ,…}
</script>
VI. Dans une class, « 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 que objet. Dans
une méthode static this représente la classe en tant que classe.
<script type="text/javascript"> "use strict";
class uneClass {
nMeth() { return this; }
static sMeth() { return this; }
// Ne peut être appeléque du sein du corps de la
classe.
}
var obj = new uneClass();

J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V
La variable « this » 5 / 96 mardi, 16. octobre 2018
console.log(obj.nMeth());
// uneClass {} [YANDEX]
// Object { } [FIREFOX]
///////// obj.sMeth();
// TypeError:
// obj.sMeth is not a function [FIREFOX]
// Uncaught TypeError:
// obj.sMeth is not a function [YANDEX]
var nMeth = obj.nMeth;
console.log(nMeth()); // undefined [FIREFOX] [YANDEX]
var sMeth = 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]
var sMeth = uneClass.sMeth;
console.log(sMeth()); // undefined [FIREFOX] [YANDEX]
</script>
Avec YANDEX :
14:51:19.978 test.html:8 notreClass {}
1.notreClass {}
A__proto__:
I constructor: class notreClass
aarguments:(...)
bcaller:(...)
clength:0
d methodStat: ƒmethodStat()
ename:"notreClass"
fprototype:
A constructor: class notreClass
B methodOrd: ƒmethodOrd()
C__proto__:Object
a __proto__: ƒ()
b[[FunctionLocation]]:test.html:2
c[[Scopes]]:Scopes[2]
I methodOrd: ƒmethodOrd()
II __proto__:Object
14:51:19.984 test.html:10 undefined
14:51:19.984 test.html:12