ตอบสนองฟังก์ชั่นลูกศร ES6
ฟังก์ชั่นลูกศร
ฟังก์ชันลูกศรช่วยให้เราเขียนไวยากรณ์ของฟังก์ชันที่สั้นลงได้:
ก่อน:
hello = function() {
return "Hello World!";
}
ด้วยฟังก์ชันลูกศร:
hello = () => {
return "Hello World!";
}
มันสั้นลง! ถ้าฟังก์ชันมีเพียงหนึ่งคำสั่ง และคำสั่งส่งกลับค่า คุณสามารถลบวงเล็บและ
คีย์เวิร์ดreturn
:
ฟังก์ชันลูกศรคืนค่าตามค่าเริ่มต้น:
hello = () => "Hello World!";
หมายเหตุ:ใช้งานได้ก็ต่อเมื่อฟังก์ชันมีคำสั่งเดียวเท่านั้น
หากคุณมีพารามิเตอร์ คุณส่งพารามิเตอร์เหล่านั้นในวงเล็บ:
ฟังก์ชั่นลูกศรพร้อมพารามิเตอร์:
hello = (val) => "Hello " + val;
อันที่จริง หากคุณมีพารามิเตอร์เพียงตัวเดียว คุณสามารถข้ามวงเล็บได้เช่นกัน:
สิ่งที่เกี่ยวกับthis
?
การจัดการthis
กับฟังก์ชันลูกศรก็แตกต่างกันเมื่อเทียบกับฟังก์ชันปกติ
กล่าวโดยย่อ ด้วยฟังก์ชันลูกศร ไม่มีการผูกมัดของ
this
.
ในฟังก์ชันปกติthis
คีย์เวิร์ดแสดงถึงอ็อบเจ็กต์ที่เรียกใช้ฟังก์ชัน ซึ่งอาจเป็นหน้าต่าง เอกสาร ปุ่ม หรืออะไรก็ได้
ด้วยฟังก์ชันลูกศรthis
คีย์เวิร์ดจะแทนอ็อบเจ็กต์ที่กำหนดฟังก์ชันลูกศรเสมอ
ให้เราดูตัวอย่างสองตัวอย่างเพื่อทำความเข้าใจความแตกต่าง
ทั้งสองตัวอย่างเรียกเมธอดสองครั้ง ครั้งแรกเมื่อเพจโหลด และอีกครั้งเมื่อผู้ใช้คลิกปุ่ม
ตัวอย่างแรกใช้ฟังก์ชันปกติ และตัวอย่างที่สองใช้ฟังก์ชันลูกศร
ผลลัพธ์แสดงให้เห็นว่าตัวอย่างแรกส่งคืนวัตถุสองชิ้นที่แตกต่างกัน (หน้าต่างและปุ่ม) และตัวอย่างที่สองส่งคืนวัตถุส่วนหัวสองครั้ง
ตัวอย่าง
ด้วยฟังก์ชันปกติthis
แทนอ็อบเจ็กต์ที่เรียกใช้ฟังก์ชัน:
class Header {
constructor() {
this.color = "Red";
}
//Regular function:
changeColor = function() {
document.getElementById("demo").innerHTML += this;
}
}
const myheader = new Header();
//The window object calls the function:
window.addEventListener("load", myheader.changeColor);
//A button object calls the function:
document.getElementById("btn").addEventListener("click", myheader.changeColor);
ตัวอย่าง
ด้วยฟังก์ชันลูกศรthis
แสดงถึงวัตถุ Header ไม่ว่าใครจะเรียกใช้ฟังก์ชัน:
class Header {
constructor() {
this.color = "Red";
}
//Arrow function:
changeColor = () => {
document.getElementById("demo").innerHTML += this;
}
}
const myheader = new Header();
//The window object calls the function:
window.addEventListener("load", myheader.changeColor);
//A button object calls the function:
document.getElementById("btn").addEventListener("click", myheader.changeColor);
จดจำความแตกต่างเหล่านี้เมื่อคุณทำงานกับฟังก์ชันต่างๆ บางครั้งพฤติกรรมของฟังก์ชันปกติคือสิ่งที่คุณต้องการ ถ้าไม่ใช่ ให้ใช้ฟังก์ชันลูกศร