Konzeptioneller Überblick dies
Wenn eine Funktion erstellt wird, wird ein Schlüsselwort erstellt (im Hintergrund), das mit einem Objekt verknüpft ist und die Funktion in diesem Objekt funktioniert. Mit anderen Worten, das Schlüsselwort, das dies in einer Funktion verwendet werden kann, eine Referenz auf ein Objekt und die Funktion ist die Eigenschaft oder Methode dieses Objekts.
Schauen wir uns dieses Objekt an:
<! DocType html> <html Lang = "en"> <body> <script> var code = {Living: true, Alter: 23, Geschlecht: 'männlich', getGender: function () {return Cody.Gender;}}; console.log (cody.getGender ()); // Protokolle 'männlich' </script> </body> </html>Beachten Sie, dass wir in der Funktion getGerSper, da wir innerhalb des Cody -Objekts das Geschlechtsattribut (dh Cody.Geper) durchführen können. Sie können dies auch verwenden, um das Cody -Objekt zu erhalten, da dies auf das Cody -Objekt hinweist.
<! DocType html> <html lang = "en"> <body> <script> var code = {Living: true, Alter: 23, Geschlecht: 'männlich', getGender: function () {return this.Ger;}}}; console.log (cody.getGender ()); // Protokolle 'männlich' </script> </body> </html>In diesem Bereich kann dies auf ein Cody -Objekt verweisen, und die GetGender -Funktion kann auf einem Cody -Objekt arbeiten.
Das Thema darüber mag etwas verwirrend sein, muss es aber nicht sein. Denken Sie nur daran, dass das Objekt, auf das dies zeigt, das Objekt ist, das die Funktion enthält, nicht die Funktion selbst (natürlich gibt es Ausnahmen, z. B. die Verwendung der Schlüsselwörter neu oder call () und anwenden ()).
Wichtige Tipps
- Das Schlüsselwort Dies ist wie andere Variablen. Der einzige Unterschied besteht darin, dass Sie es nicht ändern können.
- Im Gegensatz zu anderen Parametern und Variablen, die an eine Funktion übergeben wurden, ist dies ein Schlüsselwort (keine Eigenschaft) in dem Objekt, das die Funktion aufruft.
Wie kann ich den Wert davon bestimmen?
Dies wird an alle Funktionen übergeben, und sein Wert hängt davon ab, wann die Funktion aufgerufen wird, wenn sie ausgeführt wird. Bitte beachten Sie hier, denn dies ist ein ganz besonderer Ort, an den Sie sich erinnern müssen.
Im folgenden Code verfügt das MyObject -Objekt über eine Eigenschaft, die auf die Funktion sagt. Wenn die Sayfoo -Funktion in der globalen Domäne aufgerufen wird, weist dies auf das Fensterobjekt hin. Wenn MyObject eine Funktion aufruft, verweist dies auf MyObject.
Da MyObject eine Eigenschaft namens Foo hat, wird sie hier verwendet.
<! DocType html> <html lang = "en"> <body> <cript> var foo = 'foo'; var myObject = {foo: 'Ich bin myObject.foo'}; var sayfoo = function () {console.log (this ['foo']); }; // Geben Sie MyObject eine Sayfoo -Eigenschaft an und lassen Sie es auf Sayfoo -Funktion myObject.sayfoo = sayfoo hinweisen; myObject.sayfoo (); // Protokolle 'Ich bin myObject.foo' 12 sayfoo (); // Protokolle 'foo' </script> </body> </html>Es ist klar, dass der Wert davon abhängt, wann die Funktion aufgerufen wird. myObject.sayfoo und sayfoo weisen beide auf dieselbe Funktion hin, aber der Kontext des Aufrufs von sayfoo () ist unterschiedlich, daher ist der Wert davon unterschiedlich. Unten ist ein ähnlicher Code, das Kopfobjekt (Fenster) wird explizit verwendet, in der Hoffnung, dass es Ihnen nützlich ist.
<! DocType html> <html Lang = "en"> <body> <Script> Fenster.foo = 'foo'; window.myObject = {foo: 'Ich bin myObject.foo'}; window.sayfoo = function () {! console.log (this.foo); }; window.myObject.sayfoo = window.sayfoo; window.myObject.sayfoo (); window.sayfoo (); </script> </body> </html>Stellen Sie sicher, dass Sie, wenn Sie mehrere Referenzen auf dieselbe Funktion haben, deutlich wissen, dass sich der Wert dieser Änderungen abhängig vom Kontext der Aufruffunktion ändert.
Wichtige Tipps
- Alle Variablen und Parameter außer diesem gehören zum statischen Variablenbereich.
Dies zeigt auf das Kopfobjekt innerhalb der eingebetteten Funktion
Sie fragen sich vielleicht, was passiert, wenn Sie dies in einer in einer anderen Funktion eingebetteten Funktion verwenden. Leider folgt dies in ECMA 3 nicht den Regeln, sondern zeigt nicht auf das Objekt, zu dem die Funktion gehört, sondern auf das Kopfobjekt (das Fensterobjekt des Browsers).
Im folgenden Code weist dies in Func2 und Func3 nicht mehr auf MyObject, sondern auf das Kopfobjekt.
<! DocType html> <html lang = "en"> <body> <script> var myObject = {func1: function () {console.log (this); // Protokolle myObject varfunc2 = function () {console.log (this); // protokolliert Fenster und wird dies ab diesem Zeitpunkt auf varfunc3 = function () {console.log (this); // protokolliert Fenster, da es das Kopfobjekt ist} (); } (); }}; myObject.func1 (); </script> </body> </html>In ECMascript 5 wird dieses Problem jedoch behoben. Jetzt sollten Sie sich dieses Problems bewusst sein, insbesondere wenn Sie den Wert einer Funktion an eine andere übergeben.
Schauen Sie sich den folgenden Code an und geben Sie eine anonyme Funktion an foo.func1 weiter. Wenn eine anonyme Funktion in foo.func1 aufgerufen wird (die Funktion ist in einer anderen Funktion verschachtelt), zeigt dies auf das Kopfobjekt in der anonymen Funktion.
<! DocType html> <html lang = "en"> <body> <script> var foo = {func1: function (bar) {bar (); // Protokolle Fenster, nicht foo console.log (this); // Das Schlüsselwort hier wird ein Verweis auf Foo -Objekt}} sein; foo.func1 (function () {console.log (this)}); </script> </body> </html>Jetzt werden Sie nicht vergessen, dass, wenn die Funktion, die dies enthält, in einer anderen Funktion oder von einer anderen Funktion aufgerufen wird, der Wert dieser Hinweise auf das Kopfobjekt verweist (dies wird erneut in ECMascript 5 korrigiert.)
Lösen Sie das Problem verschachtelter Funktionen
Um zu verhindern, dass dies verloren geht, können Sie in der übergeordneten Funktion eine Zielfernrohrkette verwenden, um Verweise darauf zu sparen. Im folgenden Code können wir den Funktionskontext besser speichern.
<! DocType html> <html lang = "en"> <body> <script> var myObject = {myProperty: 'icanseehelight', myMethod: function () {var that = this; // Speichern Sie einen Verweis auf diese (ieemyObject) in MyMethod Scope varhelperfunction function () {// Childfunction var helperfunction function () {// childfunction // logs 'Ich kann das Licht' über Scope -Kette sehen, weil this diese trole.log (that.myProperty); // Protokolle 'Ich kann die Lichtkonsole sehen. // protokolliert Fensterobjekt, wenn wir nicht "das"} () verwenden; }} myObject.mymethod (); // MyMethod </script> </body> </html> aufrufenSteuern Sie den Wert davon
Der Wert davon hängt normalerweise von dem Kontext ab, in dem die Funktion aufgerufen wird (es sei denn, das Schlüsselwort Neues wird verwendet, das später eingeführt wird). Sie können jedoch angewandt () oder call () angeben, auf das das Objekt angegeben wird, auf das darauf hingewiesen wird, wenn eine Funktion zum Ändern/Steuerung des Werts davon ausgelöst wird. Die Verwendung dieser beiden Methoden ist wie noch einmal zu sagen: "Hey, ruf die X -Funktion auf, aber lassen Sie das Z -Objekt diesen Wert machen." Der Standardwert dieses JavaScript wird geändert.
Im Folgenden erstellen wir ein Objekt und eine Funktion und lösen dann die Funktion durch call () aus, sodass dies in der Funktion auf myojbect zeigt. Dies in der MyFunction -Funktion arbeitet auf MyObject anstelle des Kopfobjekts, sodass wir das von diesem in Myfunktion angezeigte Objekt ändern.
<! DocType html> <html lang = "en"> <body> <script> var myObject = {}; var myfunction = function (param1, param2) {// setViacall () 'Dies ist zu meinem Objekt, wenn die Funktion aufgerufen wird.foo = param1; this.bar = param2; console.log (this); // Protokolle Objekt {foo = 'foo', bar = 'bar'}}; myfunction.call (myObject, 'foo', 'bar'); // Funktion aufrufen, diesen Wert auf myObject console.log (myObject) // logs Objekt {foo = 'foo', bar = 'bar'} </script> </body> </html> festlegenIm obigen Beispiel können wir CALL (), Apply () auch auf dieselbe Verwendung angewendet werden. Der Unterschied zwischen den beiden besteht darin, wie die Parameter an die Funktion übergeben werden. Verwenden Sie Call (), die Parameter werden durch Kommas getrennt und anwenden () und die Parameter werden in einem Array übergeben. Das Folgende ist der gleiche Code, verwenden jedoch Apply ().
<! DocType html> <html lang = "en"> <body> <script> var myObject = {}; var myfunction = function (param1, param2) {// über apply () festgelegt, weist dieses Objekt auf, wenn die Funktion aufgerufen wird.foo = param1; this.bar = param2; console.log (this); // Protokolle Objekt {foo = 'foo', bar = 'bar'}}; myfunction.apply (myObject, ['foo', 'bar']); // Aufrufen von Funktion, setzen Sie diese Wertkonsole.log (myObject); // Protokolle Objekt {foo = 'foo', bar = 'bar'} </script> </body> </html>Verwenden Sie dies in einem benutzerdefinierten Konstruktor
Wenn die Funktion mit dem Keyword neu ausgelöst wird, wird der Wert im Konstruktor erklärt, dass er auf die Instanz selbst verweist. Mit anderen Worten: Im Konstruktor können wir dies verwenden, um das Objekt anzugeben, bevor es tatsächlich erstellt wird. Dies scheint diesen Wert auf call () oder anwenden () zu ändern.
Im Folgenden erstellen wir eine Konstruktor -Person, die auf das erstellte Objekt hinweist. Wenn das Objekt einer Person erstellt wird, weist dies auf dieses Objekt hin und füllt den Eigenschaftsnamen in das Objekt, und der Wert ist der an diesen Konstruktor übergebene Parameterwert (Name).
<! DocType html> <html lang = "en"> <body> <script> var person = function (name) {this.name = name || 'Johndoe'; // Dies bezieht sich auf den sofortigen erstellten} var code = new Person ('Cody Lindley'); // Erstellen Sie eine Instanz, basierend auf Person Constructor Console.log (Cody.Name); // Protokolle 'Cody Lindley' </script> </body> </html>Wenn der Konstruktor mit dem Keyword neu ausgelöst wird, weist dies auf "zu erstellte Objekte" hin. Wenn wir dann nicht das Schlüsselwort neu verwenden, weist der Wert dieser diesen Kontext hin, der die Person auslöst - dies ist das Kopfobjekt. Schauen wir uns den Code unten an.
<! DocType html> <html lang = "en"> <body> <script> var person = function (name) {this.name = name || 'Johndoe'; } var code = Person ('Cody Lindley'); // Beachten Sie, dass wir keine 'neue' console.log (cody.name) verwendet haben; // undefiniert wird der Wert tatsächlich auf window.name console.log (window.name) festgelegt; // Protokolle 'Cody Lindley' </script> </body> </html>Dies zeigt auf die Konstruktorinstanz innerhalb der Prototypmethode
Wenn eine Methode als Prototyp -Eigenschaft eines Konstruktors verwendet wird, weist dies in dieser Methode auf eine Instanz der Triggermethode hin. Hier haben wir einen Person () Konstruktor, der den vollständigen Namen der Person erfordert. Um den vollständigen Namen zu erhalten, fügen wir der Person eine Methode der WhatiNRyfulLname hinzu. Diese Methode weist auf die Instanz (und ihre Eigenschaften) hin, die diese Methode ausgelöst haben.
Im Folgenden habe ich zwei Personenobjekte (Cody und Lisa) erstellt, und die ererbte WhatiNRyfulLname -Methode enthält diesen Punkt für diese Instanz.
<! DocType html> <html lang = "en"> <body> <script> var person = Funktion (x) {if (x) {this.fullname = x}; }; Person.Prototype.Whatismyfullname = function () {return this.fullname; // 'Dies' bezieht sich auf die Instanz, die von Person ()} var code = new Person ('Cody Lindley') erstellt wurde; var lisa = neue Person ('Lisa Lindley'); // nennen Sie die ererbte WhatiNRyFullname -Methode, die dies verwendet, um die Instanzkonsole zu beziehen. /* Die Prototyp -Kette ist noch in Kraft. Wenn die Instanz also keine FullName -Eigenschaft hat, wird sie in der Prototyp -Kette danach suchen. Im Folgenden fügen wir sowohl dem Personprototyp als auch dem Objektprototyp eine Vollname -Eigenschaft hinzu. Siehe Notizen. */Object.Prototype.fullname = 'John Doe'; var John = new Person (); // Es wird kein Argument verabschiedet, sodass Fullname nicht zu Instance console.log hinzugefügt wird (John.Whatismyfullname ()); // Protokolle 'John Doe' </script> </body> </html>Verwenden Sie dies in der Methode im Prototyp -Objekt, und dies zeigt auf die Instanz. Wenn die Instanz keine Attribute enthält, beginnt die Prototypsuche.
Hinweis
- Wenn das Objekt darauf hinweist, enthält nicht die Attribute, die Sie finden möchten, das Gesetz, das für alle Attribute gilt, auch hier anwendbar, dh die Attribute werden entlang der Prototypkette "durchsucht". Wenn die Instanz in unserem Beispiel nicht die FullName -Eigenschaft enthält, sucht der Fullname nach Person.Prototype.fullname und dann Object.Prototype.fullname.
Um mehr JavaScript -Syntax anzuzeigen, können Sie folgen: "JavaScript Reference Tutorial" und "JavaScript Code Style Guide". Ich hoffe auch, dass jeder wulin.com mehr unterstützt.