หนึ่งในแนวคิดที่ท้าทายและใช้บ่อยที่สุดใน JavaScript คือ “ นี้ ' คำสำคัญ. JavaScript ใช้ “ นี้ ” คำหลักที่แตกต่างจากภาษาอื่น อย่างไรก็ตาม มันจำเป็นสำหรับการสร้างโค้ด JavaScript ขั้นสูงเพิ่มเติม สำหรับผู้เริ่มต้น อาจเป็นเรื่องยากสำหรับคุณที่จะเข้าใจการใช้คำหลักที่กล่าวถึง แต่ไม่ต้องกังวลไป!
โพสต์นี้จะอธิบายเกี่ยวกับ “ นี้ คีย์เวิร์ด ” และการใช้งานในจาวาสคริปต์
“นี่” ใน JavaScript คืออะไร?
“ นี้ ” เป็นคีย์เวิร์ดใน JavaScript ที่อ้างถึงอ็อบเจ็กต์ที่รันบล็อกโค้ดที่มีอยู่ มันแสดงถึงวัตถุที่เรียกใช้ฟังก์ชันปัจจุบัน ใช้ในหลายสถานการณ์ในรูปแบบต่างๆ เช่น:
-
- ในวิธีการ
- ในการจัดงาน
- ในการทำงาน
มาดูการใช้งานแต่ละอย่างที่กล่าวถึงกัน!
วิธีการใช้ “สิ่งนี้” ในวิธีจาวาสคริปต์?
“ นี้ ” ใช้ในเมธอด JavaScript เป็นการโยงโดยปริยาย เมื่อเรียกใช้ฟังก์ชันโดยใช้อ็อบเจกต์และจุดจะถือเป็นการผูกมัดโดยปริยาย และ “ นี้ ” ชี้ให้เห็นวัตถุในระหว่างการเรียกใช้ฟังก์ชัน
ตัวอย่าง
ขั้นแรก เราจะสร้างวัตถุที่มีคุณสมบัติและเมธอด แล้วใช้ “ นี้ คีย์เวิร์ด ” เพื่อรับค่าคุณสมบัติของอ็อบเจ็กต์:
var personInfo = {
ชื่อ: 'จอห์น' ,
อายุ : ยี่สิบ ,
ข้อมูล: การทำงาน ( ) {
console.log ( 'เฮ้ ฉันคือ' + this.name + ' และฉัน ' + this.age + ' ปี' ) ;
}
}
ต่อไปเรียก “ ข้อมูล() ” วิธีการพร้อมกับชื่อวัตถุ:
จะเห็นได้ว่าค่าคุณสมบัติที่ระบุของวัตถุปัจจุบันแสดงได้สำเร็จ:
หากคุณต้องการใช้ “ นี้ ” ในการจัดการเหตุการณ์ ให้ทำตามหัวข้อด้านล่าง
วิธีใช้ 'สิ่งนี้' ในการจัดการเหตุการณ์ JavaScript
ในตัวอย่างนี้ ตรวจสอบการใช้งานของ “ นี้ ” คำสำคัญในการจัดการเหตุการณ์ สำหรับสิ่งนี้ ให้พิจารณาตัวอย่างที่เราจะซ่อนปุ่มของเราด้วยการคลิกเพียงครั้งเดียว โดยสร้างปุ่มและแนบ ' เมื่อคลิก() ” เหตุการณ์กับมันเพื่อเข้าถึงคุณสมบัติ style.display ด้วย “ นี้ ” คีย์เวิร์ดที่จะซ่อนปุ่มเมื่อคลิก:
< h3 > คลิกเพื่อซ่อนปุ่ม h3 >< ปุ่ม เมื่อคลิก = 'this.style.display='none'' > คลิกที่นี่ ! ปุ่ม >
เอาท์พุต
หากคุณสับสนเกี่ยวกับการใช้ “ นี้ คีย์เวิร์ดในฟังก์ชันที่ผู้ใช้กำหนดใน JavaScript ให้ทำตามหัวข้อที่กำหนด
จะใช้ 'สิ่งนี้' ในฟังก์ชัน JavaScript ได้อย่างไร?
ขณะใช้ “ นี้ ” ในฟังก์ชัน การเชื่อมโยงใน JavaScript มีสามประเภท ได้แก่ :
-
- การผูกเริ่มต้น
- มีผลผูกพันโดยนัย
- มีผลผูกพันชัดเจน
มาทำความเข้าใจพวกเขาทีละคน!
ตัวอย่างที่ 1: การใช้คีย์เวิร์ดนี้ใน Default Binding
ในการผูกค่าเริ่มต้น “ นี้ ” คีย์เวิร์ดทำหน้าที่เป็นออบเจกต์ส่วนกลาง ส่วนใหญ่จะใช้ในฟังก์ชันแบบสแตนด์อโลน
มาทำความเข้าใจแนวคิดที่ระบุไว้พร้อมตัวอย่างกัน
ขั้นแรกเราจะสร้างตัวแปร “ x ” และกำหนดค่า “ สิบห้า ”:
วาร์ x = สิบห้า ;
จากนั้นกำหนดฟังก์ชันชื่อ “ functionDB() ” และนิยามฟังก์ชันของมัน ให้สร้างตัวแปรที่มีชื่อเดียวกัน “ x ” และกำหนดค่าเป็น “ 5 ” จากนั้นพิมพ์ค่าโดยใช้ปุ่ม “ console.log() ” วิธีการด้วย “ นี้ ' คำสำคัญ:
วาร์ x = 5 ;
console.log ( this.x ) ;
}
สุดท้ายโทรไปที่ “ functionDB() ' การทำงาน:
เนื่องจากการใช้ “ นี้ คีย์เวิร์ด ผลลัพธ์จะแสดงค่าของ x ' เช่น ' สิบห้า ” เพราะมันทำหน้าที่เป็นวัตถุสากลและเรียกว่ากระบวนการ “ การผูกแบบไดนามิก ”:
ตัวอย่างที่ 2: การใช้คีย์เวิร์ดนี้ใน Implicit Binding
เมื่อฟังก์ชันถูกเรียกโดยวัตถุหรือสัญลักษณ์จุด “ นี้ ” คีย์เวิร์ดทำหน้าที่เป็นการผูกมัดโดยนัย มันชี้ให้เห็นวัตถุในระหว่างการเรียกใช้ฟังก์ชัน
ในตัวอย่างนี้ เราจะกำหนดฟังก์ชัน “ ข้อมูล() ” และใช้ “ นี้ ” คีย์เวิร์ดในนิยามฟังก์ชัน:
การทำงาน ข้อมูล ( ) {console.log ( 'เฮ้ ฉันคือ' + this.name + ' และฉัน ' + this.age + ' ปี' )
}
จากนั้นสร้างวัตถุชื่อ “ ข้อมูลบุคคล ” ด้วยคุณสมบัติที่กำหนดไว้:
ชื่อ: 'จอห์น' ,
อายุ : ยี่สิบ ,
ข้อมูล: info
}
ตอนนี้ เรียกใช้ฟังก์ชันตามวัตถุ:
เอาท์พุต
ตัวอย่างที่ 3: การใช้คีย์เวิร์ดนี้ใน Explicit Binding
การผูกมัดอย่างชัดเจนเรียกอีกอย่างว่า “ ผูกพันอย่างหนัก ” เพราะฟังก์ชันถูกเรียกอย่างแรงเพื่อใช้วัตถุเฉพาะสำหรับ “ นี้ ผูกมัดโดยไม่ต้องใส่ฟังก์ชันคุณสมบัติอ้างอิงบนวัตถุ เพื่อจุดประสงค์นี้ สามารถใช้เมธอด call(), apply() และ bind() ได้
ตอนนี้เราจะใช้ฟังก์ชันเดียวกันกับชื่อ “ ข้อมูล() ” ที่กำหนดไว้ในตัวอย่างก่อนหน้านี้ จากนั้นสร้างวัตถุชื่อ “ ข้อมูลบุคคล ” ด้วยค่าต่อไปนี้:
var personInfo = {ชื่อ: 'จอห์น' ,
อายุ : ยี่สิบ
}
สำหรับการเรียกใช้ฟังก์ชันชื่อ “ ข้อมูล() ” เราจะใช้ “ เรียก() ” และส่งผ่านวัตถุที่สร้างขึ้นไปเป็นอาร์กิวเมนต์:
เนื่องจาก info() ไม่ได้เป็นส่วนหนึ่งของอ็อบเจ็กต์ เรายังคงเข้าถึงได้อย่างชัดเจน:
สำหรับการเรียกใช้ฟังก์ชันอย่างชัดเจน คุณสามารถใช้เมธอด apply() และ bind() ได้ เมธอด apply() เหมือนกับเมธอด call() ในขณะที่เมธอด bind() จะสร้างฟังก์ชันใหม่ที่มีเนื้อหาและขอบเขตเดียวกันกับที่ทำงานในลักษณะเดียวกับฟังก์ชันดั้งเดิม คุณสามารถใช้เมธอด bind() เพื่อส่งคืนฟังก์ชันที่คุณสามารถใช้ได้ในภายหลัง
สำหรับการโทร info() ด้วยเมธอด apply() ให้ใช้คำสั่งต่อไปนี้:
info.apply ( ข้อมูลบุคคล ) ;
มันให้ผลลัพธ์เช่นเดียวกับวิธีการโทร () ที่ให้:
สำหรับการเรียก “ ข้อมูล() ' กับ ' ผูก() ” วิธี ใช้คำสั่งที่กำหนด:
เอาท์พุต
เราได้รวบรวมข้อมูลที่จำเป็นทั้งหมดที่เกี่ยวข้องกับ ' นี้ ' คำสำคัญ.
บทสรุป
“ นี้ ” เป็นคีย์เวิร์ดใน JavaScript ที่อ้างถึงอ็อบเจ็กต์ที่รันบล็อกโค้ดที่มีอยู่ มันแสดงถึงวัตถุที่เรียกใช้ฟังก์ชันปัจจุบัน มีการใช้ในหลายสถานการณ์ในรูปแบบต่างๆ รวมถึงวิธีการ การจัดการเหตุการณ์ และฟังก์ชัน ในโพสต์นี้เราได้อธิบายว่า “ นี้ ” คีย์เวิร์ดใน JavaScript