ฟังก์ชั่นเป็นหนึ่งในองค์ประกอบพื้นฐานใน JavaScript ฟังก์ชันคือขั้นตอน JavaScript ซึ่งเป็นชุดคำสั่งที่ทำงานหรือคำนวณค่า หากต้องการใช้ฟังก์ชัน คุณต้องกำหนดฟังก์ชันไว้ที่ไหนสักแห่งในขอบเขตที่คุณต้องการเรียกใช้ฟังก์ชัน (ผู้พัฒนา mozilla.org)
บทความนี้ครอบคลุมคุณสมบัติและกฎต่างๆ ของฟังก์ชันใน JavaScript เช่น การประกาศและการใช้งานฟังก์ชัน อาร์กิวเมนต์ พารามิเตอร์ และขอบเขต
การกำหนดขอบเขตฟังก์ชัน
เมื่อเรากำหนดฟังก์ชัน ขอบเขตจะถูกสร้างขึ้นตามฟังก์ชัน สิ่งใดก็ตามที่กำหนดไว้ภายในฟังก์ชันจะไม่สามารถเข้าถึงได้ภายนอกฟังก์ชัน ตัวอย่างเช่น ตัวแปรที่กำหนดภายในฟังก์ชันจะกลายเป็น LOCAL ของฟังก์ชันนั้น และสามารถเข้าถึงได้จากภายในฟังก์ชันเท่านั้น
ด้านล่างนี้เป็นตัวอย่างพื้นฐานของการกำหนดขอบเขตในฟังก์ชัน
สำหรับฟังก์ชันที่ซ้อนกันก็ใช้กฎเดียวกันเช่นกัน
แกง
Currying เป็นเครื่องมือพื้นฐานที่ใช้ใน Functional Programming เป็นเทคนิคในการแปลงการเรียกใช้ฟังก์ชันที่มีหลายอาร์กิวเมนต์ให้เป็นสายโซ่ของการเรียกใช้ฟังก์ชันด้วยอาร์กิวเมนต์เดียวสำหรับการโทรแต่ละครั้ง
คุณอาจถามว่าทำไมต้องใช้แกง นี่คือตัวอย่างการใช้งานจริงของการใช้แกง
สมมติว่าเรามีฟังก์ชันที่เรียกว่า `add` ซึ่งรับสองอาร์กิวเมนต์และส่งคืนผลรวมของอาร์กิวเมนต์เหล่านั้น
ตอนนี้ทำให้มันซับซ้อนหน่อยด้วยการแก้ไขอาร์กิวเมนต์แรก เช่น `a` ซึ่งต้องเป็น 4 เสมอ แต่อาจมีโอกาสที่จะส่งผ่านตัวเลขอื่นโดยไม่ได้ตั้งใจ เพื่อแก้ปัญหานี้ เราสามารถใช้ฟังก์ชันการแกงได้
นิพจน์ฟังก์ชันที่เรียกใช้ทันที (IIFE)
Function Expression ที่เรียกใช้ทันทีคือฟังก์ชันที่ไม่ระบุชื่อที่ดำเนินการด้วยตนเอง ซึ่งจะเรียกใช้ฟังก์ชันทันทีทันทีที่ถูกสร้างขึ้น
IIFE มีประโยชน์มากเนื่องจากไม่สร้างมลพิษให้กับอ็อบเจ็กต์โกลบอล และเป็นวิธีง่ายๆ ในการแยกการประกาศตัวแปร พวกเขาสามารถเข้าถึงขอบเขตโดยรอบ แต่ตัวฟังก์ชันเองและตัวแปรภายในใดๆ จะไม่สามารถเข้าถึงได้จากภายนอก
ฟังก์ชันที่มีชื่อ/ไม่มีชื่อ
ฟังก์ชันสามารถตั้งชื่อหรือไม่มีชื่อได้ (ฟังก์ชันที่ไม่ระบุชื่อ)
ความแตกต่างที่สำคัญบางประการระหว่างฟังก์ชันที่มีชื่อและไม่มีชื่อ:
- ฟังก์ชันที่มีชื่อจะถูก "ยก" ในขณะที่ฟังก์ชันที่ไม่มีชื่อจะไม่ถูกยก การตั้งชื่อสามารถเรียกได้หลังบรรทัดการประกาศเท่านั้น ในขณะที่การตั้งชื่อสามารถเรียกได้ก่อนการประกาศ
- ฟังก์ชันที่มีชื่อมีประโยชน์สำหรับประสบการณ์การแก้ไขข้อบกพร่องที่ดี เนื่องจากชื่อของฟังก์ชันจะปรากฏในการติดตามข้อผิดพลาด/สแต็ก
การเชื่อมโยง `สิ่งนี้` และข้อโต้แย้ง
เมื่อเราอ้างอิงถึงเมธอด (คุณสมบัติซึ่งเป็นฟังก์ชัน) ใน JavaScript โดยปกติแล้วจะไม่จำออบเจ็กต์ที่แนบมาในตอนแรก หากเมธอดจำเป็นต้องอ้างอิงถึงออบเจ็กต์นั้นตามนี้ จะไม่สามารถทำได้ และการเรียกมันอาจทำให้เกิดความผิดพลาดได้
คุณสามารถใช้เมธอด .bind() บนฟังก์ชันเพื่อสร้าง wrapper ที่รวมค่าของสิ่งนี้และอาร์กิวเมนต์นำหน้าจำนวนเท่าใดก็ได้
ตัวอย่างด้านล่างนี้จะทำให้คุณเข้าใจเรื่องนี้มากขึ้น
หมายเหตุ: เมื่อไม่อยู่ในโหมดเข้มงวด `นี่คือ' โดยค่าเริ่มต้นจะเป็นออบเจ็กต์หน้าต่าง และในโหมดเข้มงวด 'นี่' จะไม่ถูกกำหนดโดยค่าเริ่มต้น
ฟังก์ชันแปรผัน
ฟังก์ชันที่ไม่ทราบจำนวนอาร์กิวเมนต์เรียกว่าฟังก์ชันแปรผัน
มีสองวิธีในการสร้างฟังก์ชันที่ยอมรับอาร์กิวเมนต์จำนวนเท่าใดก็ได้
- วิธีที่ 1 (ES5) :ตามค่าเริ่มต้น ฟังก์ชันจะมีวัตถุ "อาร์กิวเมนต์" ที่มีลักษณะคล้ายอาร์เรย์อยู่ในขอบเขต โดยมีอาร์กิวเมนต์ทั้งหมดที่ส่งผ่านไปยังฟังก์ชัน โดยใช้ดัชนีเราสามารถเข้าถึงข้อโต้แย้ง
- วิธีที่ 2(ES6) :สามารถประกาศฟังก์ชันด้วยพารามิเตอร์สุดท้ายได้โดยใช้ ตัวดำเนินการส่วนที่เหลือ ( … ) สิ่งนี้จะสร้างอาร์เรย์ที่เก็บข้อโต้แย้งตั้งแต่จุดนั้นเป็นต้นไป
พารามิเตอร์เริ่มต้น
มี 2 วิธีในการประกาศพารามิเตอร์เริ่มต้นใน JavaScript
- วิธีที่ 1 (ES5) :
- วิธีที่ 2(ES6) :
โทร นำไปใช้ และผูกมัด
สิ่งเหล่านี้เป็นฟังก์ชันในตัวของ Javascript ซึ่งช่วยในการจัดเตรียมข้อโต้แย้งและ "สิ่งนี้" แตกต่างออกไป
แทนที่จะอธิบาย ตัวอย่างจะมีประโยชน์มากกว่าในการทำความเข้าใจการเรียกใช้และการใช้ฟังก์ชัน
Bind คล้ายกับ call & Apply ซึ่งใช้เพื่อตั้งค่า `this` ของฟังก์ชันนี้ให้กับอ็อบเจ็กต์เฉพาะอย่างชัดเจน แต่มันมีพฤติกรรมแตกต่างออกไปมาก อาร์กิวเมนต์แรกที่จะผูก () คือค่า "นี้" สำหรับฟังก์ชันใหม่และอาร์กิวเมนต์ที่เหลือแสดงถึงพารามิเตอร์ที่มีชื่อ
การสมัครบางส่วน
คล้ายกับวิธีการ Currying มาก แต่ใช้เพียงอาร์กิวเมนต์เดียวเท่านั้น
ส่วนใหญ่แล้วจะใช้การแกงแทนบางส่วนเนื่องจากมีลักษณะที่คาดเดาไม่ได้สูง
