Maîtriser le mot-clé &#this&# en JavaScript

Le mot-clé this en JavaScript peut être assez délicat s'il n'est pas compris. C'est une de ces choses que même les développeurs expérimentés ont du mal à comprendre facilement, mais une fois que vous l'avez fait, cela peut vous faire gagner beaucoup de temps.

Dans cet article, nous verrons ce que c'est, comment cela fonctionne dans différentes situations et les erreurs courantes que vous ne devriez pas commettre en l'utilisant.

Comprendre cela en JavaScript

cela fait simplement référence à l'objet actuellement utilisé dans un code javascript. Mais voici la partie délicate : ce à quoi cela fait référence peut également changer en fonction de l'endroit et de la manière dont vous l'utilisez dans votre code. on pourrait se demander « pourquoi ? » Eh bien, c'est de nature dynamique =, ce qui signifie que - sa valeur est déterminée lorsqu'une fonction est appelée, pas lorsqu'elle est écrite.

ceci dans des contextes globaux et fonctionnels

Lorsque vous utilisez cela dans un contexte global, cela fait souvent référence à un objet global, ce qui est tout à fait logique, n'est-ce pas ? Donc, si vous tapez simplement ceci dans la console de votre navigateur, cela pointera vers la fenêtre.

Alors qu'il est utilisé à l'intérieur d'une fonction, il se comporte tout à fait différemment. Par exemple : si vous appelez une fonction "myFunction" par exemple, cela pointera toujours vers l'objet global mais si vous utilisez le mode strict en Javascript, cela le rendra indéfini à l'intérieur de cette fonction.

Ouais, je sais que c'est assez déroutant, suivez simplement. Je vais mieux expliquer.

ceci dans les objets

Lorsque vous utilisez ceci dans une méthode (une fonction qui est une propriété d'un objet), cela fait référence à l'objet auquel appartient la méthode.

Exemple :

const myObject = {
    name: 'Alice',
    greet: function() {
        console.log(this.name);
    }
};

myObject.greet(); // Output: 'Alice'

Ici, this.name fait référence à myObject.name, qui est « Alice ».

ceci dans les constructeurs et les classes

Constructeurs : lorsque vous créez un objet à l'aide d'une fonction constructeur ou d'une classe, cela fait référence au nouvel objet en cours de création.

Exemple :

function Person(name) {
    this.name = name;
}

const person1 = new Person('Bob');
console.log(person1.name); // Output: 'Bob'

Dans le code, this.name fait référence à la propriété name du nouvel objet Person.

Erreurs courantes et comment les éviter

Une erreur courante est de perdre sa valeur correcte dans les rappels ou les gestionnaires d'événements. Par exemple, si vous transmettez une méthode d'un objet comme rappel, cela pourrait ne plus faire référence à l'objet.

Solution : Pour éviter cela, vous pouvez utiliser une fonction de flèche ou une liaison pour que celle-ci pointe vers le bon objet.

const myObject = {
    name: 'Eve',
    greet: function() {
        setTimeout(() => {
            console.log(this.name);
        }, 1000);
    }
};

myObject.greet(); // Output: 'Eve'

Conclusion

Le mot-clé this peut être pénible, mais tout ce que vous devez noter, c'est qu'il change en fonction de comment et de l'endroit où vous choisissez de l'appeler. Pour vous améliorer, utilisez-le pour vous entraîner avec de nombreux exemples, et en un rien de temps, vous deviendrez un pro.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!