นิพจน์ของฟังก์ชัน

นิพจน์ของฟังก์ชันคือฟังก์ชัน สร้างขึ้นในที่ที่ต้องการนิพจน์ คุณจะต้องใช้งาน นิพจน์เป็นค่าที่กําหนดให้กับตัวแปร แม้ว่าการประกาศฟังก์ชัน ต้องใช้ชื่อเสมอ คุณสามารถใช้นิพจน์ฟังก์ชันเพื่อสร้างแบบไม่ระบุตัวตน โดยละเว้นตัวระบุและตามหลังคีย์เวิร์ด function ด้วยแอตทริบิวต์ คู่วงเล็บที่มีพารามิเตอร์ที่ไม่บังคับ:

const myVariable = function() { };

จากนั้นคุณสามารถเรียกส่วนขยายเหล่านั้น นิพจน์ฟังก์ชันที่ใช้ตัวระบุของตัวแปร

const myVariable = function() {
    console.log( "This is my function." );
};

myVariable();
> "This is my function."

คุณยังใช้นิพจน์ฟังก์ชันเพื่อสร้างฟังก์ชันที่มีชื่อโดยใช้ไวยากรณ์ได้ด้วย คล้ายกับการประกาศฟังก์ชัน

const myVariable = function myFunction() {
    console.log( "This is my function." );
};

myVariable();
> "This is my function."

อย่างไรก็ตาม นิพจน์ฟังก์ชันที่มีชื่ออาจต่างจากการประกาศฟังก์ชัน เข้าถึงได้โดยชื่อฟังก์ชันภายในตัวฟังก์ชันเท่านั้น:

const myVariable = function myFunction() {
  console.log( `I'm a ${ typeof myFunction }.`);
};

typeof myFunction;
> "undefined"

typeof myVariable;
> "function"

myVariable();
> "I'm a function."

ชื่อที่เชื่อมโยงกับนิพจน์ฟังก์ชันจะมีประโยชน์ในการแก้ไขข้อบกพร่องเป็นหลัก นิพจน์ฟังก์ชันที่มีชื่อยังเรียกตัวเองแบบซ้ำซ้อนได้ด้วย แม้ว่านี่จะไม่ใช่กรณีการใช้งานที่พบบ่อยนักในการพัฒนาสมัยใหม่

const myVariable = function myFunction() {
    console.log( "One second elapsed." );
    setTimeout( myFunction, 1000 );
};

setTimeout( myVariable, 1000 );
> "One second elapsed."
> "One second elapsed."
> "One second elapsed."
…

นิพจน์ฟังก์ชันลูกศร

นิพจน์ฟังก์ชันลูกศร (มักเรียกว่า "ฟังก์ชันลูกศร" หรือ "ฟังก์ชันแลมดา" ซึ่งไม่ค่อยได้ใช้) ได้รับการนําเสนอใน ES6 เพื่อมอบไวยากรณ์ที่กระชับในการสร้างนิพจน์ฟังก์ชันนิรนามที่มีลักษณะการทํางานที่ไม่ซ้ำกัน

คุณสามารถสร้างฟังก์ชันลูกศรได้ในทุกที่ที่ต้องการ เช่น เป็นค่าที่กำหนดให้กับตัวแปร ในรูปแบบที่ใช้กันมากที่สุด จะมีลูกศร ประกอบด้วยวงเล็บที่ตรงกันซึ่งมีเลข 0 ขึ้นไป ลูกศรที่ประกอบด้วยเครื่องหมายเท่ากับเดี่ยวและเครื่องหมายมากกว่า (=>) และวงเล็บปีกกาที่ตรงกันซึ่งมีส่วนเนื้อหาของฟังก์ชัน:

const myFunction = () => {};

คุณสามารถทำให้ไวยากรณ์มีความกะทัดรัดมากยิ่งขึ้นได้ภายใต้เงื่อนไขบางประการ หากคุณ โดยใช้เพียงพารามิเตอร์เดียว คุณใส่วงเล็บเริ่มต้นไม่ได้

const myFunction = myParameter => {};

เมื่อต้องการให้เนื้อหาของฟังก์ชันแสดงผลค่าของนิพจน์เดียว ไม่ได้ล้อมรอบส่วนเนื้อหาของฟังก์ชันการทำงานในวงเล็บปีกกาหรือ ต้องระบุคีย์เวิร์ด return:

const myFunction = () => 2 + 2

myFunction()
> 4

ฟังก์ชันลูกศรมีความพิเศษตรงที่ไม่มีบริบทของตนเองสำหรับค่า arguments หรือ this แต่จะรับค่าทั้ง 2 ประเภทแทน จากฟังก์ชันลูกศร สภาพแวดล้อมที่เข้ารหัสการเงินซึ่งอยู่ใกล้ที่สุด ฟังก์ชันที่รวมอยู่ซึ่งให้บริบทเหล่านั้น

function myParentFunction() {
    this.myProperty = true;
    let myFunction = () => {
            console.log( this );
    }
    myFunction();
};

let myInstance = new myParentFunction();
> Object { myProperty: true }

เรียกใช้ฟังก์ชันลูกศร

ฟังก์ชันลูกศรไม่เชื่อมโยงอาร์กิวเมนต์ในลักษณะเดียวกันกับ ฟังก์ชันประเภทอื่นๆ วัตถุ arguments ในเนื้อหาของฟังก์ชันลูกศรจะรับค่าจาก ฟังก์ชันลูกศรอยู่ใกล้ที่สุด สภาพแวดล้อมโดยรอบของคลังเสียง:

function myFunction() {
    let myArrowFunction = () => {
            console.log( arguments[ 0 ] );
    }
    myArrowFunction( true );
};

myFunction( false );
> false

ในตัวอย่างนี้ ฟังก์ชันภายนอกที่มีการเรียกด้วยอาร์กิวเมนต์ false จะเรียกฟังก์ชัน ฟังก์ชันลูกศรภายในที่มีอาร์กิวเมนต์ true เนื่องจากออบเจ็กต์ arguments ภายในฟังก์ชันลูกศรจะแทนค่าการเชื่อมโยงในฟังก์ชันด้านนอก ฟังก์ชันภายในจะบันทึก false ของฟังก์ชันภายนอก

หากไม่มีออบเจ็กต์ arguments ที่จะรับค่าจากบริบทหลัก ระบบจะไม่กำหนดออบเจ็กต์ arguments ของฟังก์ชันลูกศร และพยายามเข้าถึงออบเจ็กต์ดังกล่าวจะทำให้เกิดข้อผิดพลาด

let myArrowFunction = () => {
    console.log(arguments);
};
myArrowFunction( true );
> Uncaught ReferenceError: arguments is not defined

นิพจน์ฟังก์ชันที่เรียกใช้ทันที (IIFE)

นิพจน์ฟังก์ชันที่เรียกใช้ทันที (IIFE) หรือบางครั้งเรียกว่า "ฟังก์ชันนิรนามที่ดำเนินการเอง" เป็นนิพจน์ฟังก์ชันที่เรียก ทันทีเมื่อกำหนด IIFE ใช้นิพจน์ฟังก์ชันที่สร้างโดย ล้อมฟังก์ชันไว้ในโอเปอเรเตอร์การจัดกลุ่ม จากนั้นวงเล็บคู่ที่ 2 ที่ตรงกันจะเรียกใช้ฟังก์ชันนั้นโดยทันที ตามคำจำกัดความของฟังก์ชัน หรือตามทันทีการจัดกลุ่ม หากใช้ฟังก์ชันมาตรฐาน ก็ไม่มีข้อแตกต่างในทางปฏิบัติ ระหว่าง 2 แนวทางนี้

(function() {
    console.log( "IIFE.")
    }
)();
> "IIFE."

(function() {
    console.log( "IIFE.")
    }
());
> "IIFE."

ตัวอย่างแรกเรียกนิพจน์ของฟังก์ชันที่มีการจัดกลุ่ม ตัวอย่างที่ 2 เรียกการประกาศฟังก์ชันภายในโอเปอเรเตอร์การจัดกลุ่ม และผลลัพธ์สุดท้าย จากนั้นจะประเมินเป็นนิพจน์ที่จัดกลุ่ม ผลลัพธ์จะเหมือนกันใน

อย่างไรก็ตาม การดำเนินการจะแตกต่างกันเมื่อ IIFE เป็นฟังก์ชันลูกศร ด้วยวิธีนี้ วงเล็บที่ใช้เรียกฟังก์ชันจะต้องอยู่นอกการจัดกลุ่ม เนื่องจากฟังก์ชันลูกศรในตัวเองไม่ใช่นิพจน์ แต่ต้อง สร้างขึ้นในบริบทที่ควรมีนิพจน์ กำลังพยายามโทรหา ฟังก์ชันลูกศรจากภายในขอบเขตของโอเปอเรเตอร์การจัดกลุ่มจะหมายถึง เรียกใช้ฟังก์ชันลูกศรที่ยังไม่ได้สร้างขึ้นในบริบทของ นิพจน์:

( () => {
    console.log( "IIFE." );
}() );
> Uncaught SyntaxError: missing ) in parenthetical

เนื่องจากโอเปอเรเตอร์การจัดกลุ่มต้องการนิพจน์ ฟังก์ชันลูกศรภายใน มีการกำหนดไว้ โดยให้วงเล็บที่อยู่ตามหลังเรียกฟังก์ชัน นิพจน์:

( () => {
    console.log( "IIFE." );
} )();
> "IIFE."

แอปพลิเคชันเดิมที่ใช้ IIFE บ่อยๆ เพื่อจัดการขอบเขต โดยเฉพาะเพื่อหลีกเลี่ยงการทำให้ขอบเขตส่วนกลางรกด้วยตัวแปรระดับฟังก์ชันและการประกาศฟังก์ชัน ก่อนที่จะมีการเปิดตัวการกำหนดขอบเขตบล็อกใน ES6 แนวทางปฏิบัติทั่วไปคือการรวมสคริปต์ทั้งหมดไว้ใน IIFE เพื่อป้องกันไม่ให้สับสนกับขอบเขตส่วนกลางโดยไม่ตั้งใจ

ทดสอบความเข้าใจ