Qu’est-ce que « Ceci » en JavaScript ?

Dans cet article, nous allons voir ce que this mot-clé est et les quatre règles qui déterminent son comportement en JavaScript.

Par rapport aux autres langues, le this mot-clé agit différemment en JavaScript. C’est l’un des mots-clés JavaScript les plus courants. Aussi déroutant qu’il puisse être, c’est un concept fondamental car il permet la flexibilité, réutilisant une fonction dans de multiples contextes.

Qu’est-ce que le « Ceci » ?

Lorsque vous appelez une fonction en JavaScript, un nouveau contexte d’exécution est créé et ajouté à la pile des appels. Le contexte d’exécution contient un this référence ou un this liaison qui sera utilisée tout au long de l’exécution de la fonction. Quoi this références est entièrement déterminée par le site d’appel (l’emplacement où une fonction est appelée, pas l’endroit où elle est déclarée).

Ainsi, pour chaque invocation de fonction, il existe un identifiant spécial appelé thismais this n’est pas concerné par l’endroit où une fonction est définie ; au lieu de cela, il s’intéresse à la façon dont il est appelé.

La this Le mot-clé peut être utilisé pour invoquer des fonctions dans différents contextes, et selon le contexte, this peut signifier quelque chose de complètement différent à chaque fois. La this Le mot-clé ne pointe jamais sur la fonction elle-même. Il pointe toujours vers un objet de contexte qui peut être identifié en regardant le site d’appel d’une fonction. Comment alors déterminer quelle est la valeur de this pointe vers une fonction donnée ?

4 règles pour lier ‘ceci’

En JavaScript, il existe quatre façons différentes d’invoquer une fonction, et chacune d’elles fournit différents objets de contexte pour le this mot-clé vers lequel pointer lors de l’exécution d’une fonction. Les quatre règles de la liaison this sont déterminés par la façon dont nous invoquons les fonctions en JavaScript. La compréhension de ces quatre manières peut nous aider à comprendre comment le this le mot-clé est lié.

Liaison implicite

Lorsque nous invoquons une fonction dans le contexte d’un objet qui possède ou contient la fonction thisil pointera vers cet objet.

Considérez l’exemple suivant :

function sayHello() {
  console.log(this.greet)
}
var greet1 = {greet: 'Hello', sayHello: sayHello}
var greet2 = {greet: 'hi', sayHello: sayHello}
greet1.sayHello() 
greet2.sayHello() 

Dans l’extrait ci-dessus, nous empruntons une référence au sayHello fonction et en fixant sa référence directement sur les objets greet1 et greet2. Ce faisant, on peut implicitement appeler sayHello dans le contexte de l’un des objets. JavaScript appellera simplement le sayHello fonction et réglez sa this mot-clé égal à l’objet de contexte utilisé pour invoquer la fonction.

Il décide ce que this le mot-clé pointera en fonction de l’objet utilisé pour invoquer le sayHello fonction. En regardant les deux sites d’appel dans l’exemple ci-dessus, nous pouvons dire que le this mot clé sera égal à l’objet devant l’appel de fonction. Alors greet2.sayHello() dit invoquer la fonction sayHello avec son this mot-clé pointant vers le greet2 objet.

Considérez cet objet contenant une fonction :

const myObj = {
  greet: 'Hello',
  func: function sayHello() {
    console.log(this.greet)
  },
}
myObj.func() 

Nous avons un objet qui contient une propriété qui contient une fonction. Cette propriété est également connue sous le nom de méthode. Chaque fois que cette méthode est appelée, son this le mot-clé sera lié à son objet englobant immédiat—myObj. Cela est vrai pour les modes stricts et non stricts.

Liaison explicite

Les fonctions en JavaScript sont considérées comme des objets de première classe, ce qui signifie qu’elles peuvent être stockées dans des variables, transmises, renvoyées par d’autres fonctions et même conserver leurs propriétés. Toutes les fonctions descendent de la fonction intégrée Function objet et ils héritent des méthodes définies sur l’objet Function.prototype.

Nous pouvons utiliser deux de ses méthodes, call() et apply(), pour appeler une fonction dans différents contextes ou avec différents objets de contexte. Ces méthodes exécutent la fonction pointant vers le contexte d’objet fourni comme valeur de this.

Considérez l’exemple suivant :

function sayHello() {
  console.log(this.greet)
}
var greet1 = {
  greet: 'Hello',
}
sayHello.call(greet1) 
sayHello.apply(greet1) 

Dans l’exemple ci-dessus, nous invoquons le sayHello fonction à l’aide de la call() et apply() méthodes et ils acceptent tous les deux un objet—greet1 comme premier argument. invoquant explicitement le sayHello fonction avec ces méthodes forcera la fonction à utiliser l’objet greet1 pour son this obligatoire dans les deux cas.

Tous les deux call() et apply() se comportera de manière identique et définira greet1 comme la valeur de this à l’intérieur de sayHello fonction. Néanmoins, la différence entre les deux méthodes réside dans la manière dont elles gèrent les paramètres supplémentaires, mais nous ne couvrirons pas cela dans cet article.

En mode non strict, si vous transmettez une valeur primitive en tant que liaison « this », la valeur primitive sera contrainte à sa forme enveloppée d’objet.

Variation de la liaison explicite

Malheureusement, il y a une possibilité de perdre l’intention this la liaison ou la définition de l’objet global lors du passage de fonctions ou de la fourniture d’un rappel à une autre fonction. La méthode de la fonction bind() est un utilitaire intégré à JavaScript, et il a été ajouté dans ES5 pour définir la valeur d’une fonction this quelle que soit la façon dont la fonction est appelée.

Considérez l’exemple suivant :

var greet = 'Hi'
function sayHello(cb) {
  cb()
}
var obj = {
  greet: 'Hello',
  greeting: function () {
    console.log(this.greet)
  },
}
sayHello(obj.greeting) 
sayHello(obj.greeting.bind(obj)) 

Dans l’exemple ci-dessus, lorsque nous passons obj.greeting comme un rappel à la fonction sayHello()son this mot clé perd son this contraignant à obj et pointe vers l’objet global. this.greet ne fait pas référence à obj— à la place, il fait référence à l’objet global. Ceci peut être résolu en utilisant le bind() méthode pour définir la valeur de this à obj.

bind() n’appelle pas la fonction immédiatement. Il renvoie une fonction avec « this » lié à l’objet qu’il reçoit comme premier argument.

Le « Nouveau » mot-clé

Invoquer une fonction avec le new mot-clé est appelé un appel constructeur. Lorsqu’une fonction est appelée avec le new mot-clé devant, il fait quatre choses :

1. Cela crée un tout nouvel objet vide.
2. L’objet nouvellement créé est lié à l’objet prototype de la fonction.
3. La fonction est invoquée avec son this mot-clé pointant vers le nouvel objet
4. Si la fonction ne renvoie pas d’objet, elle implique un retour this. Avec le this mot-clé pointant déjà vers l’objet nouvellement créé, l’objet nouvellement créé est renvoyé automatiquement.

Considérer ce qui suit:

function sayHello(greet) {
  this.greet = greet
}
let me = new sayHello('Hello Ifeoma')
console.log(me.greet) 

Dans l’exemple ci-dessus, l’appel de la fonction sayHello avec le new le mot-clé créerait immédiatement un nouvel objet qui est une instance de la fonction sayHello. La this la liaison à l’intérieur du corps de la fonction pointe vers le nouvel objet qui a été créé et affecté à la variable me.

Liaison par défaut

Lorsque vous utilisez this à l’intérieur d’une fonction qui est invoquée sans définir l’appel à un objet de contexte, par défaut, cela pointera vers l’objet global, qui est la fenêtre d’un navigateur. La liaison par défaut est appliquée lorsqu’une fonction est appelée de manière habituelle (par exemple, sayHello()).

Considérer ce qui suit:

var greet = 'Hello'
function sayHello() {
  
  console.log(this)
  console.log(this.greet)
}
sayHello() 

Dans l’exemple ci-dessus, lorsque nous appelons notre sayHello fonction, this.greet se résout en notre variable globale greet car les variables définies dans la portée globale sont des propriétés d’objet globales. Nous avons appelé sayHello sans définir d’objet de contexte, la liaison par défaut s’applique donc ici si la fonction n’est pas dans mode strict.

var greet = 'Hello'
function sayHello() {
  
  'use strict'
  console.log(this)
  console.log(this.greet)
}
sayHello() 

Dans l’exemple ci-dessus, le contenu de notre fonction s’exécute en mode strict, donc l’objet global n’est pas éligible pour la liaison par défaut dans ce cas. La valeur de thisdans ce cas, est défini sur undefined.

Fonctions fléchées

Les fonctions fléchées, par défaut, ne définissent pas de this mot-clé, ce qui signifie qu’ils n’ont pas leur propre this obligatoire. Si vous définissez un this mot-clé dans une fonction fléchée, ce n’est pas différent de déclarer une variable régulière en JavaScript. Il se résoudra lexicalement en une portée englobante qui définit un this mot-clé ou la portée globale.

Pour expliquer comment this fonctionne en ce qui concerne les fonctions fléchées, considérez ce qui suit :

let obj = {
  greet: 'hello',
  func: function sayHello() {
    return () => {
      console.log(this.greet)
    }
  },
}
let a = obj.func()
a() 

Dans l’exemple ci-dessus, le this mot-clé dans la fonction flèche à l’intérieur de notre sayHello fonction fait référence à la valeur de this dans l’environnement de la fonction flèche (où il a été défini). Dans notre cas, il recherchera la chaîne de portée pour voir si sa portée parent a un this mot-clé; étant donné que le champ d’application contenant les sayHello fonction est un objet, la valeur de this dans la fonction flèche pointe vers l’objet.

Ordre de préséance

Quel est l’ordre de priorité si plusieurs règles correspondent à un site d’appel ?

• Si la fonction a été appelée avec le new mot-clé, this pointerait vers l’objet nouvellement créé.
• S’il a été appelé avec l’un de ces…call(), apply() ou bind()— utilise l’objet de contexte spécifié comme valeur de this.
• S’il a été appelé avec un objet de contexte, la valeur de this pointerait vers cet objet.
• Enfin, utilisez par défaut l’objet global si l’une des règles ci-dessus ne correspond pas et que la fonction ne s’exécute pas en mode strict.