Comprendre le mot-clé "this" dans JavaScript

'ceci' en JavaScript

En JavaScript c'est plus compliqué car lorsque cette dépend non seulement de la manière dont la fonction est définie, mais aussi de la forme de son appel.

Regardez comment cette fonctionne en fonction du lieu et de la forme de l'invocation.

Le contexte mondial

Utilisé dans un contexte global lié à l'objet global, comme fenêtre dans un navigateur web.

this ; // fenêtre

Méthode interne à l'objet

Utilisé à l'intérieur d'une méthode objet liée à l'objet englobant le plus proche. L'objet est le nouveau contexte de la méthode cette mot-clé. Notez que vous ne devez pas modifier fonction () à la syntaxe ES6 fun : () => this.context car le contexte s'en trouverait modifié.

const obj = {
  context : "objet",
  fun : function() {
    return this.context ;
  }
} ;

obj.fun() ; // objet

Dans cet exemple, avec un objet imbriqué, cette se réfère toujours à son contexte le plus proche.

const nestedObj = {
  context : "parent",
  child : {
    contexte : "enfant",
    fun : function() {
      return this.context ;
    }
  }
} ;

nestedObj.child.fun() ; // child

Fonction sans contexte

Utilisé à l'intérieur d'une fonction qui n'a pas de contexte (n'a pas d'objet comme parent) lié au contexte global, même si la fonction est définie à l'intérieur de l'objet.

Notez que nous utilisons var contexte au lieu de let/const contexte parce que laisser et constante modifier le contexte de la variable incluse. var est toujours le plus proche du contexte d'exécution global. laisser et constante déclarer des variables uniquement dans un bloc local.

var context = "global" ;

const obj = {
  context : "objet",
  funA : function() {
    function funB() {
      const context = "fonction" ;
      return this.context ;
    }
    return funB() ; // invoqué sans contexte
  }
} ;

obj.funA() ; // global

A l'intérieur de la fonction constructeur

Utilisé à l'intérieur d'une fonction qui est le constructeur du nouvel objet qui lui est lié.

var context = "global" ;

function Obj() {
  this.context = "contexte Obj" ;
}

const obj = new Obj() ;
obj.context ; // contexte Obj

Fonction interne définie sur la chaîne de prototypes

Utilisé à l'intérieur d'une fonction définie sur la chaîne de prototypes pour créer un objet lié à celle-ci.

const ProtoObj = {
  fun : function() {
    return this.name ;
  }
} ;

const obj = Object.create(ProtoObj) ;
obj.name = "foo" ;
obj.fun() ; // foo

A l'intérieur call() et les fonctions apply()

call() et appliquer() sont JavaScript les fonctions. Celles-ci permettent à un objet d'utiliser des méthodes appartenant à un autre objet. call() prend des arguments séparément où appliquer() les prend sous forme de tableau.

cette est ici lié au nouveau contexte modifié dans call() et appliquer() des méthodes.

const objA = {
  context : "objA",
  fun : function() {
    console.log(this.context, arguments) ;
  }
} ;

const objB = {
  context : "objB"
} ;

objA.fun(1, 2) ; // objA, [1, 2]
objA.fun.call(objB, 1, 2, 3) ; // objB, [1, 2, 3]
objA.fun.apply(objB, [1, 2, 3, 4]) ; // objB, [1, 2, 3, 4]

Dans la fonction bind()

bind() est également une méthode JavaScript. Elle crée une nouvelle fonction qui aura cette fixé au premier paramètre transmis à bind()**.**

const objA = {
  context : "objA",
  fun : function() {
    console.log(this.context, arguments) ;
  }
} ;

const objB = {
  context : "objB"
} ;

const fun = objA.fun.bind(objB, 1, 2) ;
fun(3, 4) ; // objB, [1, 2, 3, 4]

Dans les gestionnaires d'événements

Utilisé dans n'importe quel gestionnaire d'événement (par exemple, addeventListener, onclick, attachEvent), il est lié à l'élément du DOM auquel l'événement était attaché.

document.querySelector(".foo").addEventListener("click", function() {
  this ; // se réfère à l'élément div `foo`.
}) ;

Fonction flèche ES6

Utilisé à l'intérieur de la fonction arrow, il est toujours lié à sa portée lexicale. Dans la fonction arrow, vous ne pouvez pas réaffecter la fonction cette de quelque manière que ce soit.

const globalArrowFunction = () => this ;

globalArrowFunction() ; // Fenêtre

const obj = {
  context : "objet",
  funA : () => this,
  funB : function() {
    return () => {
      return this.context ;
    } ;
  }
} ;

obj.funA() ; // fenêtre
obj.funB()() ; // objet

En savoir plus :

• Les plus grands défis du développement de logiciels personnalisés
• Quelles sont les différences entre un éditeur de logiciels et une agence de recrutement informatique ?