Que signifie le mot-clé ce en JavaScript signifie-t-il ? Et comment l’utiliser concrètement dans votre programme JavaScript ? Ce sont là quelques-unes des questions les plus courantes que se posent les débutants et même certains développeurs JavaScript expérimentés au sujet du mot-clé ce mot-clé.
Si vous êtes l’un de ces développeurs qui se demandent ce que le ce est un mot-clé, alors cet article est fait pour vous. Découvrez ce que ce dans différents contextes et familiarisez-vous avec certains problèmes afin d’éviter la confusion et, bien sûr, les bogues dans votre code.
« this » à l’intérieur de la portée globale
Dans le contexte global, ce renverra le fenêtre tant qu’il ne se trouve pas à l’intérieur d’une fonction. Le contexte global signifie que vous ne le placez pas à l’intérieur d’une fonction.
if(true) {
console.log(this)
}let i = 2
while(i < 10) {
console.log(this)
i++
}
Si vous exécutez le code ci-dessus, vous obtiendrez l’objet window.
« this » à l’intérieur des fonctions (méthodes)
Lorsqu’il est utilisé à l’intérieur de fonctions, cette fait référence à l’objet auquel la fonction est liée. L’exception est lorsque vous utilisez cette dans une fonction autonome, auquel cas elle renvoie le fichier fenêtre objet. Voyons quelques exemples.
Dans l’exemple suivant, l’objet sayName se trouve à l’intérieur de la fonction moi (c’est-à-dire qu’il s’agit d’une méthode). Dans des cas comme celui-ci, ce fait référence à l’objet contenant la fonction.
function sayName() {
return `My name is ${this.name}`
}const me = {
name: "Kingsley",
sayName: sayName
}
console.log(me.sayName())
cette est le moi objet, donc dire ce.nom à l’intérieur du sayName est exactement la même que la méthode me.name.
Une autre façon de voir les choses est que ce qui se trouve à gauche de la fonction lorsqu’elle est invoquée sera ce. Cela signifie que vous pouvez réutiliser le sayName dans différents objets et cette renvoie à chaque fois à un contexte complètement différent.
Comme nous l’avons déjà mentionné, cette renvoie le fenêtre lorsqu’il est utilisé à l’intérieur d’une fonction autonome. En effet, une fonction autonome est liée à l’objet fenêtre par défaut :
function talk() {
return this
}talk()
Appel talk() est la même chose que d’appeler window.talk()et tout ce qui se trouve à gauche de la fonction deviendra automatiquement ceci.
Par ailleurs, le ce dans la fonction se comporte différemment en mode strict de JavaScript (il renvoie non dé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).
Utilisation de « this » avec Function.bind()
Dans certains cas, il n’est pas possible d’ajouter la fonction à un objet en tant que méthode (comme dans la dernière section).
Peut-être que l’objet n’est pas le vôtre et que vous le tirez d’une bibliothèque. L’objet est immuable, vous ne pouvez donc pas le modifier. Dans ce cas, vous pouvez toujours exécuter la déclaration de fonction séparément de l’objet à l’aide de la méthode Function.bind() méthode.
Dans l’exemple suivant, la méthode sayName n’est pas une méthode de la classe moi mais vous le liez quand même à l’aide de l’objet bind() fonction :
function sayName() {
return `My name is ${this.name}`
}const me = {
name: "Kingsley"
}
const meTalk = sayName.bind(me)
meTalk()
Quel que soit l’objet que vous passez dans bind() sera utilisée comme valeur de ce dans cet appel de fonction.
En résumé, vous pouvez utiliser bind() sur n’importe quelle fonction et transmettre un nouveau contexte (un objet). Et cet objet remplacera la signification de ce à l’intérieur de cette fonction.
Utilisation de « this » avec Function.call()
Que faire si vous ne voulez pas retourner une toute nouvelle fonction, mais plutôt juste appeler la fonction après l’avoir liée à son contexte ? La solution pour cela est la méthode call() méthode :
function sayName() {
return `My name is ${this.name}`
}const me = {
name: "Kingsley"
}
sayName.call(me)
La appel() 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 la méthode call() méthode. Dans l’exemple suivant, vous passez la langue à la méthode sayName() afin que vous puissiez l’utiliser pour renvoyer différents messages de manière conditionnelle :
function sayName(lang) {
if (lang === "en") {
return `My name is ${this.name}`
} else if (lang === "it") {
return `Io sono ${this.name}`
}
}const me = {
name: "Kingsley"
}
sayName.call(me, 'en')
sayName.call(me, 'it')
Comme vous pouvez le voir, vous pouvez simplement passer n’importe quel paramètre à la fonction en tant que second argument de la fonction call() . Vous pouvez également passer autant de paramètres que vous le souhaitez.
Le apply() est très similaire à la méthode call() et bind(). La seule différence est que vous passez plusieurs arguments en les séparant par une virgule avec call()alors que vous passez plusieurs arguments dans un tableau avec apply().
En résumé, bind(), call() et apply() vous permettent tous d’appeler des fonctions avec un objet complètement différent sans qu’il y ait la moindre relation entre les deux (c’est-à-dire que la fonction n’est pas une méthode sur l’objet).
« this » à l’intérieur des fonctions de construction
Si vous appelez une fonction avec un nouveau il crée un mot-clé ce et le renvoie :
function person(name){
this.name = name
}const me = new person("Kingsley")
const her = new person("Sarah")
const him = new person("Jake")
me.name
her.name
him.name
Dans le code ci-dessus, vous avez créé trois objets différents à partir de la même fonction. L’objet nouveau crée automatiquement une liaison entre l’objet en cours de création et le mot-clé ce à l’intérieur de la fonction.
« this » à l’intérieur des fonctions de rappel
Les fonctions de rappel sont différentes des fonctions ordinaires. Les fonctions de rappel sont des fonctions que vous passez à une autre fonction en tant qu’argument, de manière à ce qu’elles puissent être exécutées immédiatement après l’exécution de la fonction principale.
La fonction ce se réfère à un contexte entièrement différent lorsqu’il est utilisé à l’intérieur de fonctions de rappel :
function person(name){
this.name = name
setTimeout(function() {
console.log(this)
}, 1000)
}const me = new person("Kingsley")
Après une seconde d’appel de la fonction personne et la création d’un nouveau moi il enregistrera l’objet fenêtre comme valeur de l’objet ce. Ainsi, lorsqu’il est utilisé dans une fonction de rappel, cette se réfère à l’objet fenêtre et non à l’objet « construit ».
Il y a deux façons de résoudre ce problème. La première consiste à utiliser bind() pour lier le personne à l’objet nouvellement construit :
function person(name){
this.name = name
setTimeout(function() {
console.log(this)
}.bind(this), 1000)
}const me = new person("Kingsley")
Avec la modification ci-dessus, cette dans le callback pointera vers le même ce comme fonction de construction (la fonction me ).
La deuxième façon de résoudre le problème des ce dans les fonctions de rappel est d’utiliser des fonctions fléchées.
« this » dans les fonctions fléchées
Les fonctions fléchées sont différentes des fonctions ordinaires. Vous pouvez faire de votre fonction de rappel une fonction fléchée. Avec les fonctions fléchées, vous n’avez plus besoin de bind() car il se lie automatiquement à l’objet nouvellement construit :
function person(name){
this.name = name
setTimeout(() => {
console.log(this)
}, 1000)
}const me = new person("Kingsley")
En savoir plus sur JavaScript
Vous avez tout appris sur le mot-clé « this » et sur sa signification dans les différents contextes de JavaScript. Si vous êtes novice en matière de JavaScript, il vous sera très utile d’apprendre toutes les bases du JavaScript et de son fonctionnement.