Comprendre le mot clé JavaScript « this »

Que fait le ce mot-clé en JavaScript signifie? Et comment pouvez-vous l’utiliser pratiquement dans votre programme JavaScript? Ce sont quelques-unes des questions courantes que les débutants et même certains développeurs JavaScript expérimentés se posent à propos du ce mot-clé.

Si vous faites partie de ces développeurs qui se demandent ce que ce le mot clé est tout, alors cet article est pour vous. Explorez quoi ce fait référence à différents contextes et familiarisez-vous avec certains pièges pour éviter toute confusion et, bien sûr, les bugs dans votre code.

"ceci" dans le cadre mondial

Dans le contexte mondial, ce rendra le fenêtre objet tant qu'il est en dehors d'une fonction. Le contexte global signifie que vous ne le placez pas dans une fonction.

if(true) {
console.log(this) // returns window object
}
let i = 2
while(i < 10) {
console.log(this) // returns window object till i 9
 i++
}

Si vous exécutez le code ci-dessus, vous obtiendrez l'objet window.

"ce" Fonctions internes (méthodes)

Lorsqu'il est utilisé à l'intérieur de fonctions, ce fait référence à l'objet auquel la fonction est liée. L'exception est lorsque vous utilisez ce dans une fonction autonome, auquel cas il renvoie le fenêtre objet. Voyons quelques exemples.

Dans l'exemple suivant, le direNom la fonction est à l'intérieur du moi objet (c'est-à-dire que c'est une méthode). Dans des cas comme celui-ci, ce fait référence à l'objet contenant la fonction.

 
functionsayName() {
return`My name is ${this.name}`
}
const me = {
 name: "Kingsley",
 sayName: sayName
}
console.log(me.sayName()) // My name is Kingsley

ce est le moi objet, en disant cela Ce nom à l'intérieur de direNom la méthode est exactement la même que moi.nom.

Une autre façon de voir les choses est que tout ce qui se trouve à gauche de la fonction lorsqu'elle est invoquée sera ce. Cela signifie que vous pouvez réutiliser le direNom fonctionner dans différents objets et ce fera référence à chaque fois à un contexte complètement différent.

Maintenant, comme mentionné précédemment, ce renvoie le fenêtre objet lorsqu’il est utilisé dans une fonction autonome. En effet, une fonction autonome est liée au fenêtre objet par défaut :

functiontalk() {
returnthis
}
talk() // returns the window object

Appel parler() c'est la même chose que d'appeler fenêtre.talk(), et tout ce qui se trouve sur le côté gauche de la fonction deviendra automatiquement ce.

En passant, le ce le mot-clé dans la fonction se comporte différemment dans Le mode strict de JavaScript (ça revient indéfini). C'est également quelque chose à garder à l'esprit lorsque vous utilisez des bibliothèques d'interface utilisateur qui utilisent le mode strict (par exemple React).

Utiliser "this" avec Function.bind()

Il peut y avoir des scénarios dans lesquels vous ne pouvez pas simplement ajouter la fonction à un objet en tant que méthode (comme dans la dernière section).

Peut-être que l'objet ne vous appartient pas et que vous le extrayez d'une bibliothèque. L'objet est immuable, vous ne pouvez donc pas simplement le modifier. Dans des cas comme celui-ci, vous pouvez toujours exécuter l'instruction de fonction séparément de l'objet en utilisant le Fonction.bind() méthode.

Dans l'exemple suivant, le direNom la fonction n'est pas une méthode sur le moi objet, mais vous l'avez toujours lié en utilisant le lier() fonction:

functionsayName() {
return`My name is ${this.name}`
}
const me = {
 name: "Kingsley"
}
const meTalk = sayName.bind(me)
meTalk() // My name is Kingsley

Quel que soit l'objet dans lequel vous passez lier() sera utilisée comme valeur de ce dans cet appel de fonction.

En résumé, vous pouvez utiliser lier() sur n'importe quelle fonction et passer dans un nouveau contexte (un objet). Et cet objet écrasera la signification de ce à l'intérieur de cette fonction.

Utiliser "this" avec Function.call()

Que se passe-t-il si vous ne souhaitez pas renvoyer une toute nouvelle fonction, mais simplement appeler la fonction après l'avoir liée à son contexte? La solution pour cela est la appel() méthode:

functionsayName() {
return`My name is ${this.name}`
}
const me = {
 name: "Kingsley"
}
sayName.call(me) // My name is Kingsley

Le appel() La méthode exécute immédiatement la fonction au lieu de renvoyer une autre fonction.

Si la fonction nécessite un paramètre, vous pouvez le passer via le appel() méthode. Dans l'exemple suivant, vous transmettez la langue au direNom() fonction, vous pouvez donc l'utiliser pour renvoyer conditionnellement différents messages :

functionsayName(lang) {
if (lang "en") {
return`My name is ${this.name}`
 } elseif (lang "it") {
return`Io sono ${this.name}`
 }
}
const me = {
 name: "Kingsley"
}
sayName.call(me, 'en') // My name is Kingsley
sayName.call(me, 'it') // Io sono Kingsley

Comme vous pouvez le voir, vous pouvez simplement transmettre n'importe quel paramètre de votre choix à la fonction comme deuxième argument du appel() méthode. Vous pouvez également transmettre autant de paramètres que vous le souhaitez.

Le appliquer() la méthode est très similaire à appel() et lier(). La seule différence est que vous transmettez plusieurs arguments en les séparant par une virgule avec appel(), alors que vous transmettez plusieurs arguments dans un tableau avec appliquer().

En résumé, bind(), call() et apply() tous vous permettent d'appeler des fonctions avec un objet complètement différent sans aucune sorte de relation entre les deux (c'est-à-dire que la fonction n'est pas une méthode sur l'objet).

"this" dans les fonctions du constructeur

Si vous appelez une fonction avec un nouveau mot-clé, cela crée un ce objet et le renvoie :

functionperson(name){
this.name = name
}
const me = new person("Kingsley")
const her = new person("Sarah")
const him = new person("Jake")
me.name // Kingsley
her.name // Sarah
him.name // Jake

Dans le code ci-dessus, vous avez créé trois objets différents à partir de la même fonction. Le nouveau Le mot-clé crée automatiquement une liaison entre l'objet en cours de création et le ce mot-clé à l’intérieur de la fonction.

"ceci" dans les fonctions de rappel

Les fonctions de rappel sont différent des fonctions régulières. Les fonctions de rappel sont des fonctions que vous transmettez à une autre fonction en tant qu'argument, afin qu'elles puissent être exécutées immédiatement après la fin de l'exécution de la fonction principale.

Le ce Le mot-clé fait référence à un contexte totalement différent lorsqu'il est utilisé dans des fonctions de rappel :

functionperson(name){
this.name = name
 setTimeout(function() {
console.log(this)
 }, 1000)
}
const me = new person("Kingsley") // returns the window object

Après une seconde d'appel au personne fonction constructeur et création d'un nouveau moi objet, il enregistrera l'objet fenêtre comme valeur de ce. Ainsi, lorsqu'il est utilisé dans une fonction de rappel, ce fait référence à l'objet window et non à l'objet "construit".

Il existe deux façons de résoudre ce problème. La première méthode utilise lier() lier le personne fonction à l'objet nouvellement construit :

functionperson(name){
this.name = name
 setTimeout(function() {
console.log(this)
 }.bind(this), 1000)
}
const me = new person("Kingsley") // returns the me object

Avec la modification ci-dessus, ce dans le rappel indiquera le même ce comme fonction constructeur (le moi objet).

La deuxième façon de résoudre le problème de ce dans les fonctions de rappel consiste à utiliser des fonctions fléchées.

"ce" Fonctions de flèche intérieure

Les fonctions fléchées sont différentes des fonctions normales. Vous pouvez faire de votre fonction de rappel une fonction de flèche. Avec les fonctions fléchées, vous n'avez plus besoin lier() car il se lie automatiquement à l'objet nouvellement construit :

functionperson(name){
this.name = name
 setTimeout(() => {
console.log(this)
 }, 1000)
}
const me = new person("Kingsley") // returns the me object

En savoir plus sur JavaScript

Vous avez tout appris sur le mot-clé « this » et ce qu'il signifie dans tous les différents contextes en JavaScript. Si vous débutez avec JavaScript, vous bénéficierez grandement de l'apprentissage de toutes les bases de JavaScript et de son fonctionnement.