У меня всегда было правдоподобное чувство об этом в JavaScript. Сегодня я внезапно почувствовал просвещенную. Я запишу его здесь.
Сначала посмотрим на каштан:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> с использованием этого </title> <script type = "text/javascript"> var car, tesla; car = function () {this.start = function () {console.log ('car запустил'); carkey = document.getElementbyId ('car_key'); carkey.onclick = function () {this.start (); };} вернуть это;} tesla = new Car (); tesla.turnkye (); </script> </head> <body> <input type = "button" id = "car_key" value = "test"/> </body> </html>На первый взгляд, нет проблем с этим кодом, но неправильное понимание этого в конечном итоге приводит к неправильному результату. Мы связываем событие CLICK на элементе CAR_KEY и считаем, что гнездование события привязки Click в классе CAR может позволить этому элементу DOM получить доступ к этому контексту автомобиля. Этот метод кажется разумным, но, к сожалению, он не работает.
В JavaScript это ключевое слово всегда указывает на владельца выполняемого владельца.
Пожалуйста, внимательно поймите вышеуказанное предложение. Как мы знаем, функциональные вызовы будут создавать новую область, и запускается небольшое событие OnClick, и это указывает на элемент DOM вместо класса автомобилей.
Итак, как мы делаем это, чтобы заставить его работать правильно? Обычно мы назначаем это локальной свободной переменной (например, _this, я, я и т. Д., Которые отражаются во многих структурах), чтобы избежать проблем, вызванных масштабами. Здесь мы используем локальные переменные для переопределения предыдущего метода:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> Использование этого </title> </head> <body> <input type = "button" id = "car_key" value = "test"/> <script type = "text/javascript"> var, tesla; {this.Start = function () {console.log ('CAR запустил');}; this.turnkye = function () {var that = this; var carkey = document.getElementbyId ('car_key'); carkey.onclick = function () {this.start (); };} вернуть это;} tesla = new Car (); tesla.turnkye (); </script> </body> </html>Поскольку это свободная переменная, отъезд события OnClick не вызывает его переопределения.
Если вы знакомы с ES6, вы можете использовать символ со стрелкой жира, который проще и проще для понимания следующим образом:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> Использование этого </title> </head> <body> <input type = "button" id = "car_key" value = "test"/> <script type = "text/javascript"> var, tesla; {this.Start = function () {console.log ('CAR запустил');}; this.turnkye = function () {// var that = this; var carkey = document.getElementbyId ('car_key'); // carkey.onclick = function () {// that.start (); // );carkey.onclick=()=> ЭтоКонечно, мы также можем использовать метод функции привязки для решения этой проблемы: следующим образом
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> Использование этого </title> </head> <body> <input type = "button" id = "car_key" value = "test"/> <script type = "text/javascript"> var, tesla; {this.Start = function () {console.log ('CAR запустил');}; var click = function () {this.start (); } this.turnkye = function () {// var that = this; var carkey = document.getElementbyid ('car_key'); carkey.onclick = click.bind (this);} вернуть это;} tesla = new Car (); tesla.turnky (); </script> </body> </html>;На самом деле, я знал, как написать эти ловушки, когда я учился реагировать и когда я был обязательным событиями. В то время я только знал, как писать их так, но я не знал, что случилось. Сегодня я внезапно почувствовал просвещенную. Надеюсь, это будет полезно для всех.