คีย์เวิร์ดนี้ใน JavaScript

thisคีย์เวิร์ดเป็นหนึ่งในแนวคิดที่เข้าใจผิดและซับซ้อนที่สุดของ JavaScript ฉันใช้เวลาหลายปีในการทำงานกับ JavaScript และบางครั้งสถานการณ์ดังกล่าวก็ทำให้เข้าใจได้ยากว่าthisหมายถึงอะไร

ในบทความนี้ ฉันจะพยายามอธิบายให้มากที่สุดเท่าสถานการณ์ที่ฉันเจอซึ่งใช้นามสกุลthis. และอาจเป็นหนึ่งในสถานการณ์ที่อาจช่วยให้คุณเข้าใจแนวคิดthisได้ชัดเจนยิ่งขึ้น

ก่อนอื่นเรามาดูกันว่าthisหมายถึงอะไร? 🤔

ลักษณะนี้เป็นของไหล ค่าของthisการเปลี่ยนแปลงขึ้นอยู่กับcontextที่methodID calledเป็น thisหมายถึงบริบทที่ถูกเรียก

ให้เข้าใจสิ่งนี้โดยตัวอย่าง:

ในโค้ดด้านบนนี้ เราใช้thisที่ต่างกันสองที่ และค่าของthisต่างกันที่ตำแหน่งทั้งสอง ซึ่งตัดสินโดยบริบทที่เรียกโค้ดนั้น

ตอนนี้เรามาดูกันว่ามันทำงานอย่างไรในบล็อคโค้ดต่างๆ

1. this ภายในบริบทโลก

3. thisฟังก์ชันคอนสตรัคเตอร์ภายใน

4. thisภายในฟังก์ชันภายในอ็อบเจกต์

5. thisฟังก์ชันภายใน

6. thisภายในฟังก์ชั่นและstrict modeเปิดอยู่

นอกเหนือจากสถานการณ์ข้างต้นแล้ว เรามีแนวคิดเพิ่มเติมเกี่ยวกับความเข้าใจ และนั่นคือหน้าที่ของลูกศร thisภายในฟังก์ชันลูกศรทำงานแตกต่างกัน

ภายในฟังก์ชั่นลูกศรthisมีขอบเขตของตัวเองไม่มี มันชี้ไปที่ขอบเขตของพาเรนต์เสมอ

1. thisภายในฟังก์ชันลูกศร — ในตัวอย่างนี้ ขอบเขตหลักของsampleเมธอดคือwindow

3. thisภายในฟังก์ชันภายในเป็นฟังก์ชันลูกศร กรณีที่ 1 เมื่อฟังก์ชันลูกศรอยู่ภายในฟังก์ชันลูกศร

นอกเหนือจากนี้เรายังสามารถควบคุมcontextของthisตนเองโดยใช้วิธีใดวิธี inbuilt JS และcall bind applyสำหรับบทความนี้ จะอธิบายสิ่งเหล่านี้มากเกินไป แต่เพื่อจุดประสงค์ในการสาธิต ฉันกำลังแสดงให้เห็นว่าเราจะเปลี่ยนสิ่งcontextนี้โดยใช้call:

สำหรับคำอธิบายเพิ่มเติม:
https://youtu.be/-NnxwkJ4yIg

คำถามฝึกหัด:
https://dmitripavlutin.com/javascript-this-interview-questions/