J'ai toujours eu un sentiment plausible à ce sujet en JavaScript. Aujourd'hui, je me suis soudainement senti éclairé. Je vais l'enregistrer ici.
Regardons d'abord un châtaignier:
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <tigh carkey = document.getElementById ('car_key'); carkey.onclick = function () {this.start (); };} Renvoie ceci;} Tesla = new Car (); Tesla.turnkye (); </script> </ head> <body> <input type = "Button" id = "car_key" value = "test" /> </ body> </html>À première vue, il n'y a aucun problème avec ce code, mais la mauvaise compréhension de cela conduit finalement au mauvais résultat. Nous lions l'événement de clic sur l'élément car_key, et pensons que la nidification de l'événement de clic de liaison dans la classe de voiture peut permettre à cet élément DOM d'accéder à ce contexte de la voiture. Cette méthode semble raisonnable, mais malheureusement, cela ne fonctionne pas.
Dans JavaScript, ce mot-clé pointe toujours le propriétaire de la portée exécutée.
Veuillez comprendre attentivement la phrase ci-dessus. Comme nous le savons, les appels de fonction produiront une nouvelle portée, et un petit événement OnClick est déclenché, et cela pointe vers l'élément DOM au lieu de la classe de voiture.
Alors, comment le faisons-nous pour que cela fonctionne correctement? Nous attribuons généralement cela à une variable libre locale (comme celle-ci, _Ce, soi, moi, etc., qui se reflètent dans de nombreux cadres) pour éviter les problèmes causés par la portée. Ici, nous utilisons des variables locales pour remplacer la méthode précédente:
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <itle> utilisation de cette </ title> </ head> <body> <entrée type = "Button" id = "car_key" value = "test" /> <script type = "text / javascript"> var car, tesla; car = function () {this.start = function () {œuvre. Démarré ');}; this.turnkye = function () {var that = this; var carkey = document.getElementyid (' car_key '); carkey.onclick = function () {that.start (); };} Renvoie ceci;} Tesla = new Car (); Tesla.turnkye (); </cript> </body> </html>Puisqu'il s'agit d'une variable gratuite, le départ de l'événement OnClick ne provoque pas sa redéfinition.
Si vous connaissez ES6, vous pouvez utiliser le symbole de flèche gras, qui est plus simple et plus facile à comprendre, comme suit:
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <itle> utilisation de cette </ title> </ head> <body> <entrée type = "Button" id = "car_key" value = "test" /> <script type = "text / javascript"> var car, tesla; car = function () {this.start = function () {œuvre. Démarré ');}; this.turnkye = function () {// var that = this; var carkey = document.getElementByid (' car_key '); // carkey.onclick = function () {// that.start (); // };carkey.onclick=()=> This.start(); }return this;} Tesla = new Car (); Tesla.turnkye (); </cript> </ody> </html>Bien sûr, nous pouvons également utiliser la méthode de la fonction de liaison pour résoudre ce problème: comme suit
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <itle> utilisation de cette </ title> </ head> <body> <entrée type = "Button" id = "car_key" value = "test" /> <script type = "text / javascript"> var car, tesla; car = function () {this.start = function () {œuvre. Démarré ');}; var click = function () {this.start (); } this.turnkye = function () {// var that = this; var carkey = document.getElementByid ('car_key'); carkey.onclick = click.bind (this);} renvoie ce;} Tesla = new Car (); Tesla.Turnkye (); </script> </ / body> </html>En fait, je ne savais pas comment écrire ces pièges quand j'apprenais réagir et quand je lisais des événements. À ce moment-là, je savais seulement les écrire comme ça, mais je ne savais pas ce qui s'était passé. Aujourd'hui, je me suis soudainement senti éclairé. J'espère que cela sera utile à tout le monde.