Valeur du this dans une fonction fléchée ?

Bonjour,

Je bloque sur un truc. Un peu d'aide svp ou un lien

Dans ce bout de code this pointe sur obj sur le console.log qui est dans la fonction testIn.

function testOut(){

	console.log('OUT',this);

	const testIn = () => {
		console.log('IN',this);
	}

	testIn();

}

const obj = {sum : 0};

testOut.call(obj);

Et dans ce bout de code this pointe sur window

const testIn = () => {
	console.log('IN',this);
}

function testOut(){
	console.log('OUT',this);

	testIn();

}

const obj = {sum : 0};

testOut.call(obj);

Entre les deux je change juste l'endroit où je déclare la fonction fléchée.

Une explication ??
Je n'arrive pas à comprendre comment la fonction fléchée récupère un this.

Je sais qu'elle n'en crée pas et qu'elle en récupère un. OK mais où, quand, comment ?

J'ai lu dans un article qu'elle récupère une valeur dans la pile d'exécution. OK super. ??

J'ai lu dans un autre article qu'elle récupère la valeur du this du scope parent. OK super ??

Qu'en est-il ?? Merci d'avance

Bonjour, une fonction fléchée ne crée pas de contexte, autrement dit pas de this. Le this y est juste celui du parent.

Dans le premier exemple c'est le this de testOut, qui est obj grâce à call.
Dans le second c'est le «this» global, window.

Il suffit de se dire qu'une fonction fléchée n'a pas d'influence sur le this, comme un if par exemple. techniquement, this est évalué à l'exécution et remonte en effet la pile d'exécution jusqu'à trouver un élément qui fournit un this, ce qu'on peut vulgariser par «c'est celui du parent» ou comme je l'ai décrit.

Salut, Merci pour ta réponse.

L'ordre d'empilement des contextes de la pile d'exécution ne change pas entre les deux exemples. OK. Ci-dessous j'ai empilé les contextes.

Contexte de testIn
Contexte de testOut
Contexte Globlal

Le contexte parent de testIn est testOut. Il ne change pas. Par contre manifestement il n'y a pas la même valeur de this dedans ? Pourquoi ?

Par contre :
Dans le premier exemple testIn est déclarée dans testOut et appartient à l'environnement lexical de testOut.
Dans le deuxième testIn est déclarée global et appartient à l'environnement lexical de Global.

Est ce que c'est ça qui explique le changement de valeur de this ? Je n'en sais pas assez sur ce fonctionnement interne pour trouver une explication. Je sais qu'il y a une relation entre le contexte d'exécution et l'environnement lexical mais je ne sais pas exactement laquelle.

Et me dire que la fonction fléchée n'as pas d'influence sur la valeur de this je n'arrive pas à voir en quoi ça m'aide.

Dev-Web-06 a écrit :

Le contexte parent de testIn est testOut. Il ne change pas. Par contre manifestement il n'y a pas la même valeur de this dedans ? Pourquoi ?

je crois comprendre ton problème, ce n'est pas l'endroit de l'appel de testIn qui compte mais l'endroit de sa définition. si testIn est défini dans testOut sa valeur de this sera toujours celle de testOut peu importe l'endroit où tu apelles testIn.

c'est pour ca que je dis que ça n'a pas d'influence:
ceci :

function testOut(){
	const testIn = () => {
		console.log('IN',this);
	}
}

ou ceci

function testOut(){
	if (truc) {
		console.log('IN',this);
	}
}

ne change rien sur la valeur de this.

kustolovic a écrit :


je crois comprendre ton problème, ce n'est pas l'endroit de l'appel de testIn qui compte mais l'endroit de sa définition.

Oui clairement c'est ça mon problème et c'est ce que l'on observe.

Alors la règle que je viens de trouver serait que : les fonctions fléchées partagent le même this lexical que le scope de leur parent.

Donc dans le premier cas (déclarée dans testOut) le scope parent c'est celui de testOut et le this pointe sur obj.
Dans le deuxième cas (déclarée dans global) le scope c'est celui de global et le this pointe sur window.

En fait je suis parti sur une info qui m'envoyait dans la pile d'exécution alors qu'on a rien à y faire...

Si il y a des gens qui lisent cette règle et qui peuvent me confirmer .. Merci à eux
Modifié par Dev-Web-06 (11 Sep 2020 - 17:54)

Merci @kustolovic
Modifié par Dev-Web-06 (11 Sep 2020 - 17:45)