Saya selalu memiliki perasaan yang masuk akal tentang ini di JavaScript. Hari ini saya tiba -tiba merasa tercerahkan. Saya akan merekamnya di sini.
Mari kita lihat chestnut terlebih dahulu:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> menggunakan ini </title> <script type = "text/javascript"> var car, tesla; car = function () {this.start = function () {console.log ('car start');} this.start = function () {console.log ('car start');} this.start = function = function () {console.log ('car start');} this. carkey = document.geteLementById ('car_key'); carkey.onClick = function () {this.start (); };} kembalikan ini;} tesla = mobil baru (); tesla.turnkye (); </script> </head> <body> <input type = "tombol" id = "car_key" value = "test"/> </body> </html>Sekilas, tidak ada masalah dengan kode ini, tetapi pemahaman yang salah tentang hal ini pada akhirnya mengarah pada hasil yang salah. Kami mengikat acara klik pada elemen car_key, dan percaya bahwa bersarang acara klik mengikat di kelas mobil dapat memungkinkan elemen DOM ini mengakses konteks mobil ini. Metode ini tampaknya masuk akal, tetapi sayangnya itu tidak berhasil.
Dalam JavaScript, kata kunci ini selalu menunjuk ke pemilik ruang lingkup yang dieksekusi.
Harap pahami kalimat di atas dengan cermat. Seperti yang kita ketahui, panggilan fungsi akan menghasilkan ruang lingkup baru, dan sedikit acara OnClick dipicu, dan ini menunjuk ke elemen DOM alih -alih kelas mobil.
Jadi, bagaimana kita melakukannya untuk membuatnya bekerja dengan baik? Kami biasanya menetapkan ini ke variabel bebas lokal (seperti itu, _This, diri, saya, dll., Yang tercermin dalam banyak kerangka kerja) untuk menghindari masalah yang disebabkan oleh ruang lingkup. Di sini kami menggunakan variabel lokal untuk mengganti metode sebelumnya:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <itement> penggunaan </iteme> </head> <tody> <input type = "tombol" id = "car_key" value = "test"/<script type = "text/javascript"> var car, tesla; function = function = ") {stript =" Text/JavaScript "> var car, tesla; function = function =") {stript =) {) {function =) {function = {function = "TEXT =" TEXT/JAVASCRIPT "> tes. dimulai ');}; this.turnkye = function () {var that = this; var carkey = document.geteLementById (' car_key '); carkey.onclick = function () {that.start (); };} kembalikan ini;} tesla = mobil baru (); tesla.turnkye (); </script> </body> </html>Karena itu adalah variabel gratis, kepergian acara OnClick tidak menyebabkan redefinisi.
Jika Anda terbiasa dengan ES6, Anda dapat menggunakan simbol panah lemak, yang lebih sederhana dan lebih mudah dipahami, sebagai berikut:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <itement> penggunaan </iteme> </head> <tody> <input type = "tombol" id = "car_key" value = "test"/<script type = "text/javascript"> var car, tesla; function = function = ") {stript =" Text/JavaScript "> var car, tesla; function = function =") {stript =) {) {function =) {function = {function = "TEXT =" TEXT/JAVASCRIPT "> tes. dimulai ');}; this.turnkye = function () {// var that = this; var carkey = document.geteLementById (' car_key '); // carkey.onClick = function () {// that.start (); //};carkey.onClick=()=> this.start(); rasanya ini;} tesla = mobil baru (); tesla.turnkye (); </script> </body> </html>Tentu saja, kita juga dapat menggunakan metode fungsi pengikat untuk menyelesaikan masalah ini: sebagai berikut
<! Doctype html> <html> <head> <meta charset = "utf-8"> <itement> penggunaan </iteme> </head> <tody> <input type = "tombol" id = "car_key" value = "test"/<script type = "text/javascript"> var car, tesla; function = function = ") {stript =" Text/JavaScript "> var car, tesla; function = function =") {stript =) {) {function =) {function = {function = "TEXT =" TEXT/JAVASCRIPT "> tes. dimulai ');}; var click = function () {this.start (); } this.turnkye = function () {// var that = this; var carkey = document.geteLementById ('car_key'); carkey.onClick = click.bind (this);} kembalikan ini;} tesla = body baru (); tesla.turnkye (); </script> </body> ht (); tesla.turnkye (); </script> </body>Bahkan, saya hanya tahu bagaimana menulis jebakan ini ketika saya belajar bereaksi dan ketika saya mengikat peristiwa. Pada saat itu, saya hanya tahu bagaimana menulisnya seperti ini, tetapi saya tidak tahu apa yang terjadi. Hari ini saya tiba -tiba merasa tercerahkan. Semoga ini akan membantu semua orang.