Discussion :

[Sinouhé87]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[Beginner.]

Salut,

Oui.

[Sinouhé87]

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

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

[psychadelic]

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

[Sinouhé87]

Ah bon pourquoi ?

[NoSmoking]

Bonjour,

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

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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);
  })
});

[Beginner.]

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