JavaScript คำกำหนด this

ตัวอย่าง

var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 678,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

ทดสอบด้วยตัวเอง

this คืออะไร?

JavaScript this ในคำเรียกเรื่อง

มีค่าต่างกัน ขึ้นอยู่กับจุดที่ใช้งาน

  • ในวิธีthis หมายถึงตัวแปรเจ้าของ
  • ในขั้นตอนที่เดี่ยวๆthis หมายถึงตัวแปรโลก
  • ในฟังก์ชันthis หมายถึงตัวแปรโลก
  • ในฟังก์ชัน ในโหมด strict mode นั้นthis คือ undefined。
  • ในเหตุการณ์this หมายถึงองค์ประกอบที่รับเหตุการณ์

เช่น call() และ apply() วิธีนี้สามารถนำ this มายอดไปยังวัตถุใดๆ

this ในวิธี

ในวิธีของวัตถุthis หมายถึง "เจ้าของ" ของฟังก์ชันนี้

ในตัวอย่างที่อยู่ด้านบนของหน้านี้this หมายถึงตัวแปร person

ตัวแปร person คือเจ้าของของฟังก์ชัน fullName

fullName : function() {
  return this.firstName + " " + this.lastName;
}

ทดสอบด้วยตัวเอง

this ที่ใช้เดี่ยวๆ

ในการใช้เดี่ยวๆ นั้น ผู้เจ้าของคือตัวแปรโลก ดังนั้น this หมายถึงตัวแปรโลก

ในหน้าต่างบราวเซอร์ [object Window]：

ตัวอย่าง

var x = this;

ทดสอบด้วยตัวเอง

ใน strict mode หากใช้เดี่ยวๆ แล้ว this หมายถึงตัวแปรโลก [object Window]：

ตัวอย่าง

"use strict";
var x = this;

ทดสอบด้วยตัวเอง

this ในฟังก์ชัน (โดยเริ่มต้น)

การเชื่อมโยงตัวแปรโดยเริ่มต้นของฟังก์ชันใน JavaScript คือเจ้าของ this。

ดังนั้น ในฟังก์ชัน นั้น，this หมายถึงตัวแปรโลก [object Window]。

ตัวอย่าง

function myFunction() {
  return this;
}

ทดสอบด้วยตัวเอง

this ในฟังก์ชัน (strict mode)

strict mode ของ JavaScript ไม่อนุญาตการเชื่อมโยงตัวแปรติดตั้งโดยเริ่มต้น

ดังนั้น ในการใช้ฟังก์ชันในฟังก์ชัน ในโหมด strict mode นั้น，this คือไม่มีค่า (undefined})

ตัวอย่าง

"use strict";
function myFunction() {
  return this;
}

ทดสอบด้วยตัวเอง

this ในประสาทการจัดการเหตุการณ์

ในประสาทการจัดการเหตุการณ์ HTML，this หมายถึงองค์ประกอบ HTML ที่รับหน้าที่นี้:

ตัวอย่าง

<button onclick="this.style.display='none'">
  คลิกเพื่อลบฉัน!
</button>

ทดสอบด้วยตัวเอง

การเชื่อมโยงวิธี

ในตัวอย่างนี้，this คือตัวแปร person แห่งนี้ (ตัวแปร person คือ "เจ้าของ" ของฟังก์ชันนี้):

ตัวอย่าง

var person = {
  firstName  : "Bill",
  lastName   : "Gates",
  id         : 678,
  myFunction : function() {
    return this;
  }
};

ทดสอบด้วยตัวเอง

ตัวอย่าง

var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 678,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

ทดสอบด้วยตัวเอง

หรือที่ว่าthis.firstName หมายถึง thisของวัตถุ firstName ตัวแปร

การจัดการ

call() และ apply() วิธีเป็นวิธีที่เป็นประจำ JavaScript

ทั้งสองสามารถใช้เพื่อเรียกวิธีของวัตถุอื่นๆ

คุณสามารถอ่านเกี่ยวกับ call() และ apply() ของเนื้อหาเพิ่มเติม。

ในตัวอย่างด้านล่าง ขณะที่ใช้ person2 ในการเรียก fullName ของ person1this จะนำอ้างอิง person2 แม้ว่ามันจะเป็นวิธีของ person1:

ตัวอย่าง

var person1 = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
var person2 = {
  firstName:"Bill",
  lastName: "Gates",
}
person1.fullName.call(person2);  // จะกลับค่า "Bill Gates"

ทดสอบด้วยตัวเอง