ฟังก์ชั่นลูกศรของ JavaScript คืออะไร?

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

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

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

(function () {
   //...
});

ไม่สามารถเข้าถึงฟังก์ชันนิรนามได้หลังจากสร้างครั้งแรก ดังนั้น คุณมักจะต้องกำหนดให้กับตัวแปร

ตัวอย่างเช่น ต่อไปนี้แสดงฟังก์ชันที่ไม่ระบุตัวตนที่แสดงข้อความ:

let show = function() {
    console.log('Anonymous function');
};

show();

เนื่องจากเราจำเป็นต้องเรียกใช้ฟังก์ชันนิรนามในภายหลัง เราจึงกำหนดฟังก์ชันนิรนามให้กับshow ตัวแปร

เนื่องจากการกำหนดฟังก์ชันนิรนามทั้งหมดให้กับตัวแปร show ทำให้เกิดนิพจน์ที่ถูกต้อง คุณจึงไม่ต้องล้อมฟังก์ชันนิรนามไว้ใน()วงเล็บ

ในทางปฏิบัติ คุณมักจะส่งฟังก์ชันนิรนามเป็นอาร์กิวเมนต์ไปยังฟังก์ชันอื่นๆ ตัวอย่างเช่น:

setTimeout(function() {
    console.log('Execute later after 1 second')
}, 1000);

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

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

โดยปกติแล้ว ฟังก์ชัน Arrow จะสั้นกว่าและบางครั้งก็ทำงานแตกต่างไปเมื่อเปรียบเทียบกับฟังก์ชันจาวาสคริปต์แบบดั้งเดิม

ฟังก์ชัน Arrow ไม่ได้รับการสนับสนุนสำหรับInternet Explore

เรากำลังใช้สัญลักษณ์ '= และ >' เมื่อเรากำหนดฟังก์ชันลูกศร ดูเหมือนลูกศร เราจึงเรียกฟังก์ชันเหล่านั้นว่าฟังก์ชันลูกศร

let show = () => console.log('Anonymous function');

เราสามารถเขียนฟังก์ชันปกติเป็นฟังก์ชันลูกศรได้แบบนี้

let add = function (a, b) { // Normal Fucntion
    return a + b;
};
let add = (a, b) => a + b;  // Arrow Fucntion

• หากคุณมี 2 อาร์กิวเมนต์ คุณสามารถใช้วงเล็บเป็นฟังก์ชันปกติได้:

let add = function (a, b) { // Normal Fucntion
    return a + b;
};



let add = (a, b) => a + b;  // Arrow Fucntion

let square = function(x){ // Normal Fucntion
    return x * x;
}


let square = (x) => { // Arrow fucntion with parenthesis
    return x * x;
}

let square = x => { // You can modify it as like this
    return x * x;
}

let square = x => (  // Furthermore you can modify by removing return keyword
     x * x   // Replace {} with  ()
);

let square = x => x * x; // Furthermore you can modify

let test  = () => console.log('No Arguments');

ในการลบปัญหานี้ เราต้องใส่วงเล็บ

ตอนนี้จาวาสคริปต์รู้ว่าเป็นค่าส่งคืนและไม่ใช่แค่วงเล็บปีกกาสำหรับเนื้อหาของฟังก์ชัน

ฟังก์ชัน Arrow ไม่มีการเชื่อมโยงกับthis, arguments, หรือsuperและไม่ควรใช้เป็นเมธอด

• นิพจน์ฟังก์ชันลูกศรควรใช้สำหรับฟังก์ชันที่ไม่ใช่เมธอดเท่านั้น เนื่องจากไม่มีฟังก์ชันของตัวthisเอง

const person ={
    name: "Kasun",
    action: function(){
        console.log(this.name, "says Hi");
    }
}

person.action();

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

const person ={
    name: "Kasun",
    action: () => console.log(this.name, "says Hi")
}

person.action();

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

ด้วยเหตุผลที่คล้ายกัน เมธอด call(), apply(), และbind()เมธอดไม่มีประโยชน์เมื่อเรียกใช้ฟังก์ชันลูกศร เนื่องจากฟังก์ชันลูกศรสร้างขึ้นthisตามขอบเขตที่ฟังก์ชันลูกศรกำหนดไว้ภายใน และthisค่าจะไม่เปลี่ยนแปลงตามวิธีการเรียกใช้ฟังก์ชัน

• ไม่สามารถใช้ฟังก์ชันลูกศรเป็นตัวสร้างและจะส่งข้อผิดพลาดเมื่อเรียกใช้newด้วย พวกเขายังไม่มีprototypeทรัพย์สิน

const Foo = () => {};
const foo = new Foo(); // TypeError: Foo is not a constructor
console.log("prototype" in Foo); // false

นี่คือทั้งหมดที่เกี่ยวกับฟังก์ชัน Arrow และฉันหวังว่าคุณจะเข้าใจฟังก์ชันลูกศรอย่างสมบูรณ์ พบกันในบทช่วยสอนอื่น

ขอบคุณ!