JavaScript Function Arrow

ฟังก์ชันทิ้งหลักฐานถูกเสนอให้ใช้ใน ES6

ฟังก์ชันทิ้งหลักฐานทำให้เราสามารถเขียนฟังก์ชันที่สั้นลง

การเขียน

let myFunction = (a, b) => a * b;

ลองทดสอบด้วยตัวเอง

ก่อนหน้านี้

hello = function() {
  return "Hello World!";
}

ลองทดสอบด้วยตัวเอง

หลังจากใช้ฟังก์ชันทิ้งหลักฐาน

hello = () => {
  return "Hello World!";
}

ลองทดสอบด้วยตัวเอง

แท้จริงแล้วมันยังสั้นลงมาแล้ว! ถ้าฟังก์ชันมีเพียงคำสั่งเดียวและคำสั่งนั้นกลับค่า คุณสามารถละเลยกล่องวงเล็บและ return คำว่า

ฟังก์ชันทิ้งหลักฐานมีค่ากลับคำสั่งโดยมาตรฐาน

hello = () => "Hello World!";

ลองทดสอบด้วยตัวเอง

หมายเหตุ：นี่มีผลบวกเฉพาะเมื่อฟังก์ชันมีเพียงแค่คำสั่งเดียว

ถ้ามีตัวแปร คุณจะต้องส่งมอบให้กับกล่องวงเล็บ

ฟังก์ชันทิ้งหลักฐานที่มีตัวแปร

hello = (val) => "Hello " + val;

ลองทดสอบด้วยตัวเอง

ในความเป็นจริง ถ้ามีเพียงหนึ่งตัวแปร คุณก็สามารถละเลยกล่องวงเล็บได้

ฟังก์ชันทิ้งหลักฐานที่ไม่มีกล่องวงเล็บ

hello = val => "Hello " + val;

ลองทดสอบด้วยตัวเอง

this แล้วจะทำอย่างไร?

เมื่อเทียบกับฟังก์ชันทั่วไป this ในการจัดการ

โดยทั่วไป การใช้ฟังก์ชันทิ้งหลักฐานจะทำให้มีความแตกต่างต่อการจัดการ this ที่ถูกจับบังคับ

ในฟังก์ชันทั่วไป this หมายถึงวัตถุที่เรียกฟังก์ชันนี้ สามารถเป็น window และ document หรือปุ่ม หรือสิ่งอื่นๆ

สำหรับฟังก์ชันทิ้งหลักฐานthis คำว่าคีย์วอร์ดเฉพาะว่าตัวแปรที่เรียกใช้ประกาศฟังก์ชันทิ้งหลักฐาน

ให้เราดูตัวอย่างสองตัวเพื่อเข้าใจความแตกต่าง

ทั้งสองตัวอย่างนี้เรียกเมธอดสองครั้ง ครั้งแรกเมื่อหน้าเว็บโหลด ครั้งที่สองเมื่อผู้ใช้กดปุ่ม

ตัวอย่างแรกใช้ฟังก์ชันทั่วไป ตัวอย่างที่สองใช้ฟังก์ชันทิ้งหลักฐาน

ผลลัพธ์ที่แสดงให้เห็นว่าตัวอย่างแรกคืนค่าสองวัตถุที่แตกต่างกัน (window และ button) ตัวอย่างที่สองคืนค่า window สองครั้ง เพราะวัตถุ window คือ 'เจ้าของ' ของฟังก์ชัน

ตัวอย่าง

สำหรับฟังก์ชันทั่วไป，คำว่า this หมายถึงวัตถุที่เรียกฟังก์ชันนี้

// ฟังก์ชันทั่วไป：
hello = function() {
  document.getElementById("demo").innerHTML += this;
}
// วัตถุ window โรงรับฟังก์ชันนี้:
window.addEventListener("load", hello);
// วัตถุ button โรงรับฟังก์ชันนี้:
document.getElementById("btn").addEventListener("click", hello);

ลองทดสอบด้วยตัวเอง

ตัวอย่าง

ใช้ฟังก์ชันทิ้งหลักฐาน this แสดงว่าเจ้าของฟังก์ชัน:

// ฟังก์ชันแบบ arrow:
hello = () => {
  document.getElementById("demo").innerHTML += this;
}
// วัตถุ window โรงรับฟังก์ชันนี้:
window.addEventListener("load", hello);
// วัตถุ button โรงรับฟังก์ชันนี้:
document.getElementById("btn").addEventListener("click", hello);

ลองทดสอบด้วยตัวเอง

จากการใช้ function อย่างไรที่คุณจำได้เหล่านี้ บางครั้งการปฏิบัติของ function ตามปกติอาจเป็นสิ่งที่คุณต้องการ แต่ถ้าไม่เป็น ใช้ function แบบ arrow

การสนับสนุนบราวเซอร์

ตารางด้านล่างบอกถึงเวอร์ชั่นบราวเซอร์ที่สนับสนุน function แบบ arrow อย่างเต็มที่:

Chrome IE Firefox Safari Opera
Chrome 45 Edge 12 Firefox 22 Safari 10 Opera 32
กันยายน 2015 กรกฎาคม 2015 พฤษภาคม 2013 กันยายน 2016 กันยายน 2015