Comment le mot clé « this » se comporte-t-il dans les littéraux d'objet JavaScript ?

Comprendre le mot-clé « this » dans les littéraux d'objet JavaScript

Dans les littéraux d'objet en JavaScript, le comportement du mot-clé « this » peut être très différent à partir d’autres langages de programmation. Voici une explication complète de son fonctionnement.

Liaison au moment de l'appel

Contrairement à d'autres langages à liaison tardive, JavaScript lie "ceci" au moment de l'appel, pas pendant la compilation. temps ou durée d'exécution. Cela signifie que la valeur de "this" dépend de la façon dont la fonction est appelée.

Règles de liaison

Les règles de liaison pour "this" dans les littéraux d'objet JavaScript sont les suivantes suit :

1. Appels du constructeur : Lorsqu'une fonction est invoquée à l'aide du mot-clé "new", le mot-clé "this" se lie à l'objet nouvellement créé.
2. Méthodes d'objet : Lorsqu'il est appelé en tant que méthode objet, "this" se lie à l'objet auquel appartient la méthode, qui est l'objet avant le dernier point.
3. Portée globale : En dehors de toute fonction ou si une fonction est appelée sans aucun contexte d'objet, "this" se lie au global objet, la tendance est de créer une "fenêtre" dans le navigateur Web.
4. Gestionnaires d'événements : Dans les gestionnaires d'événements, "this" se lie généralement à l'élément DOM qui a déclenché l'événement.
5. Méthodes Call() et Apply() : Les méthodes "call()" et "apply()" peuvent être utilisées pour attribuer explicitement "this" à n'importe quel objet, permettant à un objet d'accéder aux méthodes d'un autre.
6. Function.bind() : La méthode "Function.bind()" peut également être utilisée pour lier explicitement "this " à un objet spécifique, créant une nouvelle instance de fonction avec la liaison souhaitée.

Exemple d'utilisation Cas

Pour illustrer les différentes règles de liaison :

const obj = {
  foo: "Foo",
  bar() {
    console.log(this.foo); // "Foo" - "this" refers to the object
  },
};

obj.bar(); // Calls the method, binding "this" to the object

function MyDate(date) {
  this.date = date;
}

const obj1 = {
  foo: new Date(),
  bar: new MyDate(this.foo), // Error: this.foo is undefined
};

const obj2 = {
  foo: new Date(),
  bar: new MyDate(obj2.foo), // Works: "this" refers to obj2
};

Dans le premier exemple, "this" fait référence à l'objet "obj" car la méthode est appelée comme une méthode objet. Dans le deuxième exemple, "this" n'est pas défini dans "obj1" car la fonction est appelée sans aucun contexte d'objet. Dans "obj2", "this" fait référence à "obj2" car la fonction est explicitement appelée avec l'objet "this".

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!