JavaScript Arrow Function
ฟังก์ชั่นลูกศรถูกนำมาใช้ใน ES6
ฟังก์ชันลูกศรช่วยให้เราเขียนไวยากรณ์ของฟังก์ชันที่สั้นลงได้:
let myFunction = (a, b) => a * b;
ก่อน:
hello = function() {
return "Hello World!";
}
ด้วยฟังก์ชันลูกศร:
hello = () => {
return "Hello World!";
}
มันสั้นลง! ถ้าฟังก์ชันมีเพียงหนึ่งคำสั่ง และคำสั่งส่งกลับค่า คุณสามารถลบวงเล็บและ
คีย์เวิร์ดreturn
:
ฟังก์ชันลูกศรคืนค่าตามค่าเริ่มต้น:
hello = () => "Hello World!";
หมายเหตุ:ใช้งานได้ก็ต่อเมื่อฟังก์ชันมีคำสั่งเดียวเท่านั้น
หากคุณมีพารามิเตอร์ คุณส่งพารามิเตอร์เหล่านั้นในวงเล็บ:
ฟังก์ชั่นลูกศรพร้อมพารามิเตอร์:
hello = (val) => "Hello " + val;
อันที่จริง หากคุณมีพารามิเตอร์เพียงตัวเดียว คุณสามารถข้ามวงเล็บได้เช่นกัน:
สิ่งที่เกี่ยวกับthis
?
การจัดการthis
กับฟังก์ชันลูกศรก็แตกต่างกันเมื่อเทียบกับฟังก์ชันปกติ
กล่าวโดยย่อ ด้วยฟังก์ชันลูกศร ไม่มีการผูกมัดของ
this
.
ในฟังก์ชันปกติthis
คีย์เวิร์ดแสดงถึงอ็อบเจ็กต์ที่เรียกใช้ฟังก์ชัน ซึ่งอาจเป็นหน้าต่าง เอกสาร ปุ่ม หรืออะไรก็ได้
ด้วยฟังก์ชันลูกศรthis
คีย์เวิร์ดจะแทนอ็อบเจ็กต์ที่กำหนดฟังก์ชันลูกศรเสมอ
ให้เราดูตัวอย่างสองตัวอย่างเพื่อทำความเข้าใจความแตกต่าง
ทั้งสองตัวอย่างเรียกเมธอดสองครั้ง ครั้งแรกเมื่อเพจโหลด และอีกครั้งเมื่อผู้ใช้คลิกปุ่ม
ตัวอย่างแรกใช้ฟังก์ชันปกติ และตัวอย่างที่สองใช้ฟังก์ชันลูกศร
ผลลัพธ์แสดงให้เห็นว่าตัวอย่างแรกส่งคืนวัตถุสองชิ้นที่แตกต่างกัน (หน้าต่างและปุ่ม) และตัวอย่างที่สองส่งคืนวัตถุหน้าต่างสองครั้ง เนื่องจากวัตถุหน้าต่างเป็น "เจ้าของ" ของฟังก์ชัน
ตัวอย่าง
ด้วยฟังก์ชันปกติthis
แสดงถึงอ็อบเจ็กต์ที่เรียกใช้ฟังก์ชัน:
// Regular Function:
hello = function() {
document.getElementById("demo").innerHTML
+= this;
}
// The window object calls the function:
window.addEventListener("load", hello);
// A button object calls the
function:
document.getElementById("btn").addEventListener("click", hello);
ตัวอย่าง
ด้วยฟังก์ชันลูกศรthis
แสดงถึง
เจ้าของฟังก์ชัน:
// Arrow Function:
hello = () => {
document.getElementById("demo").innerHTML
+= this;
}
// The window object calls the function:
window.addEventListener("load", hello);
// A button object calls the
function:
document.getElementById("btn").addEventListener("click", hello);
จดจำความแตกต่างเหล่านี้เมื่อคุณทำงานกับฟังก์ชันต่างๆ บางครั้งพฤติกรรมของฟังก์ชันปกติคือสิ่งที่คุณต้องการ ถ้าไม่ใช่ ให้ใช้ฟังก์ชันลูกศร
รองรับเบราว์เซอร์
ตารางต่อไปนี้กำหนดเบราว์เซอร์รุ่นแรกที่รองรับฟังก์ชั่นลูกศรใน JavaScript อย่างเต็มรูปแบบ:
Chrome 45 | Edge 12 | Firefox 22 | Safari 10 | Opera 32 |
Sep, 2015 | Jul, 2015 | May, 2013 | Sep, 2016 | Sep, 2015 |