Ce mot clé

Le mot clé this fait référence à la valeur de l'objet lié au fonction au moment de son appel, ce qui signifie que sa valeur diffère en fonction indiquant si une fonction est appelée en tant que méthode, en tant que fonction autonome ou en tant que constructeur.

Lorsqu'une fonction est appelée, elle crée une instance du mot clé this derrière les scènes comme référence à l'objet qui contient cette fonction, ce qui donne l'accès aux propriétés et méthodes définies conjointement à partir de son champ d'application. L'utilisation de this est semblable à certains égards à l'utilisation d'une variable déclarée avec const. Comme pour les constantes, vous ne pouvez pas supprimer this et sa valeur réattribuées, mais les méthodes et propriétés de l'objet auxquelles le mot clé this a été attribué peut être modifié.

Liaison globale

En dehors d'une fonction ou du contexte d'un objet, this fait référence au globalThis, qui est une référence à l'objet global dans la plupart des JavaScript. Dans le contexte d'un script s'exécutant dans un navigateur Web, L'objet global est l'objet window:

this;
> Window {0: Window, window: Window, self: Window, document: document, name: '', location: Location, ...}

En Node.js, globalThis est l'objet global:

$ node
Welcome to Node.js v20.10.0.
Type ".help" for more information.
> this
<ref *1> Object [global] {
...
}

En dehors du mode strict, this fait également référence à l'objet global situé dans une instance car le parent Window est l'objet qui "possède" ces fonctions.

function myFunction() {
    console.log( this );
}
myFunction();
> Window {...}

(function() {
    console.log( this );
}());
> Window {...}

En mode strict, this a la valeur undefined dans un conteneur autonome :

(function() {
    "use strict";
    console.log( this );
}());
> undefined

Avant l'introduction du mode strict, une valeur null ou undefined pour this est remplacée par une référence à l'objet global. Vous pourriez parfois voir liaison globale appelée "liaison par défaut" ; en raison de cet ancien comportement.

Liaison implicite

Lorsqu'une fonction est appelée en tant que méthode d'un objet, une instance de this à l'intérieur cette méthode fait référence à l'objet qui la contient, ce qui permet d'accéder et des propriétés connexes:

let myObject = {
    myValue: "This is my string.",
    myMethod() {
            console.log( this.myValue );
    }
};

myObject.myMethod();
> "This is my string."

Il peut sembler que la valeur de this dépend de la façon dont une fonction et ses les objets englobants sont définis. À la place, le contexte de la valeur de this est le suivant : le contexte d'exécution actuel. Dans ce cas, le contexte d'exécution est que L'objet myObject appelle la méthode myMethod. myObject est donc la valeur. pour this. Dans le contexte de la précédente version, cela peut sembler technique exemples, mais pour des utilisations plus avancées de this, il s'agit d'une distinction essentielle pour gardez à l'esprit.

En général, utilisez this de manière à ne pas vous attendre à ce que le code environnant toute structure particulière. L'exception à cette règle est ES5 Fonctions fléchées

this dans les fonctions fléchées

Dans les fonctions de flèche : this renvoie une liaison dans un environnement englobant lexiquement. Cela signifie que Dans une fonction fléchée, this fait référence à la valeur de this dans le le contexte englobant le plus proche:

let myObject = {
    myMethod() { console.log( this ); },
    myArrowFunction: () => console.log( this ),
    myEnclosingMethod: function () {
        this.myArrowFunction = () => { console.log(this) };
    }
};

myObject.myMethod();
> Object { myMethod: myMethod(), myArrowFunction: myArrowFunction() }

myObject.myArrowFunction();
> Window {...}

Dans l'exemple précédent, myObject.myMethod() enregistre myObject en tant qu'objet qui "est propriétaire" cette méthode, mais myObject.myArrowFunction() renvoie globalThis (ou undefined), car l'instance de this dans la fonction fléchée fait plutôt référence au champ d’application englobant le plus élevé.

Dans l'exemple suivant, myEnclosingMethod crée une fonction fléchée sur le qui le contient lors de son exécution. L'instance de this dans le La fonction fléchée fait désormais référence à la valeur de this à l'intérieur de l'espace environnement, qui est la méthode qui contient cette fonction fléchée. En effet, la valeur de this dans myEnclosingMethod fait référence à myObject, après que vous définir la fonction fléchée, this à l'intérieur de la fonction fléchée fait également référence à myObject:

let myObject = {
    myMethod() { console.log( this ); },
    myEnclosingMethod: function () {
        this.myArrowFunction = () => { console.log(this) };
    }
};

myObject.myEnclosingMethod();
myObject.myArrowFunction();
> Object { myMethod: myMethod(), myArrowFunction: myArrowFunction() }

Liaison explicite

La liaison implicite gère la plupart des cas d'utilisation de this. Cependant, vous peut parfois avoir besoin de la valeur de this pour représenter une exécution spécifique. le contexte, plutôt que le contexte supposé. Illustratif, même s'il est un peu dépassé, l'exemple fonctionne avec this dans la fonction de rappel d'un setTimeout. car ce rappel a un contexte d'exécution unique:

var myObject = {
  myString: "This is my string.",
  myMethod() {
    console.log( this.myString );
  }
};
myObject.myMethod();
> "This is my string."

setTimeout( myObject.myMethod, 100 );
> undefined

Bien que cette faille spécifique liée à setTimeout ait depuis été comblée par autres fonctionnalités, problèmes similaires de "perte" Vous avez déjà reçu des adresses : this en créant une référence explicite à la valeur de this dans le cadre de le contexte souhaité. Il se peut que vous voyiez parfois des instances de this attribuées à une variable à l'aide d'identifiants tels que that, self ou _this dans l'ancienne version codebases. Il s'agit de conventions d'identification courantes pour les variables contenant a transmis la valeur this.

Lorsque vous appelez une fonction à l'aide des méthodes call(), bind() ou apply() : this fait explicitement référence à l'objet appelé:

let myFunction = function() {
    console.log( this.myValue );
}

let myObject = {
   "myValue" : "This is my string."
 };

myFunction.call( myObject );
> "This is my string."

var myObject = {
  myString: "This is my string.",
  myMethod() {
    console.log( this.myString );
  }
};

setTimeout( myObject.myMethod.bind( myObject ), 100 );
> "This is my string."

Une liaison explicite remplace la valeur this fournie par la liaison implicite.

let myObject = {
    "myValue" : "This string sits alongside myMethod.",
    myMethod() {
        console.log( this.myValue );
    }
};
let myOtherObject = {
    "myValue" : "This is a string in another object entirely.",
};

myObject.myMethod.call( myOtherObject );
> "This is a string in another object entirely."

Si une fonction est appelée d'une manière qui définirait la valeur de this sur undefined ou null, cette valeur est remplacée par globalThis en dehors mode:

let myFunction = function() {
    console.log( this );
}

myFunction.call( null );
> Window {...}

De même, si une fonction est appelée d'une manière qui donnerait à this une primitive valeur, cette valeur est remplacée par le objet wrapper de la valeur primitive en dehors du mode strict:

let myFunction = function() {
    console.log( this );
}

let myNumber = 10;

myFunction.call( myNumber );
> Number { 10 }

En mode strict, une valeur this transmise n'est en aucun cas convertie en objet par coercition. même s'il s'agit d'une valeur primitive, null ou undefined:

"use strict";
let myFunction = function() {
    console.log( this );
}

let myNumber = 10;

myFunction.call( myNumber );
> 10

myFunction.call( null );
> null

new liaison

Lorsqu'une classe est utilisée en tant que constructeur à l'aide de la classe Le mot clé new, this fait référence à l'instance que vous venez de créer:

class MyClass {
    myString;
    constructor() {
        this.myString = "My string.";
    }
    logThis() {
        console.log( this );
    }
}
const thisClass = new MyClass();

thisClass.logThis();
> Object { myString: "My string." }

De même, la valeur de this dans une fonction constructeur appelée à l'aide de new fait référence à l'objet en cours de création:

function MyFunction() {
  this.myString = "My string.";
  this.logThis = function() {
    console.log( this );
  }
}
const myObject = new MyFunction();

myObject.logThis();
> Object { myString: "My string.", logThis: logThis() }

Liaison de gestionnaire d'événements

Dans le contexte des gestionnaires d'événements, la valeur de this fait référence à l'objet qui l'invoque. Dans la fonction de rappel d'un gestionnaire d'événements, cela signifie this. référence l'élément associé au gestionnaire:

let button = document.querySelector( "button" );

button.addEventListener( "click", function( event ) { console.log( this ); } );

Lorsqu'un utilisateur interagit avec button dans l'extrait précédent, le résultat est Objet élément contenant le <button> lui-même:

> Button {}

Lorsqu'une fonction fléchée est utilisée comme rappel d'écouteur d'événements, la valeur de this est à nouveau fourni par le contexte d'exécution englobant le plus proche. En haut cela signifie que this dans une fonction de rappel de gestionnaire d'événements est globalThis (ou undefined, en mode strict):

let button = document.querySelector( "button" );

button.addEventListener( "click", ( event ) => { console.log( this ); } );
> undefined

Comme pour tout autre objet, lorsque vous utilisez call(), bind() ou apply() pour référencer la fonction de rappel d'un écouteur d'événements, this fait explicitement référence à l'objet:

let button = document.querySelector( "button" );
let myObject = {
    "myValue" : true
};
function handleClick() {
    console.log( this );
}

button.addEventListener( "click", handleClick.bind( myObject ) );
> Object { myValue: true }

Testez vos connaissances