ฟังก์ชันคือกลุ่มคำสั่งที่ใช้ซ้ำได้แบบโมดูลสำหรับแสดงชุดคำสั่ง งานที่เกี่ยวข้อง เช่น การคำนวณและแสดงผลค่าตามอาร์กิวเมนต์ ที่ให้ไว้ในฟังก์ชัน เช่นเดียวกับค่าที่ไม่พื้นฐานทั้งหมด คือวัตถุ พวกมันเป็นวัตถุที่มีลักษณะพิเศษ ซึ่งสามารถเรียกว่าได้ เพื่อเรียกใช้โค้ด จะส่งผ่านข้อมูลในรูปอาร์กิวเมนต์ และแสดงผลค่า
ฟังก์ชันต่างๆ ถือว่าเป็น "ชั้นเรียนแรก" ซึ่งหมายความว่าแม้จะมีลักษณะการทำงานเฉพาะตัว แต่ก็สามารถใช้ใน บริบทเดียวกับออบเจ็กต์ JavaScript อื่นๆ ตัวอย่างเช่น ฟังก์ชันอาจเป็น กำหนดให้กับตัวแปร ส่งต่อเป็นอาร์กิวเมนต์ไปยังฟังก์ชันอื่น และส่งผลลัพธ์ โดยฟังก์ชันอื่นๆ
function myFunction() {
console.log( "This is my function." );
};
ฟังก์ชันที่กำหนดไว้เป็นคุณสมบัติของออบเจ็กต์คือ
ซึ่งปกติจะเรียกว่า "เมธอด" เช่นเดียวกับตัวแปรที่ประกาศโดยใช้ var
`
ระบบจะเพิ่มการประกาศฟังก์ชันที่ดำเนินการนอกฟังก์ชันที่ล้อมรอบในส่วน
ออบเจ็กต์ส่วนกลางเป็นเมธอด
การประกาศฟังก์ชัน
การประกาศฟังก์ชัน (หรือที่เรียกว่า "คำสั่งฟังก์ชัน" หรือ "คำจำกัดความของฟังก์ชัน")
สร้างฟังก์ชันที่มีชื่อที่จะเรียกใช้ในตำแหน่งอื่นในขอบเขตที่มีอยู่ได้
การประกาศฟังก์ชันประกอบด้วยคีย์เวิร์ด function
ที่ตามด้วย
รายการพารามิเตอร์ที่คั่นด้วยคอมมาภายในวงเล็บ และ
ข้อความบล็อกที่เรียกว่า
"ฟังก์ชั่นของร่างกาย" คุณมักจะพบการประกาศฟังก์ชันที่ไม่
ลงท้ายด้วยเซมิโคลอน เนื่องจากการประกาศฟังก์ชันเป็นคำสั่งต่อท้าย
ASI อนุมานเครื่องหมายเซมิโคลอนได้
function myFunction() {
console.log( "This is my function." );
};
myFunction();
> "This is my function."
เนื่องด้วยการตัดสินใจในการออกแบบเบื้องต้นของ JavaScript การประกาศฟังก์ชัน
ขึ้นอยู่กับการรอกแบบเดิมเดียวกัน
เป็นตัวแปรที่ประกาศด้วย var
ซึ่งหมายความว่าการประกาศฟังก์ชัน
จะเป็นส่วนหนึ่งของขอบเขต และเรียกได้ก่อนที่จะประกาศว่าเป็น
ผลลัพธ์ ไม่ว่าขอบเขตนั้นจะอยู่ภายใต้โหมดเข้มงวดหรือไม่ก็ตาม
"use strict";
{
myFunction();
function myFunction() {
console.log( "This is my function." );
};
}
> "This is my function."
ภายนอกโหมดเข้มงวด ฟังก์ชัน การประกาศใช้การกำหนดขอบเขตเดิมของ JavaScript ซึ่งหมายความว่าการประกาศฟังก์ชันจะอยู่ในขอบเขตที่อยู่ใกล้ที่สุด ฟังก์ชัน:
function myFunction() {
function myNestedFunction() {
console.log( "This is my nested function." );
}
myNestedFunction();
};
myFunction();
> "This is my nested function."
myNestedFunction();
>Uncaught ReferenceError: myNestedFunction is not defined
ในโหมดเข้มงวด การประกาศฟังก์ชัน
จะกำหนดขอบเขตไปยังบล็อกปิดที่ใกล้เคียงที่สุด เช่นเดียวกับตัวแปรที่ประกาศโดยใช้
let
หรือ const
:
"use strict";
{
function myFunction() {
console.log( "This is my function." );
};
}
myFunction();
> Uncaught ReferenceError: myFunction is not defined
กำลังเรียกฟังก์ชัน
เช่นเดียวกับตัวแปร ตัวระบุที่ใช้เมื่อประกาศฟังก์ชันจะทำหน้าที่เป็น ชื่อสัญลักษณ์ของค่า การอ้างอิงฟังก์ชันด้วยตัวระบุเพียงอย่างเดียวจะแสดงผล เฉพาะออบเจ็กต์ฟังก์ชัน และไม่เรียกใช้ฟังก์ชันที่มีในออบเจ็กต์
function myFunction() {
console.log( "This is my function." );
};
myFunction;
> myFunction() {
console.log( "This is my function." );
}
หากต้องการเรียกใช้โค้ดภายในเนื้อหาของฟังก์ชัน ให้เรียก (หรือ เรียกใช้) ฟังก์ชัน โดยต่อท้ายชื่อฟังก์ชันด้วยวงเล็บที่ตรงกัน
function myFunction() {
console.log( "My function has been executed." );
}
myFunction();
> "My function has been executed."
พารามิเตอร์ในคำจำกัดความของฟังก์ชันจะทำหน้าที่เป็นตัวแปรตัวยึดตำแหน่ง ค่าที่สามารถส่งผ่านไปยังเนื้อหาของฟังก์ชันได้เมื่อมีการเรียกใช้ฟังก์ชัน ค่าในวงเล็บเมื่อมีการเรียกฟังก์ชันคือ "อาร์กิวเมนต์" (แม้ว่า คุณอาจเห็น "การโต้แย้ง" ใช้เพื่ออธิบายทั้งอาร์กิวเมนต์และพารามิเตอร์ เอกสารประกอบ)
function myFunction( myParameter ) {
console.log( `The value is: ${ myParameter }.` );
};
myFunction( "this string" );
> "The value is: this string."
หากไม่ระบุอาร์กิวเมนต์ พารามิเตอร์ผลลัพธ์จะมี
undefined
เนื่องจากพารามิเตอร์จะประกาศไปยังเนื้อหาของฟังก์ชัน แต่
ไม่ได้เริ่มต้นด้วยค่า:
function myFunction( myParameter ) {
console.log( `The value is: ${ myParameter }.` );
};
myFunction();
> "The value is: undefined."
คุณสามารถตั้งค่าพารามิเตอร์เริ่มต้นได้โดยเริ่มต้นในลักษณะเดียวกัน
เริ่มต้นตัวแปร: โอเปอเรเตอร์การกำหนด (=
) ตามด้วยค่า หากคุณ
ระบุอาร์กิวเมนต์สำหรับฟังก์ชันนั้นในภายหลัง ซึ่งค่าใหม่จะลบล้าง
ค่าเริ่มต้น:
function myFunction( myParameter = "omitted" ) {
console.log( `The value is: ${ myParameter }.` );
};
myFunction( "this string" );
> "The value is: this string."
myFunction();
> "The value is: omitted."
ลำตัวของไม่ใช่ลูกศร
ยังมีสิทธิ์เข้าถึงฟังก์ชันที่จัดทำดัชนีเป็นศูนย์
วัตถุ อาร์เรย์เหมือนarguments
ที่มีค่าที่ส่งผ่านเป็นอาร์กิวเมนต์ ไม่ว่าฟังก์ชันจะมีหรือไม่ก็ตาม
คำจำกัดความจะระบุพารามิเตอร์ดังนี้
function myFunction() {
console.log( arguments );
};
myFunction( 3, true, "My string" );
> Arguments { 0: 3, 1: true, 2: "My string", … }
ฟังก์ชันแปรผัน
ออบเจ็กต์ arguments
ให้คุณสร้างฟังก์ชันตัวแปรพื้นฐานซึ่งสามารถ
ยอมรับจำนวนตัวแปรของอาร์กิวเมนต์:
function myFunction() {
let result = "";
for (let i = 0; i < arguments.length; i++) {
result += arguments[i] + " - ";
}
console.log( result );
};
myFunction( "My first string", "My second string", "my third string" );\
> "My first string - My second string - my third string - "
อย่างไรก็ตาม วิธีนี้ไม่ค่อยมีการใช้ฟังก์ชัน variadic ใน JavaScript สมัยใหม่ ที่กำลังพัฒนา เรามักใช้ข้อความสมัยใหม่และสามารถอ่านได้ ไวยากรณ์พารามิเตอร์ที่เหลือ ซึ่งจะสร้างพารามิเตอร์ที่มีชื่อซึ่งเริ่มต้นเป็นอาร์เรย์ที่มีอาร์กิวเมนต์ นอกเหนือจากที่ระบุไว้อย่างชัดแจ้ง
function myFunction( mySeparator, ...myStrings ) {
console.log( myStrings.join( mySeparator ) );
};
myFunction( " - ", "My first string", "My second string", "my third string" );
> "My first string - My second string - my third string"
ไวยากรณ์พารามิเตอร์ที่เหลือทำงานตามที่คาดไว้ร่วมกับพารามิเตอร์ฟังก์ชันลูกศร ซึ่งต่างจากการเชื่อมโยง parameter
function myOuterFunction() {
let myInnerArrowFunction = ( ...myParams ) => {
console.log( myParams[ 0 ] );
}
myInnerArrowFunction( true );
};
myOuterFunction( false );
> true
let myArrowFunction = ( ...myParams ) => {
console.log( myParams[ 0 ] );
};
myArrowFunction( true );
> true`
``