JavaScript คำหลักนี้
ตัวอย่าง
const person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
นี่คืออะไร?
คีย์เวิร์ด JavaScript this
อ้างถึงอ็อบเจ็กต์ที่เป็นของ
มีค่าต่างกันขึ้นอยู่กับตำแหน่งที่ใช้:
- ในเมธอด
this
หมายถึงอ็อบเจ็กต์เจ้าของ - เพียงอย่างเดียว
this
หมายถึงอ็อบเจ็กต์ส่วนกลาง - ในฟังก์ชัน
this
หมายถึงอ็อบเจ็กต์ส่วนกลาง - ในฟังก์ชัน ในโหมดเข้มงวด
this
คือundefined
- ในเหตุการณ์
this
หมายถึงองค์ประกอบที่ได้รับเหตุการณ์ - วิธีการเช่น
call()
และapply()
สามารถอ้างthis
ถึงวัตถุใดๆ
นี้ในวิธีการ
ในเมธอดอ็อบเจ็กต์this
หมายถึง " เจ้าของ " ของเมธอด
ในตัวอย่างที่ด้านบนของหน้านี้this
หมายถึงวัตถุ ของ บุคคล
วัตถุบุคคลเป็นเจ้าของวิธีการfullName
fullName : function() {
return this.firstName + " " + this.lastName;
}
นี้คนเดียว
เมื่อใช้คนเดียวเจ้าของคืออ็อบเจ็กต์ Global ดังนั้นthis
จะอ้างอิงถึงอ็อบเจ็กต์ Global
ในหน้าต่างเบราว์เซอร์ Global object คือ[object Window]
:
ตัวอย่าง
let x = this;
ในโหมดเข้มงวดเมื่อใช้คนเดียวthis
ยังหมายถึงวัตถุโกลบอล
[object Window]
:
ตัวอย่าง
"use strict";
let x = this;
สิ่งนี้ในฟังก์ชั่น (ค่าเริ่มต้น)
ในฟังก์ชัน JavaScript เจ้าของฟังก์ชันคือการ เชื่อมโยง เริ่มต้นสำหรับthis
.
ดังนั้น ในฟังก์ชัน หมาย ถึงthis
วัตถุโกลบอล[object Window]
ตัวอย่าง
function myFunction() {
return this;
}
นี้ในฟังก์ชั่น (เข้มงวด)
โหมดเข้มงวด ของ JavaScript ไม่อนุญาตให้มีการผูกค่าเริ่มต้น
ดังนั้น เมื่อใช้ในฟังก์ชัน ในโหมดเข้มงวดthis
คือundefined
.
ตัวอย่าง
"use strict";
function myFunction() {
return this;
}
สิ่งนี้ในตัวจัดการเหตุการณ์
ในตัวจัดการเหตุการณ์ HTML this
หมายถึงองค์ประกอบ HTML ที่ได้รับเหตุการณ์:
ตัวอย่าง
<button onclick="this.style.display='none'">
Click to
Remove Me!
</button>
วิธีการผูกวัตถุ
ในตัวอย่างเหล่านี้this
เป็น วัตถุ บุคคล (วัตถุบุคคลคือ "เจ้าของ" ของฟังก์ชัน):
ตัวอย่าง
const person = {
firstName : "John",
lastName : "Doe",
id : 5566,
myFunction : function() {
return this;
}
};
ตัวอย่าง
const person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " +
this.lastName;
}
};
กล่าวอีกนัยหนึ่ง: this.firstNameหมายถึงคุณสมบัติ firstName ของ วัตถุ (บุคคล) นี้
การโยงฟังก์ชันที่ชัดเจน
และ เมธอด call()
เป็นapply()
เมธอด JavaScript ที่กำหนดไว้ล่วงหน้า
สามารถใช้ทั้งคู่เพื่อเรียกวิธีการของวัตถุกับวัตถุอื่นเป็นอาร์กิวเมนต์
คุณสามารถอ่านเพิ่มเติมเกี่ยวกับcall()
และapply()
ภายหลังในบทช่วยสอนนี้
ในตัวอย่างด้านล่าง เมื่อเรียก person1.fullName ด้วย person2 เป็นอาร์กิวเมนต์this
จะอ้างถึง person2 แม้ว่าจะเป็นวิธีของ person1:
ตัวอย่าง
const person1 = {
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
const person2 = {
firstName:"John",
lastName: "Doe",
}
person1.fullName.call(person2); // Will return "John Doe"