Utiliser le this (this Keyword)

Salut HaWker ! Jeff Bruchado par ici.

C'est un autre article de notre serie d'articles qui va couvrir notre voyage pour Apprendre la Programmation depuis Zero.

Aujourd'hui ce sera un article sur un contenu que peu de personnes comprennent vraiment.

Bon, sans plus tarder, commencons !

Aujourd'hui, nous allons parler du 'this' :

Commencons en imaginant que vous travaillez sur un projet, une application qui a plusieurs onglets differents.

Dans chaque onglet, vous voulez afficher des informations specifiques de l'utilisateur qui est connecte, comme nom, email, et autres informations...

Vous devez penser : "D'accord, mais comment je fais pour savoir quel utilisateur est dans quel onglet sans faire un desordre ?"

Et c'est la qu'entre le fameux this.

Le this est comme un GPS dans votre code. Il vous aide a comprendre ou vous etes et a quelles donnees vous avez acces dans ce contexte specifique.

Il y a 3 raisons qui le rendent important ? Regardez :

Contexte : Le this vous donne le contexte. Selon ou vous l'utilisez, il peut se referer a des choses differentes. Par exemple, a l'interieur d'une methode d'un objet, this se refere a l'objet lui-meme.

Flexibilite : Il rend votre code plus flexible. Vous pouvez utiliser la meme fonction dans differents objets, et le this s'adaptera a l'objet qui appelle la fonction.

Clarte : Le this aide a rendre clair a quoi vous vous referez. Sans lui, il serait facile de se perdre au milieu de tant de variables et fonctions.

Pensez au this comme un miroir magique. Selon comment vous le regardez, il montre des choses differentes.

Par exemple, si vous etes dans une methode d'un objet :

let utilisateur = {
  nom: 'Jean',
  afficherNom: function () {
    console.log(this.nom);
  },
};

utilisateur.afficherNom(); // Ici, 'this' se refere a l'objet 'utilisateur'

Dans ce cas, this.nom c'est JavaScript qui dit "Hey, je parle du nom DE L'UTILISATEUR qui a appele cette fonction".

Alors, comme vous pouvez le constater, comprendre le this est crucial parce qu'il vous donne le controle et la clarte sur ce que votre code fait dans differents contextes.

Sans lui, vous pourriez etre completement perdu dans votre propre code, essayant de trouver la sortie d'un labyrinthe dans le noir.

Avec le this, vous avez une lampe de poche !

Bon, ensuite nous allons approfondir ce sujet.

Comprendre le `this` en JavaScript

Comprendre le concept du this en JavaScript peut etre un peu complexe pour un debutant, cependant, si vous comprenez ce concept, vous reussirez a comprendre en profondeur comment fonctionnent les mecanismes que les Frameworks les plus modernes utilisent.

(A cet instant vous allez comprendre pourquoi j'ai repete plusieurs fois le concept de portee dans les derniers articles)

Basiquement le mot reserve "this" se refere a l'objet actuel dans lequel le code est execute. Il peut etre utilise dans differents contextes et la valeur qu'il prend peut varier selon le contexte ou il est utilise.

Par exemple, en utilisant this a l'interieur d'une fonction, il se refere a l'objet global, tandis que, quand il est utilise a l'interieur d'une methode d'un objet, il se refere a l'objet lui-meme.

Exemple de code en JavaScript qui illustre l'utilisation de `this` :

const obj = {
  prop: 'valeur de la propriete',
  method() {
    console.log(this.prop);
  },
};

obj.method(); // affiche "valeur de la propriete"

Dans cet exemple, la valeur de this a l'interieur de la methode method est l'objet obj. Par consequent, en accedant a la propriete prop en utilisant this.prop, la valeur de la propriete est affichee dans la console.

Il existe aussi quelques regles generales sur l'utilisation du this :

Quand this est utilise a l'interieur d'une fonction globale, il se refere a l'objet global (qui dans le cas du navigateur est l'objet window).
Quand this est utilise a l'interieur d'une methode d'un objet, il se refere a l'objet lui-meme.
Quand this est utilise a l'interieur d'une fonction anonyme qui est passee comme argument a une autre fonction, la valeur de this dependra de la facon dont la fonction anonyme est appelee.
Il est possible d'utiliser l'operateur bind pour changer la valeur de this vers un objet specifique, independamment du contexte ou la fonction est appelee.

Exemple plus detaille qui illustre certains de ces cas :

// Fonction globale
function func() {
  console.log(this); // se refere a l'objet global (dans le cas du navigateur, l'objet "window")
}

func(); // affiche l'objet "window"

// Methode d'un objet
const obj = {
  prop: 'valeur de la propriete',
  method() {
    console.log(this); // se refere a l'objet "obj"
  },
};

obj.method(); // affiche l'objet "obj"

// Fonction anonyme passee comme argument
function autreFunc(callback) {
  callback();
}

autreFunc(function () {
  console.log(this); // se refere a l'objet global (dans le cas du navigateur, l'objet "window")
});

// Utilisation de "bind" pour changer la valeur de "this"
const obj2 = {
  prop: 'autre valeur de la propriete',
};

function troisiemeFunc() {
  console.log(this.prop);
}

const nouvelleFunc = troisiemeFunc.bind(obj2);
nouvelleFunc(); // affiche "autre valeur de la propriete"

`this` dans les Arrow Functions

Avant d'expliquer le this dans les Arrow Functions, j'ai besoin que vous compreniez le contexte lexical (lexical context).

Contexte Lexical (Lexical context)

Le Contexte lexical se refere au contexte dans lequel une fonction a ete ecrite.

Cela inclut l'endroit ou la fonction a ete definie et toutes les variables et fonctions qui etaient disponibles au moment ou la fonction a ete ecrite.

Par exemple :

const x = 'global';

function test() {
  const x = 'local';
  console.log(x);
}

test(); // Output: "local"
console.log(x); // Output: "global"

Dans ce cas, quand nous appelons la fonction test(), la valeur de x qui est affichee est "local", car c'est la valeur de x dans le contexte lexical de la fonction test().

Deja quand nous appelons console.log(x) en dehors de la fonction test(), la valeur de x est "global", car c'est la valeur de x dans le contexte lexical global.

Le `this` dans les Arrow Functions

Dans les fonctions normales ( function() ), le this se refere a l'objet qui appelle la fonction.

Par exemple :

const personne = {
  nom: 'Jeff',
  saluer: function () {
    console.log(`Bonjour, je m'appelle ${this.nom}`);
  },
};

personne.saluer(); // Output: "Bonjour, je m'appelle Jeff"

Deja dans les arrow functions, le this se refere au contexte lexical, c'est-a-dire, au contexte dans lequel la fonction a ete ecrite.

Je vais essayer d'expliquer mieux avec un exemple :

const personne = {
  nom: 'Jeff',
  saluer: () => {
    console.log(`Bonjour, je m'appelle ${this.nom}`);
  },
};

personne.saluer(); // Output: "Bonjour, je m'appelle undefined"

Dans ce cas, le this ne se refere pas a l'objet personne, mais au contexte global.

Pour cela, en essayant d'acceder a la propriete nom de l'objet personne, la valeur retournee est undefined.

Cependant, il est possible d'utiliser le this de facon differente dans les arrow functions, en utilisant le mot-cle bind().

La fonction bind() permet de "lier", la valeur de this a une variable ou objet specifique.

Voyez l'exemple ci-dessous :

const personne = {
  nom: 'Jeff',
  saluer: function () {
    console.log(`Bonjour, je m'appelle ${this.nom}`);
  },
};

const saluer = personne.saluer.bind(personne);
saluer(); // Output: "Bonjour, je m'appelle Jeff"

Dans ce cas, en utilisant bind() pour "lier" la valeur de this a l'objet personne, nous reussissons a acceder a la propriete nom de l'objet personne a l'interieur de la fonction saluer().

Conclusion

En resume, le this est utilise dans les fonctions normales ou dans les arrow functions.

Sa valeur et son comportement peuvent varier selon le contexte ou il est utilise. Dans les fonctions normales, le this se refere a l'objet qui appelle la fonction.

Deja dans les arrow functions, le this se refere au contexte lexical, c'est-a-dire, au contexte dans lequel la fonction a ete ecrite.

Cela peut etre un peu confus, mais la regle generale est que le this se refere a l'objet qui appelle la fonction dans les fonctions normales, et au contexte lexical dans les arrow functions.

Il est important de se rappeler que le this peut etre "lie" (bind) a une valeur specifique en utilisant la fonction bind().

Cela peut etre utile quand nous voulons utiliser le this de facon differente du standard dans les arrow functions, par exemple.

Avec cela, j'espere avoir aide a clarifier ce sujet redoute qu'est le this en JavaScript.

Eh bien HaWker, nous arrivons a la fin d'un autre article.

Comme toujours, si vous avez une question ou voulez explorer un point plus en detail, repondez simplement avec votre question, dans cet email.

Et rappelez-vous, je suis la pour vous aider a vous ameliorer de 1% a chaque nouvel article !

Si vous etes arrive jusqu'ici, comme d'habitude, s'il vous plait, repondez a cet email avec "J'ai finalement reussi a comprendre a quoi sert le this".

Ainsi je saurai que cette serie d'articles vous est utile, et que vous suivez et profitez.

Comme vous le savez deja ! Seul un veritable HaWker arrive jusqu'a la fin.

Felicitations !

Je suis content de vous avoir ici.

A bientot.

C'est parti !

- Jeff Bruchado

Felicitations d'etre arrive jusqu'ici, HaWker !

A ce moment ou vous avez appris l'utilisation du mot-cle this en JavaScript, que diriez-vous de tester vos connaissances ? Participez au quiz ci-dessous et voyez combien vous avez absorbe de notre article.

C'est une excellente facon de consolider l'apprentissage et de vous preparer pour les prochaines etapes de votre voyage de programmation.

Appuyez pour acceder au quiz.

Bonne chance et amusez-vous !

Utiliser le this (this Keyword)

Comprendre le this en JavaScript

Exemple de code en JavaScript qui illustre l'utilisation de this :

Exemple plus detaille qui illustre certains de ces cas :

this dans les Arrow Functions