ฉันมีความรู้สึกที่น่าเชื่อถือเกี่ยวกับเรื่องนี้ใน 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 carkey = document.getElementById ('car_key'); carkey.onclick = function () {this.start (); };} ส่งคืนสิ่งนี้;} tesla = ใหม่ Car (); tesla.turnkye (); </script> </head> <body> <อินพุตประเภท = "ปุ่ม" id = "car_key" value = "test"/> </body> </html>เมื่อมองแวบแรกไม่มีปัญหากับรหัสนี้ แต่ความเข้าใจที่ผิดในที่สุดสิ่งนี้นำไปสู่ผลลัพธ์ที่ไม่ถูกต้อง เราเชื่อมโยงเหตุการณ์คลิกบนองค์ประกอบ car_key และเชื่อว่าการทำรังการคลิกที่มีผลผูกพันในคลาสรถสามารถอนุญาตให้องค์ประกอบ DOM นี้สามารถเข้าถึงบริบทของรถได้ วิธีนี้ดูสมเหตุสมผล แต่น่าเสียดายที่มันไม่ได้ผล
ใน JavaScript คำหลักนี้ชี้ไปที่เจ้าของขอบเขตที่ถูกดำเนินการเสมอ
โปรดเข้าใจประโยคข้างต้นอย่างระมัดระวัง อย่างที่เราทราบการโทรฟังก์ชั่นจะสร้างขอบเขตใหม่และเหตุการณ์ onclick เล็กน้อยจะถูกกระตุ้นและสิ่งนี้ชี้ไปที่องค์ประกอบ DOM แทนที่จะเป็นคลาสรถ
แล้วเราจะทำอย่างไรให้ทำงานได้อย่างถูกต้อง? เรามักจะกำหนดสิ่งนี้ให้กับตัวแปรฟรีในท้องถิ่น (เช่นนั้น _ นี่, ตัวเอง, ฉัน, ฯลฯ ซึ่งสะท้อนในหลาย ๆ กรอบ) เพื่อหลีกเลี่ยงปัญหาที่เกิดจากขอบเขต ที่นี่เราใช้ตัวแปรท้องถิ่นเพื่อแทนที่วิธีก่อนหน้า:
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> การใช้งานของ </title> นี้ </head> <body> <อินพุต type = "ปุ่ม" id = "car_key" value = "test"/> <script type = "text/javascript" เริ่มต้น ');}; this.turnkye = function () {var that = this; var carkey = document.getElementById (' car_key '); carkey.onclick = function () {that.start (); };} ส่งคืนสิ่งนี้;} tesla = ใหม่ Car (); tesla.turnkye (); </script> </body> </html>เนื่องจากเป็นตัวแปรฟรีการจากไปของเหตุการณ์ onclick ไม่ได้ทำให้เกิดนิยามใหม่
หากคุณคุ้นเคยกับ ES6 คุณสามารถใช้สัญลักษณ์ลูกศรไขมันซึ่งง่ายกว่าและเข้าใจง่ายกว่าดังนี้:
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> การใช้งานของ </title> นี้ </head> <body> <อินพุต type = "ปุ่ม" id = "car_key" value = "test"/> <script type = "text/javascript" เริ่มต้น ');}; this.turnkye = function () {// var that = this; var carkey = document.getElementById (' car_key '); // carkey.onclick = function () {// that.start (); //};carkey.onclick=()=> นี่คือจุดเริ่มต้น();} this;} tesla = รถใหม่ (); tesla.turnkye (); </script> </body> </html>แน่นอนเรายังสามารถใช้วิธีการทำงานที่มีผลผูกพันเพื่อแก้ปัญหานี้: ดังนี้
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> การใช้งานของ </title> นี้ </head> <body> <อินพุต type = "ปุ่ม" id = "car_key" value = "test"/> <script type = "text/javascript" เริ่มต้น ');}; var click = function () {this.start (); } this.turnkye = function () {// var that = this; var carkey = document.getElementById ('car_key'); carkey.onclick = คลิก.ในความเป็นจริงฉันรู้แค่ว่าจะเขียนข้อผิดพลาดเหล่านี้เมื่อฉันเรียนรู้ปฏิกิริยาตอบสนองและเมื่อฉันมีผลผูกพันกับเหตุการณ์ ในเวลานั้นฉันรู้วิธีเขียนแบบนี้ แต่ฉันไม่รู้ว่าเกิดอะไรขึ้น วันนี้ฉันรู้สึกรู้แจ้ง หวังว่ามันจะเป็นประโยชน์กับทุกคน