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