Comment fonctionne le mot clé “this” travail au sein d'une fonction?
Je viens de tomber sur une situation intéressante en JavaScript. J'ai une classe avec une méthode qui définit plusieurs objets à l'aide de l'objet littéral de la notation. À l'intérieur de ces objets, la this
pointeur est utilisé. À partir du comportement du programme, j'ai déduit que le this
pointeur est en se référant à la classe pour laquelle la méthode a été appelée, et non pas de l'objet en cours de création par le littéral.
Cela semble arbitraire, mais c'est la façon dont je voudrais espérer qu'il fonctionne. Est-ce comportement défini? Est-il de la croix-navigateur sécuritaire? Est-il un raisonnement sous-jacent à raison, c'est la façon dont il est au-delà de "la spec dit" (par exemple, est-ce une conséquence de quelques larges décision de conception/philosophie)? Épurée exemple de code:
//inside class definition, itself an object literal, we have this function:
onRender: function() {
this.menuItems = this.menuItems.concat([
{
text: 'Group by Module',
rptletdiv: this
},
{
text: 'Group by Status',
rptletdiv: this
}]);
//etc
}
var signup = { onLoadHandler:function(){ console.log(this); return Type.createDelegate(this,this._onLoad); }, _onLoad: function (s, a) { console.log("this",this); }};
voir aussi Comment le mot clé “this” en Javascript loi sur l'intérieur d'un objet littéral?
découvrez ce post. A une bonne explication de l'utilisation différents et des comportements de ce mot-clé.
checkout ce lien scotch.io/@alZami/understanding-this-in-javascript
OriginalL'auteur rmeador | 2008-09-25
Vous devez vous connecter pour publier un commentaire.
Récupérés à partir d'un autre poste de la mine, voici plus que vous avez toujours voulu savoir sur ce.
Avant de commencer, voici la chose la plus importante à garder à l'esprit à propos de Javascript et de répéter à vous-même quand il ne fait pas de sens. Javascript n'ayant pas de classes (ES6
class
est sucre syntaxique). Si quelque chose ressemble à une classe, c'est une astuce. Javascript a objets et fonctions. (ce n'est pas précis à 100%, les fonctions sont seulement des objets, mais il peut parfois être utile de penser à eux comme à des choses distinctes)La ce variable est attaché à des fonctions. Chaque fois que vous appelez une fonction, ce est donné une certaine valeur, en fonction de comment vous appelez la fonction. Ceci est souvent appelé l'invocation modèle.
Il y a quatre façons d'appeler des fonctions en javascript. Vous pouvez appeler la fonction comme un méthode, comme un fonction, comme un constructeur, et avec appliquer.
Comme une Méthode
Une méthode est une fonction qui est attachée à un objet
Lorsqu'il est invoqué en tant que méthode, ce sera lié à l'objet de la fonction/méthode est une méthode de. Dans cet exemple, ce sera lié à toto.
En Fonction
Si vous avez un stand alone de fonction, le ce variable est lié à la "global" de l'objet, presque toujours le fenêtre objet dans le contexte d'un navigateur.
Ce peut-être ce qui est le déclenchement de vous, mais ne se sentent pas mauvais. Beaucoup de gens considèrent que cela est une mauvaise décision de conception. Depuis un callback est appelée comme une fonction et non pas comme une méthode, c'est pourquoi on voit ce qui semble être un comportement incohérent.
Beaucoup de gens contourner le problème en faisant quelque chose comme, euh, ce
Vous définissez une variable que qui points à ce. Fermeture (un sujet tout propre) garde que autour, donc si vous appelez de la barre de rappel, il a encore une référence.
REMARQUE: Dans
use strict
mode si elle est utilisée comme fonction,this
n'est pas lié au niveau mondial. (Il estundefined
).Comme un Constructeur
Vous pouvez également appeler une fonction en tant que constructeur. Basé sur la convention de nommage que vous utilisez (TestObject) ce aussi peut-être ce que vous êtes en train de faire et c'est ce qui est le déclenchement de vous.
Vous appelez une fonction, comme un Constructeur avec le mot clé new.
Lorsqu'il est invoqué comme un constructeur, un nouvel Objet sera créé, et ce sera lié à cet objet. Encore une fois, si vous avez les fonctions internes et elles sont utilisées comme des rappels, vous serez en invoquant comme des fonctions, et ce sera lié à l'objet global. Utiliser var que = ce truc/motif.
Certaines personnes pensent que le constructeur/nouveau mot-clé d'un os jeté à Java/traditionnel de la programmation orientée objet programmeurs comme un moyen de créer quelque chose de semblable à des classes.
Avec la Méthode Appliquer
Enfin, chaque fonction a une méthode (oui, les fonctions sont des objets en Javascript) nommé "appliquer". Appliquer vous permet de déterminer quelle est la valeur de ce sera, et vous permet aussi de passer un tableau d'arguments. Voici un exemple inutile.
Remarque: Dans mode strict,
this
seraundefined
pour les appels de fonction.Une déclaration de fonction, par exemple. function myfunction () {}, est un cas particulier de la "méthode" où "cela" est la portée globale (fenêtre).
Sauf en mode strict, et
this
n'a rien à voir avec la portée. Tu veux dire que le mondial de l'objet.Dans le cas de "Comme un constructeur" est
this.confusing = 'hell yeah';
le même quevar confusing = 'hell yeah';
? Donc, à la fois permettramyObject.confusing
? Il serait bien, si non seulement de sorte que vous pouvez utiliserthis
pour créer des propriétés et d'autres variables pour le travail interne.OriginalL'auteur Alan Storm
Appels de fonction
Fonctions sont juste un type d'Objet.
Tous les objets de Fonction ont appel et appliquer méthodes d'exécuter la Fonction de l'objet qu'ils sont appelés sur.
Lorsqu'il est appelé, le premier argument de ces méthodes spécifie l'objet qui va être référencé par le
this
mot-clé lors de l'exécution de la Fonction - si c'estnull
ouundefined
, l'objet global,window
, est utilisé pourthis
.Ainsi, l'appel d'une Fonction...
...avec des parenthèses -
foo()
- est équivalent àfoo.call(undefined)
oufoo.apply(undefined)
, qui est efficacement le même quefoo.call(window)
oufoo.apply(window)
.Des arguments supplémentaires à
call
sont passés comme arguments à l'appel de la fonction, tandis qu'un seul argument supplémentaire pourapply
pouvez spécifier les arguments de l'appel de fonction dans un Tableau comme objet.Ainsi,
foo(1, 2, 3)
est équivalent àfoo.call(null, 1, 2, 3)
oufoo.apply(null, [1, 2, 3])
.Si une fonction est une propriété d'un objet...
...l'accès à une référence à la Fonction via l'objet et de l'appeler avec des parenthèses -
obj.foo()
- est équivalent àfoo.call(obj)
oufoo.apply(obj)
.Cependant, les fonctions de tenue comme des propriétés des objets ne sont pas "liés" à ces objets. Comme vous pouvez le voir dans la définition de
obj
ci-dessus, car les Fonctions sont juste un type d'Objet, ils peuvent être référencés (et peut donc être transmis par référence à un appel de Fonction ou retourné par référence à partir d'un appel de Fonction). Lorsqu'une référence à une Fonction est passé, aucune information supplémentaire sur l'endroit où elle a été adoptée de est effectué avec lui, c'est pourquoi les cas suivants:L'appel de notre Fonction de référence,
baz
, ne fournit pas de contexte pour l'appel, donc c'est effectivement la même quebaz.call(undefined)
, doncthis
finit référencementwindow
. Si nous voulonsbaz
à savoir qu'il appartient àobj
, nous avons besoin de quelque manière que des informations lorsquebaz
est appelé, qui est l'endroit où le premier argument decall
ouapply
et de fermetures entrent en jeu.Portée chaînes
Lorsqu'une Fonction est exécuté, il crée un nouveau champ d'application et a une référence à un cadre englobant. Lorsque la fonction anonyme est créé dans l'exemple ci-dessus, il a une référence vers la portée, il a été créé, qui est
bind
champ d'application. Ceci est connu comme une "fermeture".Lorsque vous tentez d'accéder à une variable du champ d'application de la chaîne d'" est parcouru de trouver une variable avec le nom donné - si le champ ne contient pas la variable, vous regardez à la prochaine portée dans la chaîne, et ainsi de suite jusqu'à ce que vous atteindre une portée globale. Lorsque la fonction anonyme est retourné et
bind
fini de s'exécuter, la fonction anonyme a encore une référence àbind
champ d'application, de sortebind
champ d'application de ne pas "s'en aller".Compte tenu de tous les ci-dessus, vous devriez maintenant être en mesure de comprendre comment étendue fonctionne dans l'exemple suivant, et pourquoi la technique pour le passage d'une fonction autour de "pré-lié" avec une valeur particulière de
this
il aura lorsqu'il est appelé travaux:OriginalL'auteur Jonny Buchanan
Oui. Et oui.
Le sens de
this
est assez simple à déduire:this
est utilisé à l'intérieur d'un constructeur de la fonction, et la fonction a été appelée avec lenew
mot-clé,this
fait référence à l'objet qui sera créé.this
continuera à dire l'objet même dans les méthodes publiques.this
est utilisé n'importe où ailleurs, y compris imbriquée protégé fonctions, il se réfère à la portée globale (qui, dans le cas du navigateur est l'objet de la fenêtre).Le deuxième cas est de toute évidence un défaut de conception, mais il est assez facile de le contourner en utilisant les fermetures.
OriginalL'auteur Rakesh Pai
Dans ce cas, l'intérieur
this
est lié à l'objet global, au lieu de lathis
variable de la fonction externe.C'est la façon dont le langage est conçu.
Voir "JavaScript: Les Bonnes Parties" par Douglas Crockford pour une bonne explication.
OriginalL'auteur Santiago Cepas
J'ai trouvé un bon tutoriel sur le ECMAScript ce
N'importe quel objet peut être utilisé comme valeur de contexte.
Cette fonctionnalité est très important, parce que contrairement aux variables, cette valeur ne jamais participe à l'identificateur de processus de résolution. I. e. lorsque vous accédez à ce dans un code, sa valeur est prise directement à partir du contexte d'exécution et sans l'étendue de la chaîne de recherche. La valeur de ce qui est déterminée une seule fois lors de la saisie du contexte.
Dans le contexte mondial, cette valeur est l'objet global lui-même (ce qui signifie que, cette valeur est égale à la variable d'objet)
Dans le cas d'une fonction d'un contexte, cette valeur à chaque appel de fonction peut être différente
Référence Javascript-le-cœur et Chapitre 3-ce
OriginalL'auteur Damodaran