Documente Academic
Documente Profesional
Documente Cultură
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
" undefined " test.html:10:5
*/
<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
*/
function o(p){
this.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.
const o = _ => {
var a='locale' ; // « a » n'écrase pas le global
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>
let o={
fdummy2:_=>console.log(this)
} // littéral d’objet
o.fdummy2(); // Window
</script>
const o = function(){
this.a='locale' ; // « a » n'écrase pas le global
this.oFct = function(){
console.log(this);
// Object { oFct: oFct() }
// Fonction classique
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) // Object { }
/*
La variable « this » 5 / 112 dimanche, 24. mars 2019
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V
1er o {}
A fdummy3:_=>console.log(this)
B __proto__:Object
*/
this.fdummy3=_=>console.log(this)
// Object { fdummy3: fdummy3() }
/*
1er o {fdummy3: ƒ}
A fdummy3:_=>console.log(this)
B __proto__:Object
*/
}
let i=new o();
i.fdummy3();
(function(){console.log(this)})();
// undefined si "use strict":
// Si mode normal :
// Window {frames: Window, postMessage: ƒ,
// blur: ƒ, focus: ƒ, close: ƒ, …}
</script>
VII. 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.
const o = {
a : 'locale' , // « a » n'écrase pas le global
o.oFct();
console.log(this , o.this);
// Window undefined
///////// obj.sMeth();
// TypeError:
// obj.sMeth is not a function [FIREFOX]
// Uncaught TypeError:
console.log(uneClass.sMeth());
// class uneClass [YANDEX]
// function uneClass() [FIREFOX]
var sMeth = uneClass.sMeth;
console.log(sMeth()); // undefined [FIREFOX] [YANDEX]
</script>
Avec YANDEX :
Avec FIREFOX :
Object { } test.html:8:3
__proto__: Object { … }
constructor: function notreClass()
constructor: notreClass()
length: 0
methodStat: function methodStat()
length: 0
name: "methodStat"
__proto__: function ()
name: "notreClass"
prototype: Object { … }
constructor: function notreClass()
constructor: notreClass()
length: 0
methodStat: function methodStat()
name: "notreClass"
prototype: Object { … }
constructor: function notreClass()
constructor: notreClass()
length: 0
methodStat: function methodStat()
name: "notreClass"
prototype: Object { … }
constructor: function notreClass()
methodOrd: function methodOrd()
__proto__: Object { … }
__proto__: function ()
methodOrd: function methodOrd()
__proto__: Object { … }
__proto__: function ()
methodOrd: function methodOrd()
__proto__: Object { … }
__proto__: function ()
methodOrd: function methodOrd()
__proto__: Object { … }
undefined test.html:13:3
function notreClass()
length: 0
methodStat: methodStat()
length: 0
name: "methodStat"
__proto__: function ()
name: "notreClass"
prototype: Object { … }
constructor: function notreClass()
length: 0
methodStat: function methodStat()
name: "notreClass"
prototype: Object { … }
constructor: function notreClass()
methodOrd: function methodOrd()
__proto__: Object { … }
__proto__: function ()
methodOrd: function methodOrd()
__proto__: Object { … }
constructor: function notreClass()
methodOrd: function methodOrd()
__proto__: Object { … }
__proto__: function ()
test.html:16:3
undefined test.html:21:3
</script>
// AVEC YANDEX :
// AVEC FIREFOX :
100 test.html:12:7
red none repeat scroll 0% 0% test.html:13:7
20px test.html:14:7
blue test.html:15:7
20px solid test.html:16:7
15px test.html:17:7
85 test.html:12:7
magenta none repeat scroll 0% 0% test.html:13:7
10px test.html:14:7
green test.html:15:7
30px dashed test.html:16:7
50px test.html:17:7
</script>
<hr class="cHr">
<script type="text/javascript"> "use strict";
let eL = document.querySelector(".cHr");
function modify () {
console.log(this);
this.style.height=10;
this.style.background="blue";
this.style.borderWidth="20pt";
this.style.borderRadius="10pt";
this.style.color="red";
this.style.width=150;
this.style.borderRadius="15";
eL.addEventListener("click",modify,false);
</script>
let t="";
for(let i of this.style) t+=i + " | "
console.log(t);
<script type="text/javascript">
const process = { // Littéral d'objet
organe: "Globe oculaire",
tissu : ["Rétine", "Vitré", "Cristallin"],
list: function() {
this.tissu.map(function(o) {
console.log(o + " fait partie du " + this);
});
}
Deux possibilités :
list: function() {
this.tissu.forEach(function(o) {
La variable « this » 15 / 112 dimanche, 24. mars 2019
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V
console.log(
`${o} fait partie du ${this.organe}`
);
}.bind(this));
// le « this » dans ce bloc utilisera
// la valeur que pointe présentement
// (à ce niveau) « this ».
},
list2: function() {
const that=this;
this.tissu.map(function(o) {
console.log(o + " fait partie du " +
that.organe);
});
}
}
process.list();
process.list2();
</script>
1. Window
1. alert: ƒ alert()
2. applica-
tionCache: ApplicationCache {status: 0, oncached: null, oncheck
ing: null, ondownloading: null, onerror: null, …}
3. atob: ƒ atob()
4. blur: ƒ ()
5. btoa: ƒ btoa()
6. caches: CacheStorage {}
7. cancelAnimationFrame: ƒ cancelAnimationFrame()
8. cancelIdleCallback: ƒ cancelIdleCallback()
9. captureEvents: ƒ captureEvents()
10. chrome: {loadTimes: ƒ, csi: ƒ}
11. clearInterval: ƒ clearInterval()
12. clearTimeout: ƒ clearTimeout()
13. clientInforma-
tion: Navigator {vendorSub: "", productSub: "20030107", vendor:
"Google Inc.", maxTouchPoints: 0, hardwareConcurrency: 4, …}
14. close: ƒ ()
La variable « this » 17 / 112 dimanche, 24. mars 2019
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V
15. closed: false
16. confirm: ƒ confirm()
17. createImageBitmap: ƒ createImageBitmap()
18. crypto: Crypto {subtle: SubtleCrypto}
19. customElements: CustomElementRegistry {}
20. defaultStatus: ""
21. defaultstatus: ""
22. devicePixelRatio: 1
23. document: document
24. external: External {}
25. fct: ƒ fct(p)
26. fetch: ƒ fetch()
27. find: ƒ find()
28. focus: ƒ ()
29. frameElement: null
30. frames: Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, pa
rent: Window, …}
31. getComputedStyle: ƒ getComputedStyle()
32. getSelection: ƒ getSelection()
33. histo-
ry: History {length: 1, scrollRestoration: "auto", state: null}
34. indexedDB: IDBFactory {}
35. innerHeight: 779
36. innerWidth: 176
37. isSecureContext: true
38. length: 0
39. localSto-
rage: Storage {/_/batch|17347282185573465|1: "{"type":"i","key"
:"nav.failure","userId":"a3dd163e…p":1542007156418,"eventId":"j
odz8wqq1opt7886uv9"}", /_/batch|17347282185573465|10: "{"type":
"t","key":"client.perf.domComplete","value…p":1542007158843,"ev
en-
tId":"jodz8ym32crvfbm62nz"}", /_/batch|17347282185573465|11: "{
"type":"t","key":"client.perf.loadEnd","value":27…p":1542007158
843,"eventId":"jodz8ym312uyr1v6er3"}", /_/batch|173472821855734
65|12: "{"type":"e","key":"client.performanceTiming","data…p":1
542007158845,"eventId":"jodz8ym521jrdvkag09"}", /_/batch|173472
82185573465|13: "{"type":"e","key":"client.action","data":{"cla
ssAt…p":1542007398166,"eventId":"jodze39y1r2infalpt2"}", …}
40. loca-
tion: Location {replace: ƒ, assign: ƒ, href: "file:///K:/DADET/
PROGS/test.html#", ancestorOrigins: DOMStringList, origin: "fil
e://", …}
41. locationbar: BarProp {visible: true}
42. matchMedia: ƒ matchMedia()
43. menubar: BarProp {visible: true}
44. moveBy: ƒ moveBy()
__proto__: WindowPrototype
constructor: ()
length: 0
name: "Window"
prototype: WindowPrototype { … }
Symbol(Symbol.hasInstance): undefined
__proto__: function ()
length: 0
name: "Window"
prototype: WindowPrototype
constructor: function ()
__proto__: WindowProperties
constructor: function ()
__proto__: WindowProperties { }
La variable « this » 55 / 112 dimanche, 24. mars 2019
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V
__proto__: EventTargetPrototype { addEvent-
Listener: addEventListener(), removeEventListener: re-
moveEventListener(), dispatchEvent: dis-
patchEvent(), … }
Symbol(Symbol.hasInstance): undefined
__proto__: function ()
__proto__: ()
length: 0
name: "EventTarget"
prototype: EventTargetPrototype { addEventLis-
tener: addEventListener(), removeEventListener: re-
moveEventListener(), dispatchEvent: dis-
patchEvent(), … }
Symbol(Symbol.hasInstance): undefined
__proto__: function ()
__proto__: WindowProperties
__proto__: EventTargetPrototype { addEventLis-
tener: addEventListener(), removeEventListener: re-
moveEventListener(), dispatchEvent: dis-
patchEvent(), … }
Avec window.top :
Avec YANDEX :
window.top
Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ,
frames: Window, …}
Avec FIREFOX :
window.top
Window file:///K:/DADET/PROGS/test.html#
Window
[default properties]
__proto__: WindowPrototype { … }
__proto__: WindowPrototype
constructor: function ()
__proto__: WindowProperties
Window
1er Infinity: Infinity
2e AnalyserNode: AnalyserNode()
3e AnimationEvent: AnimationEvent()
4e AppBannerPromptResult: AppBannerPromptResult()
5e ApplicationCache: ApplicationCache()
6e ApplicationCacheErrorEvent: ApplicationCacheErrorEvent()
7e Array: Array()
8e ArrayBuffer: ArrayBuffer()
9e Attr: Attr()
10e Audio: HTMLAudioElement()
11e AudioBuffer: AudioBuffer()
12e AudioBufferSourceNode: AudioBufferSourceNode()
13e AudioContext: AudioContext()
14e AudioDestinationNode: AudioDestinationNode()
15e AudioListener: AudioListener()
16e AudioNode: AudioNode()
17e AudioParam: AudioParam()
18e AudioProcessingEvent: AudioProcessingEvent()
19e AutocompleteErrorEvent: AutocompleteErrorEvent()
20e BarProp: BarProp()
21e BatteryManager: BatteryManager()
22e BeforeInstallPromptEvent: BeforeInstallPromptEvent()
23e BeforeUnloadEvent: BeforeUnloadEvent()
24e BiquadFilterNode: BiquadFilterNode()
25e Blob: Blob()
26e Boolean: Boolean()
27e CDATASection: CDATASection()
28e CSS: CSS()
29e CSSFontFaceRule: CSSFontFaceRule()
30e CSSGroupingRule: CSSGroupingRule()
31e CSSImportRule: CSSImportRule()
32e CSSKeyframeRule: CSSKeyframeRule()
33e CSSKeyframesRule: CSSKeyframesRule()
La variable « this » 93 / 112 dimanche, 24. mars 2019
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V
34e CSSMediaRule: CSSMediaRule()
35e CSSNamespaceRule: CSSNamespaceRule()
36e CSSPageRule: CSSPageRule()
37e CSSRule: CSSRule()
38e CSSRuleList: CSSRuleList()
39e CSSStyleDeclaration: CSSStyleDeclaration()
40e CSSStyleRule: CSSStyleRule()
41e CSSStyleSheet: CSSStyleSheet()
42e CSSSupportsRule: CSSSupportsRule()
43e CSSViewportRule: CSSViewportRule()
44e Cache: Cache()
45e CacheStorage: CacheStorage()
46e CanvasGradient: CanvasGradient()
47e CanvasPattern: CanvasPattern()
48e CanvasRenderingContext2D: CanvasRenderingContext2D()
49e ChannelMergerNode: ChannelMergerNode()
50e ChannelSplitterNode: ChannelSplitterNode()
51e CharacterData: CharacterData()
52e ClientRect: ClientRect()
53e ClientRectList: ClientRectList()
54e ClipboardEvent: ClipboardEvent()
55e CloseEvent: CloseEvent()
56e Comment: Comment()
57e CompositionEvent: CompositionEvent()
58e ConvolverNode: ConvolverNode()
59e Crypto: Crypto()
60e CryptoKey: CryptoKey()
61e CustomEvent: CustomEvent()
62e DOMError: DOMError()
63e DOMException: DOMException()
64e DOMImplementation: DOMImplementation()
65e DOMParser: DOMParser()
66e DOMSettableTokenList: DOMSettableTokenList()
67e DOMStringList: DOMStringList()
68e DOMStringMap: DOMStringMap()
69e DOMTokenList: DOMTokenList()
70e DataTransfer: DataTransfer()
71e DataTransferItem: DataTransferItem()
72e DataTransferItemList: DataTransferItemList()
73e DataView: DataView()
74e Date: Date()
75e DelayNode: DelayNode()
Mots-clés :
contextes,pointeur,this,environnement englobant,espace glo-
bal,fonction ordinaire,fonction fléchée,élément HTML,mode slop-
py,sloppy mode,mode strict,instance,constructeur,undefined,mode
STANDARD,objet global window,expression de fonction,littéral
d’objet,fonction non expression de fonction,class,méthode,static,non
static,méthode static,fonction listener,objet cible,événement,objet
window,propriétés globales
diasfb@mail2world.com