Annuaire d'articles
à quoi cela indique-t-il
Le mot-clé this en JavaScript est utilisé pour faire référence à l'objet qui exécute actuellement du code. Son pointage est dynamique et évolue en fonction du contexte d'exécution.
Dans les cas courants, cela indique
- this dans la portée globale :
dans la portée globale, this pointe vers l'objet global, c'est-à-dire qu'il pointe vers l'objet window dans l'environnement du navigateur et pointe vers l'objet global dans l'environnement Node.js.
console.log(this); // affiche l'objet window dans l'environnement du navigateur et affiche l'objet global dans l'environnement Node.js
- this dans une fonction :
dans une fonction, ce que cela pointe dépend de la manière dont la fonction est appelée. Voici quelques situations courantes :
- La fonction est appelée en fonction normale :
lorsque la fonction est appelée en fonction normale, cela pointe vers l'objet global (non défini en mode strict).
function myFunction() {
console.log(this);
}
myFunction(); // 在浏览器环境中输出 window 对象，在 Node.js 环境中输出 undefined（在严格模式下）
- Une fonction est invoquée comme méthode d'un objet :
Lorsqu'une fonction est invoquée comme méthode d'un objet, cela pointe vers l'objet sur lequel la méthode a été invoquée.
const obj = {
name: 'John',
sayHello: function() {
console.log(`Hello, ${
this.name}!`);
}
};
obj.sayHello(); // 输出 "Hello, John!"
- La fonction est appelée en tant que constructeur :
lorsqu'une fonction est appelée en tant que constructeur à l'aide du mot-clé new, cela pointe vers l'objet instance nouvellement créé.
function Person(name) {
this.name = name;
}
const john = new Person('John');
console.log(john.name); // 输出 "John"
- Les fonctions sont invoquées à l'aide des méthodes call, apply ou bind :
Les méthodes call, apply ou bind vous permettent de spécifier explicitement l'objet de contexte pour l'appel de fonction.
function sayHello() {
console.log(`Hello, ${
this.name}!`);
}
const obj1 = {
name: 'John' };
const obj2 = {
name: 'Jane' };
sayHello.call(obj1); // 输出 "Hello, John!"
sayHello.apply(obj2); // 输出 "Hello, Jane!"
const boundFunction = sayHello.bind(obj1);
boundFunction(); // 输出 "Hello, John!"
- this dans une fonction flèche :
le this d'une fonction flèche n'est lié à aucun objet spécifique, mais est hérité de la portée externe. Il capture le contexte dans lequel la fonction a été définie et persiste tout au long de la durée de vie de la fonction flèche.
const obj = {
name: 'John',
sayHello: () => {
console.log(`Hello, ${
this.name}!`);
}
};
obj.sayHello(); // 输出 "Hello, undefined!"，因为箭头函数的 this 继承自外部作用域，此处的 this 指向全局对象
Comment modifier la direction de ceci
- Utilisez la méthode call() :
La méthode call() vous permet d'appeler explicitement la fonction, de spécifier l'objet contextuel (c'est-à-dire sa valeur) et de transmettre des paramètres lorsque la fonction est exécutée.
function sayHello() {
console.log(`Hello, ${
this.name}!`);
}
const obj = {
name: 'John' };
sayHello.call(obj); // 输出 "Hello, John!"
- Utilisation de la méthode apply() :
La méthode apply() est similaire à la méthode call() sauf que les paramètres sont passés. La méthode apply() accepte un tableau contenant des paramètres.
function sayHello(greeting) {
console.log(`${
greeting}, ${
this.name}!`);
}
const obj = {
name: 'John' };
sayHello.apply(obj, ['Hello']); // 输出 "Hello, John!"
- Utilisation de la méthode bind() :
La méthode bind() crée une nouvelle fonction dont cette valeur est liée à l'objet spécifié. Au lieu d'exécuter la fonction immédiatement, il renvoie une fonction liée à la nouvelle valeur this.
function sayHello() {
console.log(`Hello, ${
this.name}!`);
}
const obj = {
name: 'John' };
const boundFunction = sayHello.bind(obj);
boundFunction(); // 输出 "Hello, John!"
- Utilisation des fonctions fléchées :
la valeur this d'une fonction fléchée est héritée de la portée externe, elle ne peut donc pas être modifiée par la méthode ci-dessus. Le this d'une fonction fléchée pointe toujours vers le contexte dans lequel elle a été définie.
const obj = {
name: 'John',
sayHello: function() {
const arrowFunction = () => {
console.log(`Hello, ${
this.name}!`);
};
arrowFunction(); // 输出 "Hello, John!"
}
};
obj.sayHello();
Ces méthodes peuvent vous aider à modifier ce vers quoi cela pointe en JavaScript. Selon différents scénarios et exigences, choisissez une méthode appropriée pour modifier la valeur de celui-ci.