Référence du mot clef "this"

Version imprimable

Bonjour tout le monde, j'ai du mal à comprendre à quel objet fait référence le mot clef «this» à la ligne 24 du code suivant :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
const compare = function(ids, asc){
	return function(row1, row2){
		const tdValue = function(row, ids){
			return row.children[ids].textContent; 
		}  
		const tri = function(v1, v2){
			if (v1 !== '' && v2 !== ''&& !isNaN(v1) && !isNaN(v2)){
			return v1-v2;
			}
			else {
			return v1.toString().localeCompare(v2);
			}
			return v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2) ? v1 - v2 : v1.toString().localeCompare(v2); 
		};
		return tri(tdValue(asc ? row1 : row2, ids), tdValue(asc ? row2 : row1, ids));
	}
}
 
const tbody = document.querySelector('tbody');
const thx = document.querySelectorAll('th');
const trxb = tbody.querySelectorAll('tr');
thx.forEach(function(th){
	th.addEventListener('click', function(){
		let classe = Array.from(trxb).sort(compare(Array.from(thx).index0f(th), this.asc = !this.asc));
		classe.forEach(function(tr){
			tbody.appendChild(tr) 
		}); 
	}) 
});

Sur des exemples plus simples j'arrive à comprendre mais là j'ai du mal...

Est-ce que c'est le <th> sur lequel on clique ?

Merci pour votre aide.

30/03/2020, 19h23
Beginner.

Salut,

Oui.
31/03/2020, 16h47
Sinouhé87

D'accord merci. Et est-ce que th.asc =!th.asc fonctionnerait aussi ?
31/03/2020, 17h22
Beginner.

Tu veux dire d'un point de vu syntaxe ? Parce que avec ton code on ne sait pas ce que tu veux faire, on n'a pas toutes les infos...
31/03/2020, 19h52
psychadelic

Citation:

Envoyé par Sinouhé87

D'accord merci. Et est-ce que th.asc =!th.asc fonctionnerait aussi ?

non, pour ça faudrait que tu utilise une fonction fléchée
31/03/2020, 21h35
Sinouhé87

Ah bon pourquoi ?
31/03/2020, 21h37
NoSmoking
Bonjour,

Citation:

Envoyé par psychadelic

non, pour ça faudrait que tu utilise une fonction fléchée

:nono: ce n'est pas une question de type de fonction mais de scope et dans le cas présent l'utilisation de th fonctionnerait.
Pour s'en convaincre il suffit de tester
Code:

1 2 3 4 5 thx.forEach(function (th) { th.addEventListener('click', function () { console.log("th :", th, this, this === th); }) });
avec une « arrow function » on pourrait passer par le event.target mais th serait tout aussi valable.
Code:

1 2 3 4 5 6 thx.forEach(function (th) { th.addEventListener('click', (e) => { const o = e.target; console.log("th :", th, this, o === th); }) });
31/03/2020, 21h46
Beginner.

Perso je n'ai toujours pas compris la question, je parle de la deuxième (la réponse à la première étant oui)...
01/04/2020, 00h21
psychadelic
Citation:

Envoyé par Beginner.

Perso je n'ai toujours pas compris la question, je parle de la deuxième (la réponse à la première étant oui)...

tu fais référence à

Citation:

th.asc =!th.asc

j'imagine ?

ce genre de code sert à inverser une valeur booléenne
Code:

1 2 let unTest = true; testVal = !testVal; // équivalent à testVal <= not testVal
mais ce qui doit te déranger c'est qu'il à du au préalable écrire quelque chose du genre
Code:

1 2 3 const thx = document.querySelectorAll('#maTable th') thx.forEach(th=>th.asc = true)
pour assigner une nouvelle propriété booléenne (asc) sur chaque élément th qui visiblement lui permet d'indiquer si l'ordre de la colonne est ascendant ou non (hypothèse basée sur le nom de cette variable)

Citation:

Envoyé par NoSmoking

Pour s'en convaincre il suffit de tester

ah oui,.. puisqu'il s'agit d'une fonction anonyme...

En fait ce qui m'étonne, c'est qu'il n'a pas testé par lui-même ce truc qui ne demande pas grand chose pour se forger une idée.
01/04/2020, 01h24
Beginner.
Citation:

Envoyé par psychadelic

ce genre de code sert à inverser une valeur booléenne

Oui effectivement ça j'avais compris...
Citation:
Envoyé par psychadelic

mais ce qui doit te déranger c'est qu'il à du au préalable écrire quelque chose du genre

Code:

1 2 3 const thx = document.querySelectorAll('#maTable th') thx.forEach(th=>th.asc = true)

pour assigner une nouvelle propriété booléenne (asc) sur chaque élément th qui visiblement lui permet d'indiquer si l'ordre de la colonne est ascendant ou non (hypothèse basée sur le nom de cette variable)
Oui bien vu. Il n'a pas mis cela dans son code mais apparemment ça peut quand même marcher : au départ th.asc sera undefined (et l'inverse de undefined c'est true) ensuite l’assignation (th.asc = !undefined) "crée" la propriété asc et l'initialise à true.

Je crois que ton hypothèse concernant le sens de asc est bonne, cela semble logique...
01/04/2020, 12h12
Sinouhé87

Bonjour, dsl je n'ai pas été clair je reformule ma question :

Dans mon code initial, si je remplace « this.asc=!this.asc » par « th.asc =!th.asc », le nouveau code serait-il équivalent à l'ancien ?

D'après vos réponses, c'est oui si j'ai bien compris.
01/04/2020, 16h16
Beginner.

Ah ok j'ai compris cette fois... La réponse est oui effectivement...

Par rapport à la remarque de psychadelic tu devrais vérifier si il n'y a pas de problème car c'est seulement au premier clique que la propriété asc est "créée" et elle est initialisée à true.

Si donc au départ (avant le premier clique) elle est censée être à false alors tout va bien mais si au départ elle est censée être à true eh bien au premier clique au lieu de passer à false (comme tu l’espères après l’exécution de this.asc = !this.asc) eh bien elle sera initialisée à true (elle vaudra donc true alors qu'elle devrait valoir false).
02/04/2020, 16h00
Sinouhé87

Ok merci beaucoup !
02/04/2020, 16h17
Sinouhé87
Oh regardez ce qu'on m'a répondu ailleurs :

« Bonjour non il ne fonctionnerait pas si tu remplaçais :
Code:

1 2 3 this.asc = !this.asc // par th.asc = !th.asc
par ce que cette ligne et situé dans la fonction exécuté au click d'un th et qu'au moment de l'exécution de cette fonction tous les th on été parcourues et que la variable th fait référence au th actuel dans le parcours des th donc il serait toujours soit égal au derniers th et pas à celui qui et cliqué soit la donnée aurait été libéré et tu aurais un ReferenceError »

Mais alors normalement le code aurait dû être :

Code:

Array.from(thx).indexOf(this), this.asc = !this.asc

et pas :

Code:

Array.from(thx).indexOf(th), this.asc = !this.asc

car indexOf( ) permet normalement de récupérer l'indice de la colonne sur lequel se trouve le <th> cliqué et si j'ai bien compris, en mettant « indexOf(th) » on risquerait de récupérer l'indice de la dernière colonne du tableau...
02/04/2020, 16h42
Beginner.

Salut,

Ben il suffirait de tester pour trancher la question... As-tu testé ?
Perso j'ai fait une petit teste et cela confirme les réponses données...
Il y a aussi les codes de NoSmoking qui te permettent de constater cela...
02/04/2020, 16h48
Sinouhé87

Oui pardon je viens de tester, c'est l'autre personne qui se trompe du coup dsl.
02/04/2020, 17h11
Beginner.

Ton code fonctionne comme tu veux ?

PS : Chez moi il y avait une erreur notamment car tu as écrit index0f au lieu de indexOf...
02/04/2020, 17h45
NoSmoking

Ce qui important dans le code que tu écris est la cohérence du code, ou tu utilises th ou tu utilises this mais pas un mixe des deux.

Le deuxième point à souligné et que ta variable est dans un scope bien défini donc ce que l'on t'as expliqué est inexacte, chaque th ayant son gestionnaire d'événement click attaché il n'y aura pas de soucis.
03/04/2020, 13h54
Sinouhé87

Ok merci pour vos réponses !