Aperçu conceptuel ceci
Lorsqu'une fonction est créée, un mot-clé est créé (en arrière-plan), qui est lié à un objet, et la fonction fonctionne dans cet objet. En d'autres termes, le mot-clé peut être utilisé dans une fonction, une référence à un objet, et la fonction est la propriété ou la méthode de cet objet.
Regardons cet objet:
<! Doctype html> <html lang = "en"> <body> <cript> var code = {Living: true, Âge: 23, genre: 'mâle', getgender: function () {return Cody.gender;}}; Console.log (Cody.GetGender ()); // Logs 'mâle' </ script> </ body> </html>Notez que dans la fonction Getgender, car à l'intérieur de l'objet Cody, nous pouvons obtenir l'attribut de genre (c'est-à-dire Cody.Nender) à travers. Vous pouvez également l'utiliser pour obtenir l'objet Cody, car cela pointe vers l'objet Cody.
<! Doctype html> <html lang = "en"> <body> <script> var code = {Living: true, âge: 23, genre: 'mâle', getgender: function () {return this.gender;}}; Console.log (Cody.GetGender ()); // Logs 'mâle' </ script> </ body> </html>Dans This.Nender, cela pointe vers un objet Cody, et la fonction GetGender peut fonctionner sur un objet Cody.
Le sujet à ce sujet peut être un peu déroutant, mais cela ne doit pas l'être. N'oubliez pas que, généralement, l'objet qui pointe est l'objet qui contient la fonction, et non la fonction elle-même (bien sûr, il existe des exceptions, telles que l'utilisation des mots clés new ou call () et appliquer ()).
Conseils importants
- Le mot-clé C'est comme les autres variables, la seule différence est que vous ne pouvez pas le changer.
- Contrairement à d'autres paramètres et variables transmis à une fonction, il s'agit d'un mot-clé (pas d'une propriété) dans l'objet qui appelle la fonction.
Comment déterminer la valeur de cela?
Ceci est transmis à toutes les fonctions, et sa valeur dépend du moment où la fonction est appelée lorsqu'elle est exécutée. Veuillez noter ici, car c'est un endroit très spécial dont vous devez vous souvenir.
Dans le code suivant, l'objet MyObject a une propriété SayFoo, qui pointe vers la fonction saitfoo. Lorsque la fonction SayFoo est appelée dans le domaine global, cela pointe vers l'objet Window. Lorsque MyObject appelle une fonction, cela pointe vers MyObject.
Parce que MyObject a une propriété appelée FOO, elle est utilisée ici.
<! Doctype html> <html lang = "en"> <body> <cript> var foo = 'foo'; var myObject = {foo: 'je suis myObject.foo'}; var sayfoo = function () {console.log (this ['foo']); }; // Donnez à MyObject une propriété sayfoo et faites-le point de dire de la fonction SayFoo myObject.sayfoo = sayfoo; myObject.sayfoo (); // Logs 'Je suis myObject.foo' 12 SayFoo (); // Logs 'Foo' </cript> </ body> </html>Il est clair que la valeur de cela dépend du moment où la fonction est appelée. MyObject.Sayfoo et SayFoo pointent les deux vers la même fonction, mais le contexte de l'appel SayFoo () est différent, donc la valeur de ceci est différente. Vous trouverez ci-dessous un code similaire, l'objet de tête (fenêtre) est utilisé explicitement, en espérant que cela vous sera utile.
<! Doctype html> <html lang = "en"> <body> <cript> window.foo = 'foo'; window.myObject = {foo: 'je suis myObject.foo'}; window.sayfoo = function () {! console.log (this.foo); }; window.myObject.sayfoo = window.sayfoo; window.myObject.sayfoo (); window.sayfoo (); </cript> </ body> </html>Assurez-vous que lorsque vous avez plusieurs références pointant vers la même fonction, vous savez clairement que la valeur de ces changements en fonction du contexte de la fonction d'appel.
Conseils importants
- Toutes les variables et paramètres sauf cela appartiennent à la portée de la variable statique.
Cela pointe vers l'objet de tête dans la fonction intégrée
Vous vous demandez peut-être ce qui se passe lorsque vous utilisez cela dans une fonction intégrée dans une autre fonction. Malheureusement, dans ECMA 3, cela ne suit pas les règles, il ne pointe pas vers l'objet où appartient la fonction, mais à l'objet de tête (l'objet de fenêtre du navigateur).
Dans le code suivant, cela dans Func2 et Func3 ne pointe plus MyObject, mais plutôt l'objet de tête.
<! Doctype html> <html lang = "en"> <body> <cript> var myObject = {func1: function () {console.log (this); // logs myObject varfunc2 = function () {console.log (this); // Logs Window, et le fera à partir de ce point sur varfunc3 = function () {console.log (this); // Fenêtre de journaux, car c'est l'objet de tête} (); } (); }}; myObject.func1 (); </cript> </ body> </html>Cependant, dans ECMAScript 5, ce problème sera corrigé. Vous devez maintenant être conscient de ce problème, surtout lorsque vous passez la valeur d'une fonction à une autre.
Regardez le code ci-dessous, passez une fonction anonyme à foo.func1. Lorsqu'une fonction anonyme est appelée dans foo.func1 (la fonction est imbriquée dans une autre fonction), cela pointera vers l'objet de tête dans la fonction anonyme.
<! Doctype html> <html lang = "en"> <body> <cript> var foo = {func1: function (bar) {bar (); // Logs Window, pas foo console.log (this); // Le mot clé ici sera une référence à l'objet foo}}; foo.func1 (function () {console.log (this)}); </cript> </ body> </html>Maintenant, vous n'oublierez pas que si la fonction contenant cela est dans une autre fonction ou est appelée par une autre fonction, la valeur de celle-ci pointera vers l'objet de tête (encore une fois, cela sera corrigé dans ECMAScript 5.)
Résoudre le problème des fonctions imbriquées
Afin d'éviter que cela soit perdu, vous pouvez utiliser une chaîne de portée dans la fonction parent pour enregistrer des références à cela. Dans le code suivant, en utilisant une variable appelée cela, en utilisant sa portée, nous pouvons mieux enregistrer le contexte de la fonction.
<! Doctype html> <html lang = "en"> <body> <cript> var myObject = {myProperty: 'icanseehelight', myMethod: function () {var that = this; // Stockez une référence à ceci (iEmyObject) dans MyMethod Scope VarhelperFunction Function () {// ChildFunction Var HelperFunction Function () {// ChildFunction // Logs 'Je peux voir la chaîne Light' via Scope car c'est-à-dire que = cette console.log (that.myproperty); // Logs 'Je peux voir la lumière' Console.log (this); // Logs Window Object, si nous n'utilisons pas "that"} (); }} myObject.MyMethod (); // Invoque MyMethod </Script> </ body> </html>Contrôler la valeur de ce
La valeur de cela dépend généralement du contexte dans lequel la fonction est appelée (sauf si le mot-clé nouveau est utilisé, qui sera introduit plus loin), mais vous pouvez utiliser appliquer () ou appeler () pour spécifier l'objet que cela pointe lorsqu'une fonction est déclenchée pour modifier / contrôler la valeur de cela. Utiliser ces deux méthodes, c'est comme redire: "Hé, appelez la fonction X, mais laissez l'objet Z faire cette valeur." Ce faisant, la valeur par défaut de ce javascript sera modifiée.
Ci-dessous, nous créons un objet et une fonction, puis nous déclenchons la fonction via Call (), donc ceci dans la fonction pointe vers myojbect. Cette fonction dans MyFunction fonctionne sur MyObject au lieu de l'objet de tête, nous modifions donc l'objet pointé par cela dans MyFunction.
<! Doctype html> <html lang = "en"> <body> <cript> var myObject = {}; var myFunction = function (param1, param2) {// setViacall () 'this'point à mon objet lorsque la fonction est invoquée this.foo = param1; this.bar = param2; console.log (ceci); // logs objet {foo = 'foo', bar = 'bar'}}; MyFunction.Call (MyObject, 'Foo', 'Bar'); // Invoquez la fonction, définissez cette valeur sur MyObject Console.log (myObject) // Logs Object {foo = 'foo', bar = 'BAR'} </cript> </ body> </html>Dans l'exemple ci-dessus, nous avons utilisé Call (), appliquer () peut également être appliqué à la même utilisation. La différence entre les deux est la façon dont les paramètres sont transmis à la fonction. Utilisez Call (), les paramètres sont séparés par des virgules et appliquent () et les paramètres sont passés dans un tableau. Ce qui suit est le même code, mais utilisez Apply ().
<! Doctype html> <html lang = "en"> <body> <cript> var myObject = {}; var myFunction = function (param1, param2) {// set via application (), cela pointe vers mon objet lorsque la fonction est invoquée this.foo = param1; this.bar = param2; console.log (ceci); // logs objet {foo = 'foo', bar = 'bar'}}; myFunction.Apply (myObject, ['foo', 'bar']); // Invoquez la fonction, définissez cette valeur console.log (myObject); // Logs Object {foo = 'foo', bar = 'bar'} </cript> </ body> </html>Utilisez-le dans un constructeur personnalisé
Lorsque la fonction est déclenchée avec le mot-clé nouveau, la valeur de ceci est déclarée dans le constructeur pour pointer vers l'instance elle-même. En d'autres termes: dans le constructeur, nous pouvons l'utiliser pour spécifier l'objet avant sa création. Cela semble modifier cette valeur pour appeler () ou appliquer ().
Ci-dessous, nous construisons une personne constructeur, qui pointe vers l'objet créé. Lorsque l'objet de la personne est créé, cela pointe vers cet objet et met le nom de propriété dans l'objet, et la valeur est la valeur du paramètre (nom) transmise à ce constructeur.
<! Doctype html> <html lang = "en"> <body> <cript> var person = function (name) {this.name = name || «Johndoe»; // Ceci fera référence à l'instant créé} var code = new personne ('Cody Lindley'); // Créer une instance, basée sur Person Constructor Console.log (Cody.name); // Logs 'Cody Lindley' </cript> </ body> </html>De cette façon, lorsque le constructeur est déclenché avec le mot-clé nouveau, cela pointe vers "l'objet à créer". Ensuite, si nous n'utilisons pas le mot-clé nouveau, la valeur de cela indiquera le contexte qui déclenche la personne - c'est l'objet de tête. Jetons un coup d'œil au code ci-dessous.
<! Doctype html> <html lang = "en"> <body> <cript> var person = function (name) {this.name = name || 'johndoe'; } var code = personne ('Cody Lindley'); // remarque que nous n'avons pas utilisé «New» Console.log (Cody.name); // Undefined, la valeur est en fait définie sur window.name console.log (window.name); // Logs 'Cody Lindley' </cript> </ body> </html>Cela pointe vers l'instance du constructeur dans la méthode du prototype
Lorsqu'une méthode est utilisée comme propriété prototype d'un constructeur, celle-ci dans cette méthode pointe une instance de la méthode de déclenchement. Ici, nous avons un constructeur de personne (), qui nécessite le nom complet de la personne. Afin d'obtenir le nom complet, nous ajoutons une méthode whatismyfullName à Person.prototype, et toutes les instances de personne héritent de cette méthode. Ceci dans cette méthode indique l'instance (et ses propriétés) qui a déclenché cette méthode.
Ci-dessous, j'ai créé deux objets de personne (Cody et Lisa), et la méthode héritée de WhatismyfullName contient ce point vers cette instance.
<! Doctype html> <html lang = "en"> <body> <cript> var person = function (x) {if (x) {this.fullName = x}; }; Personne.prototype.whatismyfullName = function () {return this.fullName; // 'this' fait référence à l'instance créée à partir de personne ()} var code = new personne ('Cody Lindley'); var lisa = new personne ('Lisa Lindley'); // appelle la méthode héritée de WhatismyfullName, qui utilise ceci pour faire référence à l'instance console.log (Cody.WhatismyfullName (), Lisa.WhatismyfullName ()); / * La chaîne prototype est toujours en vigueur, donc si l'instance n'a pas de propriété FullName, elle le recherchera dans la chaîne prototype. Ci-dessous, nous ajoutons une propriété FullName au prototype de personne et au prototype d'objet. Voir les notes. * / Object.prototype.fullname = 'John Doe'; var John = new Person (); // Aucun argument n'est passé, donc FullName n'est pas ajouté à l'instance Console.log (John.WhatismyfullName ()); // JOGS 'John Doe' </cript> </ body> </html>Utilisez-le dans la méthode à l'intérieur de l'objet Prototype, ce qui pointe vers l'instance. Si l'instance ne contient pas d'attributs, la recherche de prototype commence.
indice
- Si l'objet indiqué à cela ne contient pas les attributs que vous souhaitez trouver, alors la loi qui s'applique aux attributs est également applicable ici, c'est-à-dire que les attributs seront "recherchés" le long de la chaîne prototype. Ainsi, dans notre exemple, si l'instance ne contient pas la propriété FullName, le nom complet recherchera personne.prototype.fullname, puis object.prototype.fullname.
Pour afficher plus de syntaxe JavaScript, vous pouvez suivre: "JavaScript Reference Tutorial" et "JavaScript Code Style Guide". J'espère également que tout le monde soutiendra davantage Wulin.com.