Comment le modèle d'invocation affecte-t-il le mot-clé « this » en JavaScript ?

Comment les modèles d'appel affectent le mot clé « this » en JavaScript

Lorsque vous travaillez avec JavaScript, vous pouvez rencontrer un comportement inhabituel lié au « this » " mot-clé dans les définitions de fonctions. Cet article explore les subtilités de la façon dont le modèle d'invocation influence la valeur de « this » et fournit une compréhension complète de son comportement.

Avant d'approfondir, il est crucial de clarifier que JavaScript n'a pas de classes comme les classes traditionnelles. langages orientés objet. Au lieu de cela, il s'appuie sur des objets et des fonctions, les classes étant un sucre syntaxique. Cette compréhension constitue la base de l'interprétation du comportement de « ceci ».

Modèles d'invocation et « ceci »

La valeur de « ceci » dépend de la manière dont une fonction est invoquée, qui est appelé modèle d’invocation. Il existe quatre modèles principaux :

1. En tant que méthode :

Lorsqu'une fonction est invoquée en tant que méthode d'un objet, "this" est lié à l'objet lui-même.

Exemple :

// foo is the object
foo.bar = function() { alert(this); };
// "this" is bound to the foo object
foo.bar();

2. En tant que fonction :

S'il est invoqué en tant que fonction autonome, "this" est lié à l'objet global, généralement l'objet "window" dans un navigateur.

Exemple :

// Global function
var baz = function() { alert(this); };
// "this" is bound to the window object
baz();

3. En tant que constructeur :

Invoqué à l'aide du mot-clé "new", "this" est lié à un objet nouvellement créé. Cela imite un comportement de classe.

Exemple :

// Constructor function
function MyClass() { this.property = 'value'; }
// "this" is bound to the new instance
var instance = new MyClass();

4. Utilisation de la méthode Apply :

La méthode "apply" des fonctions vous permet de définir explicitement la valeur de "this" avec les arguments.

Exemple :

var args = [1, 2];
var obj = { prop: 'value' };
// "this" is bound to the obj object, and args is passed as the arguments
fun.apply(obj, args);

Considération de comportement inattendu :

Si intérieur les fonctions utilisées comme rappels sont invoquées avec des modèles qui diffèrent de leur définition, des incohérences dans « ce » comportement peuvent survenir. Ceci est souvent rencontré lors de la définition de méthodes utilisant une notation littérale objet, où les fonctions internes invoquent des rappels en tant que fonctions, ce qui entraîne une liaison « this » à l'objet global au lieu de l'objet prévu.

Pour résoudre ce problème, le Le modèle "var that = this" est largement utilisé. En stockant une référence à "this" dans une fermeture, les invocations de fonctions internes ultérieures peuvent toujours accéder à la valeur prévue de "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!