ce mot-clé en javascript

L'un des mots-clés les plus confus en JavaScript est le mot-clé this. Il s'agit d'un mot-clé d'identification spécial qui est automatiquement défini dans la portée de chaque fonction, mais à quoi il fait exactement référence, même les développeurs JavaScript chevronnés sont confus.

Le mot-clé this fait référence au contexte dans lequel un morceau de code, tel que le corps d'une fonction, est censé s'exécuter. Le plus généralement, il est utilisé dans les méthodes objet, où ceci fait référence à l'objet auquel la méthode est attachée, permettant ainsi à la même méthode d'être réutilisée sur différents objets.

La valeur de ceci peut être identifiée là où la fonction est exécutée et non là où la fonction est déclarée

Nous examinerons différentes règles pour identifier le this en javascript

Liaison par défaut

La règle par défaut que nous appliquerons au cas le plus courant d'appels de fonction : l'exécution de fonctions autonomes. Considérez cette règle comme la règle fourre-tout par défaut lorsqu'aucune des autres règles ne s'applique.

Dans les fonctions autonomes, cette valeur sera globalObject (dans l'environnement du navigateur, il s'agit d'un objet fenêtre, dans l'environnement du nœud, elle sera globale)

function bar() {
    console.log(this) // this will be global object (window)
}
bar()

Mais......

la valeur de ceci peut être différente selon la façon dont le code s'exécute en mode strict ou en mode non strict

Si la fonction When est invoquée en tant que fonction autonome, cela fait généralement référence à un objet global en mode non strict et non défini en mode strict

"use strict"
function bar() {
    console.log(this) // undefined
}
bar()

Subtil mais important, l'objet global n'est éligible à la liaison par défaut que si le contenu de bar() ne s'exécute pas en mode strict ;

function bar() {
    console.log(this) // global object (window)
}
(function() {
    "use strict"
    bar()
})()

Liaison implicite

Lorsqu'une fonction régulière est invoquée en tant que méthode d'un objet (obj.method()), cela pointe vers cet objet.

function bar() {
    console.log(this)
}
const obj = {
    name: "javascript",
    foo
}
obj.foo() // this here is object owing the function

Tout d'abord, remarquez la manière dont bar() est déclaré puis ajouté plus tard en tant que propriété de référence sur obj. Que foo() soit initialement déclaré sur obj ou soit ajouté comme référence ultérieurement (comme le montre cet extrait), dans aucun des cas, la fonction n'est réellement « possédée » ou « contenue » par l'objet obj.

Perdu implicite :
Lors de l'utilisation de rappels, la fonction implicitement liée perd cette liaison, ce qui signifie généralement qu'elle revient à la liaison par défaut, de l'objet global ou non défini, selon le mode strict.

function bar() {
    setTimeout(function() {
        console.log(this) // this will be global object
    }, 1000);
}
const obj = {
    name: "javascript",
    bar
}
obj.bar() // this will be global object

function bar() {
    console.log(this)
}
const obj = {
    name: "javascript",
    bar
}
const a = obj.bar
a() // this will be global object

Liaison explicite

Avec la liaison implicite comme nous venons de le voir, nous avons dû muter l'objet en question pour inclure une référence sur lui-même à la fonction, et utiliser cette référence de fonction de propriété pour la lier indirectement (implicitement) à l'objet.

Mais que se passe-t-il si vous souhaitez forcer un appel de fonction à utiliser un objet particulier pour la liaison this, sans mettre de référence de fonction de propriété sur l'objet ?

Oui, c'est possible, javascript fournit de nombreuses méthodes comme .map, .filter pour le tableau, nous avons peu de méthodes en fonction. Ce sont appliquer, appeler et lier

Voici la syntaxe de ces méthodes
appeler

function bar() {
    console.log(this) // this will be global object (window)
}
bar()

postuler

"use strict"
function bar() {
    console.log(this) // undefined
}
bar()

Différence subtile entre postuler et appeler. La syntaxe est la même mais nous passons les arguments sous forme de tableau dans la méthode apply

function bar() {
    console.log(this) // global object (window)
}
(function() {
    "use strict"
    bar()
})()

Invoquer bar avec liaison explicite par bar.call(..) nous permet de forcer que this soit obj.

nouvelle reliure

Lorsqu'une fonction est utilisée comme constructeur (avec le mot-clé new), elle est liée au nouvel objet en cours de construction, quel que soit l'objet sur lequel la fonction constructeur est accessible. La valeur de this devient la valeur de la nouvelle expression à moins que le constructeur ne renvoie une autre valeur non primitive.

function bar() {
    console.log(this)
}
const obj = {
    name: "javascript",
    foo
}
obj.foo() // this here is object owing the function

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!