Mot-clé this JavaScript

Exemple

var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 678,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

Essayez-le vous-même

qu'est-ce que this ?

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

il a différentes valeurs, en fonction de son emplacement d'utilisation :

  • dans une méthode,this refère à l'objet propriétaire.
  • dans le cas isolé,this refère à l'objet global.
  • dans une fonction,this refère à l'objet global.
  • dans une fonction, en mode strict,this est undefined.
  • dans l'événement,this refère à l'élément qui reçoit l'événement.

comme call() et apply() une telle méthode peut faire référence à this pour n'importe quel objet.

this dans la méthode

dans une méthode d'objet,this refère au "propriétaire" de cette méthode.

Dans l'exemple en haut de cette page,this refère à l'objet person.

l'objet person est le propriétaire de la méthode fullName.

fullName : function() {
  return this.firstName + " " + this.lastName;
}

Essayez-le vous-même

this isolé

en usage isolé, le propriétaire est l'objet global, donc this refère à l'objet global.

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

Exemple

var x = this;

Essayez-le vous-même

en mode strict, si utilisé seul, this refère à l'objet global [object Window]:

Exemple

"use strict";
var x = this;

Essayez-le vous-même

this dans une fonction (par défaut)

dans une fonction JavaScript, le lien par défaut de l'objet propriétaire this.

par conséquent, dans une fonction,this refère à l'objet global [object Window].

Exemple

function myFunction() {
  return this;
}

Essayez-le vous-même

this dans une fonction (mode strict)

le mode strict JavaScript n'autorise pas le lien par défaut.

par conséquent, dans une fonction, en mode strict,this est non défini (undefined})

Exemple

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

Essayez-le vous-même

this dans le gestionnaire d'événement

Dans les gestionnaires d'événements HTML,this refère à l'élément HTML qui reçoit cet événement :

Exemple

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

Essayez-le vous-même

méthode d'objet

Dans cet exemple,this est un objet person (l'objet person est le "propriétaire" de cette fonction) :

Exemple

var person = {
  firstName  : "Bill",
  lastName   : "Gates",
  id         : 678,
  myFunction : function() {
    return this;
  }
};

Essayez-le vous-même

Exemple

var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 678,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

Essayez-le vous-même

En d'autres termes,this.firstName signifie thisdu firstName Propriétés.

Liage explicite de la fonction

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

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

Vous pouvez lire à la suite de ce tutoriel à propos de call() et apply() de plus de détails.

Lorsque l'on appelle person1.fullName en utilisant person2 comme paramètre,this Il fera référence à person2, même s'il s'agit d'une méthode de person1 :

Exemple

var person1 = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
var person2 = {
  firstName: "Bill",
  lastName: "Gates",
}
person1.fullName.call(person2);  // Retournera "Bill Gates"

Essayez-le vous-même