JS | This

Retracer la source：this

Regardez d'abord.mdnExplication dans：Dans la grande majorité des cas,La façon dont la fonction est appelée déterminethisValeur de,thisImpossible d'attribuer une valeur pendant l'exécution,Et chaque fois qu'une fonction est appeléethisLes valeurs peuvent également varier.

Points saillants：La façon dont la fonction est appelée déterminethisValeur de,C'est - à - direthisDans la plupart des cas, pointez vers l'objet qui l'appelle

En fait, dans notre codage réel,Souvent utiliséthis.xxx,Ça arrive parfoisthis.xxx is undefinedErreur.C'est que parfois, dans le contexte de l'exécution du CodethisCe n'est pas l'objet qu'on prend pour acquis.

ES5IntroduitbindMéthode pour définirthisValeur de,Sans tenir compte de la façon dont la fonction est appelée.ES6Fonction de flèche introduite, La fonction Arrow ne fournit pas sa propre thisBIND

Où que nous soyons, nous pouvons l'utiliser directement globalThis Pour obtenir des objets globaux

function someFunction() {
return this;
}
// `true`:
console.log(someFunction() === globalThis);
Copier le Code

En fait...this Est lié au contexte d'exécution ,Alors...this Il peut également être divisé en trois ：

Dans le contexte global this
Dans le contexte de la fonction this
evalDansthis（Essentiellement non utilisé）

Selonmdn Nous avons la définition de , La plupart pointent vers l'objet qui l'a appelé, sauf dans la plupart des cas , Il y a aussi des cas particuliers qui nécessitent une attention particulière ：

Fonctions fléchées（arrow function）: Avec l'extérieur thisMême chose.

const outerThis = this
const arrowFunction = () => {
console.log(this === outerThis)
}
arrowFunction() // true
Copier le Code

D'autres situations ：

bind：Ça ne changera pasthisPointage
call/apply：Ça ne changera pasthisPointage
Comme les autres Object Propriété appelée pour ：Ça ne changera pasthisPointage
```
const obj = {arrowFunction};
// `true`
obj.arrowFunction();
Copier le Code
```
UtilisernewAppelez la fonction：
```
new arrowFunction()
// TypeError: arrowFunction is not a constructor
Copier le Code
```
- class Utiliser les fonctions fléchées dans ：thisToujours pointéclassExemples
```
class Whatever {
someMethod = () => {
// Toujours pointéWhateverExemples
console.log(this);
};
}
Copier le Code
```
En général, Si la fonction flèche est utilisée ,En fonctionthis En gros, ça pointe vers l'extérieur this

new:Équivalent àObject.create(Whatever.prototype)

bind：this La direction ne sera pas modifiée

const BoundMyClass = MyClass.bind({foo: 'bar'});
new BoundMyClass();
Copier le Code

Comme les autres Object Propriété de new：this La direction ne sera pas modifiée

const obj = {MyClass};
// Logs `true` - parent object is ignored:
new obj.MyClass();
Copier le Code

Utilisercall apply bind
- call applyVous pouvez spécifier unthis Valeurs et un ou plusieurs arguments donnés individuellement pour appeler une fonction
- bind Crée une nouvelle fonction ,Cette nouvelle fonctionthisEst spécifié

Article de référence： what is this