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

Comment le mot-clé "this" se comporte dans un littéral d'objet en JavaScript

En JavaScript, le mot-clé "this" fait référence à l'objet actuel sur lequel la fonction a été invoquée. Cependant, la liaison de "this" peut prêter à confusion, en particulier lorsqu'elle est utilisée dans des littéraux d'objet.

Dans un littéral d'objet, la valeur de "this" n'est pas liée à l'objet lui-même mais plutôt à l'objet global ( fenêtre dans les navigateurs). Cela peut conduire à un comportement inattendu, comme le montre le code suivant :

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

Dans cet exemple, "this.foo" n'est pas défini dans le constructeur de MyDate car "this" fait référence à l'objet global, qui n'a pas de propriété nommée "foo".

Pour résoudre ce problème, vous pouvez explicitement lier "this" dans le littéral d'objet à l'aide de bind() méthode :

var obj4 = {};
obj4.foo = new Date();
obj4.bar = new MyDate(obj4.foo.bind(obj4));

Cela garantit que "this" à l'intérieur du constructeur de MyDate fait référence à l'objet correct (obj4).

Vous pouvez également utiliser une fonction fléchée pour lier "this" à l'objet :

var obj3 = {
  foo: new Date(),
  bar: new MyDate(() => this.foo)
};

Dans les fonctions fléchées, "this" est lié à la portée environnante au moment de la définition, qui dans ce cas est l'objet lui-même.

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!