Mot-clé this JavaScript

Comparé à d'autres langages, le comportement du mot-clé this dans JavaScript est légèrement différent.

Dans JavaScript, le mot-clé this fait référence à l'objet auquel il appartient.

Selon la position d'utilisation, il a différentes valeurs :

• Dans la méthode, this renvoieL'objet propriétaire

• Indépendamment, this fait référence àl'objet global

• Dans une fonction, this fait référencel'objet global

• Dans une fonction, en mode strict, this estNon définide

• Dans l'événement, this fait référence à l'élémentl'élément

• Les méthodes telles que call() et apply(), peuvent y faire référencen'importe quel objet

Contexte de méthode

Dans une méthode d'objet, this fait référence à la méthodeuser.

Dans l'exemple suivant, lors de l'appeluser.getName()Lorsque, dans une fonction, this est lié àuserL'objet :

var user = {
firstName: "Vishal",
lastName : "Choudhary",
age :　22,
getName : function() {
　return this.firstName　+　" "　+　this.lastName;
}
});
document.write(user.getName());　　　//　"Vishal Choudhary"

iciuserL'objet est propriétairegetNamedes méthodes.

Contexte global

Dans le contexte d'exécution global (à l'extérieur de toute fonction), this fait toujours référence à l'objet global, qu'il soit en mode strict ou non.

//　Dans le navigateur Web, l'objet fenêtre est également l'objet global :
console.log(this === window);　　//　true
a =　50;
console.log(window.a);　//　50
this.b = "w3codebox";
console.log(window.b)　　//　"w3codebox"
console.log(b)　//　"w3codebox"

Dans la fenêtre du navigateur, l'objet global est[object Window].

Contexte de fonction

À l'intérieur d'une fonction, la valeur de this dépend de la manière dont la fonction est appelée.

Comme le code suivant n'est pas en mode strict, this est donc par défaut l'objet global, c'est-à-dire l'objet global du navigateur,[object Window]:

function myFunc() {
return this;
}

En mode strict, toutefois, la valeur de this estundefined:

function myFunc() {
"use strict";
return this;
}

Par conséquent, en mode strict, si l'exécution contextuelleNon définiIl, alors il resteÉtat non défini.

thisDans les gestionnaires d'événements DOM

Lorsqu'une fonction est utilisée comme gestionnaire d'événement, this est mis à jour en fonction de l'élément déclencheur de l'événement :

let btn = document.querySelector("button");
btn.onclick = function() {
this.style.display = "none";
});

Lorsque le code est appelé à partir d'un gestionnaire d'événement en ligne, this est configuré comme l'élément où le listener est placé :

<button onclick="this.style.display='none'">Cliquez pour supprimer moi</button>

Voici un autre exemple :

<button onclick="alert(this)">Cliquez</button>

Liage explicite de la fonction

Les méthodes call() et apply() sont des méthodes JavaScript prédéfinies.

Ils peuvent tous être utilisés pour appeler une méthode d'objet avec un autre objet en tant que paramètre.

function add(c, d) {
return this.a　+　this.b　+　c　+　d;
}
var obj = {a :5, b :10});
add.call(obj,　5,　7);　　//　27
add.apply(obj, [10,　20]);　//　45

Fonction fléchée (=>)

Dans la fonction fléchée (=>), this toujours pointe vers le contexte lexical où elle a été créée.

Dans le code global, il sera configuré comme objet global :

var globalObj = this;
var myFunc = (() => this);
document.write(myFunc() === globalObj);　　　//　true