ฟังก์ชัน JavaScript สามารถเรียกใน 4 วิธีที่แตกต่างกัน
แต่ละวิธีแตกต่างกันในวิธีการ this จะเริ่มต้นได้
this คำหลัก
ใน JavaScript สิ่งที่เรียกว่า this เป็นวัตถุที่ว่า "เป็นเจ้าของ" รหัสปัจจุบัน
ค่าของ this เมื่อใช้ในฟังก์ชั่นเป็นวัตถุที่ว่า "เป็นเจ้าของ" ฟังก์ชั่น
โปรดทราบว่า this ไม่ได้เป็นตัวแปร มันเป็นคำหลักที่ คุณไม่สามารถเปลี่ยนค่าของ this
การเรียกฟังก์ชัน JavaScript
คุณได้เรียนรู้แล้วว่ารหัสภายในฟังก์ชัน JavaScript จะดำเนินการเมื่อมี "อะไร" เรียกมัน
รหัสในการทำงานที่ไม่ได้ดำเนินการเมื่อฟังก์ชั่นที่มีการกำหนด มันจะถูกดำเนินการเมื่อฟังก์ชันถูกเรียก
บางคนใช้คำว่า "เรียกฟังก์ชั่น" แทน "เรียกใช้ฟังก์ชั่น"
นอกจากนี้ยังค่อนข้างธรรมดาที่จะพูดว่า "เรียกร้องให้ฟังก์ชั่น", "เริ่มต้นฟังก์ชั่น" หรือ "รันฟังก์ชั่น"
ในการกวดวิชานี้เราจะใช้วิงวอนเพราะฟังก์ชัน JavaScript สามารถเรียกโดยไม่ได้ถูกเรียกว่า
การเรียกฟังก์ชั่นเป็นฟังก์ชัน
ตัวอย่าง
function myFunction(a, b) {
return a * b;
}
myFunction(10, 2); // myFunction(10, 2) will return 20
ลองตัวเอง» ฟังก์ชั่นดังกล่าวข้างต้นไม่ได้อยู่กับวัตถุใด ๆ แต่ใน JavaScript มีอยู่เสมอวัตถุทั่วโลกเริ่มต้น
ใน HTML วัตถุทั่วโลกเริ่มต้นคือหน้า HTML ตัวเองเพื่อให้ฟังก์ชั่นดังกล่าวข้างต้น "เป็น" เพื่อหน้า HTML
ในเบราว์เซอร์วัตถุหน้าเป็นหน้าต่างเบราว์เซอร์ ฟังก์ชั่นข้างต้นโดยอัตโนมัติกลายเป็นฟังก์ชั่นหน้าต่าง
myFunction() และ window.myFunction() เป็นฟังก์ชั่นเดียวกัน
ตัวอย่าง
function myFunction(a, b) {
return a * b;
}
window.myFunction(10, 2); // window.myFunction(10, 2) will also return 20
ลองตัวเอง» นี้เป็นวิธีการทั่วไปที่จะเรียกฟังก์ชัน JavaScript แต่ไม่ได้มีการปฏิบัติที่ดีมาก
ตัวแปรทั่วโลกวิธีการหรือฟังก์ชั่นสามารถสร้างความขัดแย้งชื่อและข้อบกพร่องในวัตถุโลก
วัตถุทั่วโลก
เมื่อมีฟังก์ชั่นโดยไม่ต้องเรียกว่าวัตถุเจ้าของค่าของ this จะกลายเป็นวัตถุทั่วโลก
ในเว็บเบราเซอร์วัตถุทั่วโลกเป็นหน้าต่างเบราว์เซอร์
ตัวอย่างนี้ส่งกลับวัตถุหน้าต่างเป็นค่าของ this :
ตัวอย่าง
function myFunction() {
return this;
}
myFunction(); // Will return the window object
ลองตัวเอง» การเรียกฟังก์ชั่นเป็นฟังก์ชั่นทั่วโลกทำให้ค่าของ this จะเป็นวัตถุทั่วโลก
การใช้วัตถุหน้าต่างเป็นตัวแปรสามารถผิดพลาดโปรแกรมของคุณ
การเรียกฟังก์ชั่นเป็นวิธีการที่
ใน JavaScript คุณสามารถกำหนดฟังก์ชั่นเป็นวิธีการของวัตถุ
ตัวอย่างต่อไปนี้สร้างวัตถุ ( myObject ) มีสองคุณสมบัติ ( firstName และ lastName ) และวิธีการ ( fullName ):
ตัวอย่าง
var myObject = {
firstName:"John",
lastName: "Doe",
fullName: function () {
return this.firstName + " " + this.lastName;
}
}
myObject.fullName(); // Will return "John Doe"
ลองตัวเอง» fullName วิธีคือฟังก์ชั่น ฟังก์ชั่นเป็นวัตถุ. myObject เป็นเจ้าของของฟังก์ชั่น
สิ่งที่เรียกว่า this เป็นวัตถุที่ว่า "เป็นเจ้าของ" รหัส JavaScript ในกรณีนี้ค่าของ this เป็น myObject
ทดสอบ! เปลี่ยน fullName วิธีการที่จะกลับค่าของ this :
ตัวอย่าง
var myObject = {
firstName:"John",
lastName: "Doe",
fullName: function () {
return this;
}
}
myObject.fullName(); // Will return [object Object] (the owner object)
ลองตัวเอง» การเรียกฟังก์ชั่นเป็นวิธีวัตถุทำให้ค่าของ this จะเป็นวัตถุเอง
การเรียกฟังก์ชั่นที่มีการสร้างฟังก์ชั่น
ถ้าภาวนาฟังก์ชั่นจะนำหน้าด้วย new คำหลักก็คือการภาวนาคอนสตรัค
ดูเหมือนว่าคุณสร้างฟังก์ชั่นใหม่ แต่เนื่องจากฟังก์ชัน JavaScript เป็นวัตถุคุณจริงสร้างวัตถุใหม่:
ตัวอย่าง
// This is a function constructor:
function myFunction(arg1, arg2) {
this.firstName = arg1;
this.lastName = arg2;
}
// This creates a new object
var x = new myFunction("John","Doe");
x.firstName;
// Will return "John"
ลองตัวเอง» ภาวนาคอนสตรัคสร้างวัตถุใหม่ วัตถุใหม่สืบทอดคุณสมบัติและวิธีการจากคอนสตรัคของมัน
this คำหลักในการสร้างไม่ได้มีค่า
ค่าของ this จะเป็นวัตถุใหม่ที่สร้างขึ้นเมื่อฟังก์ชั่นที่มีการเรียก
การเรียกฟังก์ชั่นที่มีวิธีฟังก์ชัน
ใน JavaScript, ฟังก์ชั่นเป็นวัตถุ ฟังก์ชัน JavaScript มีคุณสมบัติและวิธีการ
call() และ apply() เป็นวิธีการที่กำหนดไว้ล่วงหน้าฟังก์ชัน JavaScript ทั้งสองวิธีสามารถใช้ในการเรียกใช้ฟังก์ชั่นและวิธีการทั้งสองจะต้องมีวัตถุเจ้าของเป็นพารามิเตอร์แรก
ตัวอย่าง
function myFunction(a, b) {
return a * b;
}
myObject = myFunction.call(myObject, 10, 2); // Will return 20
ลองตัวเอง» ตัวอย่าง
function myFunction(a, b) {
return a * b;
}
myArray = [10, 2];
myObject =
myFunction.apply(myObject, myArray); // Will also return 20
ลองตัวเอง» ทั้งสองวิธีใช้วัตถุเจ้าของเป็นอาร์กิวเมนต์แรก ความแตกต่างเพียงอย่างเดียวคือ call() ใช้อาร์กิวเมนต์ฟังก์ชั่นแยกกันและ apply() ใช้อาร์กิวเมนต์ฟังก์ชั่นในอาร์เรย์
ในโหมด JavaScript เข้มงวดอาร์กิวเมนต์แรกจะกลายเป็นค่าของการ this ในการทำงานเรียกแม้ว่าโต้แย้งไม่ได้เป็นวัตถุ
ในโหมด "ไม่เข้มงวด" ถ้าค่าของอาร์กิวเมนต์แรกเป็นโมฆะหรือไม่ได้กำหนดก็จะถูกแทนที่ด้วยวัตถุโลก
ด้วยการ call() หรือ apply() คุณสามารถตั้งค่าของ this และเรียกใช้ฟังก์ชั่นเป็นวิธีการใหม่ของวัตถุที่มีอยู่