การเรียกใช้ฟังก์ชัน JavaScript

รหัสด้านในฟังก์ชัน JavaScript จะถูกปฏิบัติเมื่อมีสิ่งใดๆเรียกมัน

เรียกฟังก์ชัน JavaScript

ขณะที่ฟังก์ชันถูกกำหนดฟังก์ชันด้านในจะไม่ถูกปฏิบัติ

ขณะที่ฟังก์ชันถูกเรียกตอนที่ฟังก์ชันถูกเรียก รหัสด้านในฟังก์ชันจะถูกปฏิบัติ

การเรียกฟังก์ชันสามารถเรียกว่า "เริ่มฟังก์ชัน" หรือ "ปฏิบัติฟังก์ชัน"

ในคู่มือนี้ เราใช้ "เรียก"

เรียกใช้ฟังก์ชันด้วยรูปแบบฟังก์ชัน

ตัวอย่าง

function myFunction(a, b) {
    return a * b;
}
myFunction(10, 2);           // จะคืนค่า 20

ลองด้วยตัวเอง

ฟังก์ชันดังกล่าวไม่เป็นส่วนของวัตถุใดๆ แต่ใน JavaScript ยังมีวัตถุโลกที่เป็นปริยาย

ใน HTML ตัวแปรโลกเริ่มต้นคือหน้าเว็บตัวเอง ฟังก์ชันทั้งหมดด้านบนนับว่าเป็นหน้าเว็บ HTML

ในเว็บเบราเซอร์ ตัวแปรหน้าเว็บนี้คือหน้าต่างบราวเซอร์ ฟังก์ชันด้านบนกลายเป็นฟังก์ชันหน้าต่าง

myFunction() และ window.myFunction() คือฟังก์ชันเดียวกัน:

ตัวอย่าง

function myFunction(a, b) {
    return a * b;
}
window.myFunction(10, 2);    // จะกลับค่า 20

ลองด้วยตัวเอง

นี่เป็นวิธีที่ติดตามที่มักใช้ แต่ไม่ใช่กระบวนการที่ดี

ตัวแปรโลก ฟังก์ชันหรือฟังก์ชันง่ายๆ ง่ายต่อการสร้างการชนนามและความอ่อนไหวในองค์ประกอบโลก

this ใคร่างคำศัพท์

ใน JavaScript นี้เรียกว่า this สิ่งที่เรียกว่า คือองค์ประกอบที่ "มี" รหัสในครั้งนี้

this ค่าของมัน ในการใช้ในฟังก์ชัน คือองค์ประกอบที่ "มี" ฟังก์ชันนี้

โปรดสังเกต this ไม่ใช่ตัวแปร。มันเป็นใคร่างคำศัพท์。คุณไม่สามารถเปลี่ยนแปลง this ค่าของมัน

องค์ประกอบโลก

เมื่อเรียกองค์ประกอบโดยไม่มีองค์ประกอบเจ้าของthis ค่าของมันกลายเป็นองค์ประกอบโลก

ในเว็บเบราเซอร์ องค์ประกอบโลกคือองค์ประกอบเบราเซอร์

ตัวอย่างนี้ใช้ this ค่าของมันคือองค์ประกอบ window นี้:

ตัวอย่าง

var x = myFunction();            // x จะกลายเป็นองค์ประกอบ window
function myFunction() {
   return this;
}

ลองด้วยตัวเอง

เรียกฟังก์ชันในฐานะฟังก์ชันโลก this ค่าของมันกลายเป็นองค์ประกอบโลก

ใช้วินาศดุลค์ window ง่ายและสามารถทำให้โปรแกรมล่มได้

เรียกฟังก์ชันในฐานะวิธี

ใน JavaScript คุณสามารถแสดงฟังก์ชันเป็นวิธีขององค์ประกอบ。

ตัวอย่างด้านล่างนี้สร้างองค์ประกอบ (myObject) ที่มีคุณสมบัติ (firstName และ lastName) และวิธี (fullName):

ตัวอย่าง

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

ลองด้วยตัวเอง

fullName คือฟังก์ชัน。ฟังก์ชันนี้เป็นขององค์ประกอบ。myObject คือเจ้าของฟังก์ชัน。

เรียกว่า this สิ่งที่เรียกว่า คือองค์ประกอบที่ "มี" รหัส JavaScript นี้ ในตัวอย่างนี้，this ค่าของมันคือ myObject。

ทดสอบให้เห็น! แก้ไขวิธีการ fullName ให้กลับค่า this ค่าของมัน:

ตัวอย่าง

var myObject = {
    firstName: "Bill",
    lastName: "Gates",
    fullName: function () {
        return this;
    }
}
myObject.fullName();          // จะกลับค่า [object Object] (เป็นองค์ประกอบเจ้าของ)

ลองด้วยตัวเอง

การเรียกใช้ฟังก์ชันด้วยวิธีวัตถุจะนำไปสู่ this ค่าของมันจะกลายเป็นวัตถุตัวเอง

โดยเรียกใช้ฟังก์ชันโดยเข้าสู่โค้ดสร้าง

ถ้ามีฟังก์ชันที่เรียกใช้ก่อนหน้านี้ นั้น new ถ้ามีคำศัพท์สำคัญต่อหน้าฟังก์ชัน นั้นนี่คือการเรียกใช้โค้ดสร้าง

มันดูเหมือนคุณกำลังสร้างฟังก์ชันใหม่ แต่เพราะฟังก์ชัน JavaScript คือวัตถุ คุณสร้างวัตถุใหม่:

ตัวอย่าง

// นี่คือโค้ดสร้าง:
function myFunction(arg1, arg2) {
    this.firstName = arg1;
    this.lastName  = arg2;
}
// สร้างวัตถุใหม่ด้วย
var x = new myFunction("Bill", "Gates");
x.firstName;                             // จะกลับมา "Bill"

ลองด้วยตัวเอง

การเรียกใช้โค้ดสร้างจะสร้างวัตถุใหม่ วัตถุใหม่จะทรงถือมาซึ่งคุณสมบัติและวิธีการจากโค้ดสร้างของมัน

ด้านในโค้ดสร้าง this คำศัพท์ไม่มีค่า

this ค่าของมันจะกลายเป็นตัวแปรใหม่ที่ถูกสร้างขึ้นเมื่อเรียกฟังก์ชัน