Ich hatte in JavaScript immer ein plausibles Gefühl dafür. Heute fühlte ich mich plötzlich erleuchtet. Ich werde es hier aufnehmen.
Schauen wir uns zuerst eine Kastanie an:
<! DocType html> <html> <head> <meta charset = "utf-8"> <title> Verwendet dieses </title> <script type = "text/javaScript"> var co, Tesla; car = function () {this.start = function () {console.log ('car gestartet') | carkey = document.getElementById ('car_key'); carkey.onclick = function () {this.start (); };} return this;} Tesla = New Car (); Tesla.Turnkye (); </script> </head> <body> <Eingabe type = "button" id = "car_key" value = "test"/> </body> </html>Auf den ersten Blick gibt es kein Problem mit diesem Code, aber das falsche Verständnis davon führt letztendlich zum falschen Ergebnis. Wir binden das Klickereignis in das Element car_key und glauben, dass das Verschachteln des Bindungsklickereignisses in der Autoklasse es diesem DOM -Element ermöglichen kann, auf den Kontext des Autos zuzugreifen. Diese Methode scheint vernünftig, aber leider funktioniert sie nicht.
In JavaScript weist dieses Schlüsselwort immer auf den Eigentümer des ausführenden Bereichs hin.
Bitte verstehen Sie den obigen Satz sorgfältig. Wie wir wissen, erzeugen Funktionsaufrufe einen neuen Bereich, und ein kleines Onclick -Ereignis wird ausgelöst, und dies weist auf das DOM -Element anstelle der Autoklasse hin.
Wie machen wir es also, damit es richtig funktioniert? Wir weisen dies in der Regel einer lokalen freien Variablen (wie diese, dieses, selbst, ich usw. zu, die sich in vielen Frameworks widerspiegeln), um die durch den Umfang verursachten Probleme zu vermeiden. Hier verwenden wir lokale Variablen, um die vorherige Methode zu überschreiben:
<! DocType html> <html> <head> <meta charset = "utf-8"> <title> Verwendung dieses </title> </head> <body> <input type = "button" id = "car_key" value = "test"/> <Script = "text/javascript"> var car, tesla; gestartet ');}; this.Turnkye = function () {var that = this; var carkey = document.getElementById (' car_key '); carkey.onclick = function () {that.start (); };} return this;} Tesla = new Car (); Tesla.Turnkye (); </script> </body> </html>Da dies eine freie Variable ist, führt die Abreise des Onclick -Ereignisses nicht zu seiner Neudefinition.
Wenn Sie mit ES6 vertraut sind, können Sie das Fettpfeilsymbol verwenden, das einfacher und einfacher zu verstehen ist, wie folgt:
<! DocType html> <html> <head> <meta charset = "utf-8"> <title> Verwendung dieses </title> </head> <body> <input type = "button" id = "car_key" value = "test"/> <Script = "text/javascript"> var car, tesla; gestartet ');}; this.Turnkye = function () {// var that = this; var carkey = document.getElementById (' car_key '); // carkey.onclick = function () {// that.start (); //};carkey.onclick=()=> This.start(); }return this;Natürlich können wir auch die Bindungsfunktionsmethode verwenden, um dieses Problem zu lösen: wie folgt
<! DocType html> <html> <head> <meta charset = "utf-8"> <title> Verwendung dieses </title> </head> <body> <input type = "button" id = "car_key" value = "test"/> <Script = "text/javascript"> var car, tesla; gestartet ');}; var click = function () {this.start (); } this.turnkye = function () {// var that = this; var carkey = document.getElementById ('car_key'); carkey.onclick = click.bind (this);} return this;Tatsächlich wusste ich nur, wie man diese Fallstricke schreibt, als ich Reacting lernte und als ich Ereignisse verbindete. Zu dieser Zeit wusste ich nur, wie man sie so schreibt, aber ich wusste nicht, was passiert ist. Heute fühlte ich mich plötzlich erleuchtet. Hoffe es wird für alle hilfreich sein.