คำจำกัดความของฟังก์ชัน JavaScript
ฟังก์ชัน JavaScript ถูกกำหนดด้วย
function
คีย์เวิร์ด
คุณสามารถใช้การประกาศฟังก์ชันหรือนิพจน์ ฟังก์ชัน
ประกาศฟังก์ชัน
ก่อนหน้านี้ในบทช่วยสอนนี้ คุณได้เรียนรู้ว่ามีการประกาศ ฟังก์ชัน ด้วยไวยากรณ์ต่อไปนี้:
function functionName(parameters) {
// code to be executed
}
ฟังก์ชันที่ประกาศไว้จะไม่ถูกดำเนินการทันที พวกเขา "บันทึกไว้เพื่อใช้ในภายหลัง" และจะดำเนินการในภายหลังเมื่อถูกเรียกใช้ (เรียกเมื่อ)
ตัวอย่าง
function myFunction(a, b) {
return a * b;
}
อัฒภาคใช้เพื่อแยกคำสั่ง JavaScript ที่เรียกทำงานได้ เนื่องจากการ ประกาศ
ฟังก์ชันไม่ใช่คำสั่งเรียกทำงาน จึงไม่ใช่เรื่องปกติที่จะลงท้ายด้วยเครื่องหมายอัฒภาค
นิพจน์ฟังก์ชัน
ฟังก์ชัน JavaScript สามารถกำหนดได้โดยใช้นิพจน์
นิพจน์ของฟังก์ชันสามารถเก็บไว้ในตัวแปรได้:
ตัวอย่าง
const x = function (a, b) {return a * b};
หลังจากเก็บนิพจน์ของฟังก์ชันไว้ในตัวแปรแล้ว ตัวแปรจะสามารถใช้เป็นฟังก์ชันได้ดังนี้
ตัวอย่าง
const x = function (a, b) {return a * b};
let z = x(4, 3);
ฟังก์ชันด้านบนนี้เป็น ฟังก์ชันที่ ไม่ระบุตัวตน จริงๆ (ฟังก์ชันที่ไม่มีชื่อ)
ฟังก์ชันที่เก็บไว้ในตัวแปรไม่จำเป็นต้องมีชื่อฟังก์ชัน พวกเขาจะเรียก (เรียกว่า) โดยใช้ชื่อตัวแปรเสมอ
ฟังก์ชันด้านบนลงท้ายด้วยเครื่องหมายอัฒภาคเนื่องจากเป็นส่วนหนึ่งของคำสั่งเรียกทำงาน
ฟังก์ชัน() ตัวสร้าง
ดังที่คุณได้เห็นในตัวอย่างก่อนหน้านี้ ฟังก์ชัน JavaScript ถูกกำหนดด้วยfunction
คีย์เวิร์ด
ฟังก์ชันต่างๆ ยังสามารถกำหนดได้ด้วยตัวสร้างฟังก์ชัน JavaScript ในตัวที่เรียกว่า
Function()
.
ตัวอย่าง
const myFunction = new Function("a", "b", "return a * b");
let x = myFunction(4, 3);
คุณไม่จำเป็นต้องใช้ตัวสร้างฟังก์ชัน ตัวอย่างข้างต้นเหมือนกับการเขียน:
ตัวอย่าง
const myFunction = function (a, b) {return a * b};
let x = myFunction(4, 3);
โดยส่วนใหญ่ คุณสามารถหลีกเลี่ยงการใช้new
คำหลักใน JavaScript
รอกฟังก์ชั่น
ก่อนหน้านี้ในบทช่วยสอนนี้ คุณได้เรียนรู้เกี่ยวกับ "hoisting" ( JavaScript Hoisting )
Hoisting เป็นพฤติกรรมเริ่มต้นของ JavaScript ในการย้ายการประกาศไปที่ด้านบนสุดของขอบเขตปัจจุบัน
การชักรอกใช้กับการประกาศตัวแปรและการประกาศฟังก์ชัน
ด้วยเหตุนี้ ฟังก์ชัน JavaScript จึงสามารถเรียกได้ก่อนที่จะประกาศ:
myFunction(5);
function myFunction(y) {
return y * y;
}
ฟังก์ชันที่กำหนดโดยใช้นิพจน์จะไม่ถูกยกขึ้น
ฟังก์ชันเรียกตนเอง
นิพจน์ฟังก์ชันสามารถทำ "เรียกตนเอง" ได้
นิพจน์เรียกตัวเองถูกเรียก (เริ่มต้น) โดยอัตโนมัติโดยไม่ต้องเรียก
นิพจน์ของฟังก์ชันจะดำเนินการโดยอัตโนมัติหากนิพจน์นั้นตามด้วย ()
คุณไม่สามารถเรียกการประกาศฟังก์ชันได้เอง
คุณต้องเพิ่มวงเล็บรอบฟังก์ชันเพื่อระบุว่าเป็นนิพจน์ของฟังก์ชัน:
ตัวอย่าง
(function () {
let x = "Hello!!"; // I will invoke myself
})();
ที่จริงแล้ว ฟังก์ชันข้างต้นเป็นฟังก์ชันเรียกตัวเองแบบไม่ระบุตัวตน (ฟังก์ชันไม่มีชื่อ)
ฟังก์ชันสามารถใช้เป็นค่าได้
ฟังก์ชัน JavaScript สามารถใช้เป็นค่าได้:
ตัวอย่าง
function myFunction(a, b) {
return a * b;
}
let x = myFunction(4, 3);
ฟังก์ชัน JavaScript สามารถใช้ในนิพจน์:
ตัวอย่าง
function myFunction(a, b) {
return a * b;
}
let x = myFunction(4, 3) * 2;
หน้าที่คืออ็อบเจกต์
โอtypeof
เปอเรเตอร์ใน JavaScript ส่งคืน "ฟังก์ชัน" สำหรับฟังก์ชัน
แต่ฟังก์ชัน JavaScript สามารถอธิบายได้ดีที่สุดว่าเป็นวัตถุ
ฟังก์ชัน JavaScript มีทั้งคุณสมบัติและ เมธอด
คุณสมบัติarguments.length
ส่งคืนจำนวนอาร์กิวเมนต์ที่ได้รับเมื่อเรียกใช้ฟังก์ชัน:
ตัวอย่าง
function myFunction(a, b) {
return arguments.length;
}
เมธอดส่งคืน ฟังก์ชันtoString()
เป็นสตริง:
ตัวอย่าง
function myFunction(a, b) {
return a * b;
}
let text = myFunction.toString();
ฟังก์ชันที่กำหนดเป็นคุณสมบัติของอ็อบเจ็กต์ เรียกว่าเมธอดไปยังอ็อบเจ็กต์
ฟังก์ชันที่ออกแบบมาเพื่อสร้างวัตถุใหม่ เรียกว่า ตัวสร้างอ็อบเจ็กต์
ฟังก์ชั่นลูกศร
ฟังก์ชันลูกศรช่วยให้ไวยากรณ์สั้น ๆ สำหรับเขียนนิพจน์ของฟังก์ชัน
คุณไม่จำเป็นต้องมีfunction
คีย์เวิร์ดreturn
คีย์เวิร์ด และ
วงเล็บปีกกา
ตัวอย่าง
// ES5
var x = function(x, y) {
return x * y;
}
// ES6
const x = (x, y) => x * y;
ฟังก์ชั่นลูกศรไม่มีของตัวthis
เอง ไม่เหมาะสำหรับการกำหนด วิธีการ ของวัตถุ
ฟังก์ชั่นลูกศรไม่ได้ถูกยกขึ้น ต้องกำหนดก่อนนำไปใช้
การใช้const
ปลอดภัยกว่าการใช้var
เนื่องจากนิพจน์ของฟังก์ชันมีค่าคงที่เสมอ
คุณสามารถละเว้นreturn
คีย์เวิร์ดและวงเล็บปีกกาได้ก็ต่อเมื่อฟังก์ชันนั้นเป็นคำสั่งเดียว ด้วยเหตุนี้ การรักษาสิ่งเหล่านี้อาจเป็นนิสัยที่ดีเสมอ:
ตัวอย่าง
const x = (x, y) => { return x * y };
ไม่รองรับฟังก์ชันลูกศรใน IE11 หรือเก่ากว่า