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 :

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...

Merci pour votre aide.

Lou

-
Edité par Xysmath87 30 mars 2020 à 16:46:30

Hello, 

D'après ce que je comprend, je dirais que this vient de l'ecouteur 'click'.

bonjour non il ne fonctionnerait pas si tu remplaçait

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

Bonjour,donc si j'ai bien compris, tant que tous les éléments de «thx» n'ont pas été parcourus, la fonction du click n'est pas exécuté.

Mais alors normalement le code aurait dû être :

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

et pas :

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 ta réponse, en mettant « indexOf(th) » on risquerait de récupérer l'indice de la dernière colonne du tableau...

re bonjour oui en effet si dans le fonction associé au click tu veut faire référence au th cliqué tu dois utilisé la variable this

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

à l'air d'être une version plus correct dans le sens ou la variable th n'est pas associé à un élément cliqué.

-
Edité par SamuelGaborieau3 2 avril 2020 à 16:35:29

Pourtant que j'ajoute console.log("th :", th, this, this === th) dans la fonction du click, ça me dit bien que this et th représentent tous les deux le <th> sur lequel je clique.

  const tbody = document.querySelector('tbody');

const thx = document.querySelectorAll('th');
const trxb = tbody.querySelectorAll('tr');
thx.forEach(function(th){
  th.addEventListener('click', function(){
	console.log("th :", th, this, this === th);	  
    let classe = Array.from(trxb).sort(compare(Array.from(thx).indexOf(th), this.asc = !this.asc));
    classe.forEach(function(tr){
       tbody.appendChild(tr)
    });
  })
});

Bizarrel lol !

Ouais bizzare , ça vient peut être du client que tu utilise mais c'est pas le comportement naturel en javascript... 

A ta place je continuerais d'utilisais "this"  , tu pourrait avoir des problèmes en changant de navigateur où juste en mettant à jour sinon.