ฟังก์ชั่นลูกศรเป็นหนึ่งในการอัปเดตที่ได้รับความนิยมมากที่สุดใน eCmascript 6 มันแนะนำไวยากรณ์ใหม่เพื่อกำหนดฟังก์ชั่นโดยใช้ "ลูกศร" (=>) มัน ... มันเป็นบังเกอร์ ~ ความแตกต่างหลักระหว่างฟังก์ชั่นลูกศรและฟังก์ชั่น JavaScript แบบดั้งเดิมมีดังนี้:
1. เกี่ยวข้องกับสิ่งนี้ ค่าของสิ่งนี้อยู่ในตัวขึ้นอยู่กับตำแหน่งที่กำหนดฟังก์ชันลูกศรไม่ใช่บริบทที่ฟังก์ชั่นลูกศรถูกดำเนินการ
2. ใหม่ไม่พร้อมใช้งาน ฟังก์ชั่นลูกศรไม่สามารถใช้คำหลักใหม่เพื่อยกตัวอย่างวัตถุมิฉะนั้นจะมีการรายงานข้อผิดพลาด
3. สิ่งนี้ไม่เปลี่ยนรูป สิ่งนี้อยู่ในตัวเพื่อฟังก์ชั่นและเป็นค่าคงที่ในสภาพแวดล้อมการดำเนินการทั้งหมดภายในร่างกายฟังก์ชั่น
4. ไม่มีอาร์กิวเมนต์วัตถุ พารามิเตอร์ที่เข้ามาไม่สามารถเข้าถึงได้ผ่านวัตถุอาร์กิวเมนต์ สามารถทำได้โดยใช้การตั้งชื่อที่ชัดเจนหรือคุณสมบัติ ES6 ใหม่อื่น ๆ
การดำรงอยู่ของความแตกต่างเหล่านี้มีความสมเหตุสมผล ก่อนอื่นการเชื่อมโยงกับสิ่งนี้เป็นหนึ่งในแหล่งที่มาทั่วไปของข้อผิดพลาด JavaScript มันง่ายที่จะสูญเสียค่าในตัวของฟังก์ชั่นหรือเพื่อให้ได้ผลลัพธ์ที่ไม่คาดคิด ประการที่สองการ จำกัด ฟังก์ชั่นลูกศรในการใช้การอ้างอิงนี้มีผลประโยชน์ต่อการประมวลผลการเพิ่มประสิทธิภาพของเครื่องยนต์ JavaScript
1. ไวยากรณ์
ไวยากรณ์ของฟังก์ชั่นลูกศรนั้นง่ายกำหนดตัวแปรอิสระจากนั้นลูกศรและฟังก์ชั่น ตัวแปรอิสระและหัวข้อสามารถใช้ในรูปแบบที่กระชับมากขึ้นเนื่องจากการใช้งานที่แตกต่างกัน ตัวอย่างต่อไปนี้คือฟังก์ชันลูกศรที่ผ่านพารามิเตอร์และส่งคืนค่า
การคัดลอกรหัสมีดังนี้:
var retrict =>> ค่า;
// เทียบเท่ากับ:
var rechult = function (value) {
ค่าส่งคืน;
-
จะเห็นได้ว่าคุณสามารถเขียนพารามิเตอร์ได้โดยผ่านโดยไม่ต้องเพิ่มวงเล็บ ลูกศรชี้ไปที่ร่างกายฟังก์ชั่น แต่ร่างกายฟังก์ชั่นเป็นเพียงคำสั่งคืนง่าย ๆ ดังนั้นจึงไม่จำเป็นต้องเพิ่มวงเล็บปีกกา หลังจากสร้างฟังก์ชั่นแล้วจะได้รับมอบหมายให้สะท้อนและอ้างอิง
หากจำเป็นต้องส่งพารามิเตอร์หลายพารามิเตอร์ควรเพิ่มวงเล็บ ตัวอย่างเช่น:
การคัดลอกรหัสมีดังนี้:
var sum = (num1, num2) => num1 + num2;
// เทียบเท่ากับ:
var sum = function (num1, num2) {
ส่งคืน num1 + num2;
-
วิธีการรวม () คือการเพิ่มพารามิเตอร์สองตัวและส่งผลกลับ ความแตกต่างเพียงอย่างเดียวจากตัวอย่างก่อนหน้านี้คือพารามิเตอร์สองพารามิเตอร์จะถูกส่งผ่านดังนั้นพวกเขาจึงต้องปิดล้อมในวงเล็บ มันเป็นเหมือนฟังก์ชั่นดั้งเดิมโดยมีเครื่องหมายจุลภาคในวงเล็บแยกออกเป็นพารามิเตอร์ ในทำนองเดียวกันหากฟังก์ชั่นไม่จำเป็นต้องส่งผ่านพารามิเตอร์ก็ควรถูกแทนที่ด้วยวงเล็บว่าง
การคัดลอกรหัสมีดังนี้: var sum = () => 1 + 2;
// เทียบเท่ากับ:
var sum = function () {
กลับ 1 + 2;
-
หากคุณต้องการใช้ร่างกายฟังก์ชั่นมาตรฐานหรืออาจมีคำสั่งเพิ่มเติมที่จะดำเนินการในร่างกายฟังก์ชั่นล้อมรอบร่างกายฟังก์ชั่นในวงเล็บปีกกาและกำหนดค่าการส่งคืนอย่างชัดเจน ตัวอย่างเช่น:
การคัดลอกรหัสมีดังนี้:
var sum = (num1, num2) => {return num1 + num2; -
// เทียบเท่ากับ:
var sum = function (num1, num2) {
ส่งคืน num1 + num2;
-
ชิ้นส่วนในวงเล็บปีกกานั้นเทียบเท่ากับฟังก์ชั่นดั้งเดิมยกเว้นว่าพารามิเตอร์อาร์กิวเมนต์ไม่พร้อมใช้งาน
เพราะวงเล็บปีกกาเป็นโลโก้ของร่างกายของฟังก์ชั่น หากฟังก์ชั่นลูกศรต้องการส่งคืนวัตถุที่กำหนดเองจะต้องใส่วัตถุไว้ในวงเล็บก่อน ตัวอย่างเช่น:
การคัดลอกรหัสมีดังนี้:
var getTempItem = id => ({
id: id,
ชื่อ: "อุณหภูมิ"
-
// เทียบเท่ากับ:
var getTempItem = function (id) {
กลับ {
id: id,
ชื่อ: "อุณหภูมิ"
-
-
ดังที่เห็นได้จากตัวอย่างข้างต้นการใช้วงเล็บเพื่อรวมวงเล็บหยิกคือคำจำกัดความของวัตถุไม่ใช่ร่างกายของฟังก์ชั่น
2. ใช้
หนึ่งในข้อผิดพลาดที่พบบ่อยที่สุดใน JavaScript คือการเชื่อมโยงนี้ภายในฟังก์ชั่น เนื่องจากสิ่งนี้ใช้ค่าตามสภาพแวดล้อมการดำเนินการในปัจจุบันของฟังก์ชั่นจึงจะทำให้เกิดความเข้าใจผิดเมื่อโทรส่งผลให้เกิดผลกระทบต่อวัตถุที่ไม่เกี่ยวข้องอื่น ๆ ดูตัวอย่างต่อไปนี้:
การคัดลอกรหัสมีดังนี้:
var pageHandler = {
ID: "123456"
init: function () {
document.addeventListener ("คลิก" ฟังก์ชั่น (เหตุการณ์) {
this.dosomething (event.type); // ข้อผิดพลาด
}, เท็จ);
-
Dosomething: ฟังก์ชั่น (ประเภท) {
console.log ("การจัดการ" + type + "สำหรับ" + this.id);
-
-
ในรหัสนี้ความตั้งใจดั้งเดิมคือการให้เมธอด init () ของ PageHandler ถูกใช้เพื่อสร้างการโต้ตอบและเรียกสิ่งนี้ dosomething () ในฟังก์ชั่นตัวจัดการเหตุการณ์คลิก อย่างไรก็ตามรหัสไม่ได้ดำเนินการตามความตั้งใจในการออกแบบดั้งเดิม ที่รันไทม์สิ่งนี้ชี้ไปที่วัตถุทั่วโลกแทนที่จะเป็น pageHandler ซึ่งเป็นสาเหตุของสิ่งนี้ dosomething () การโทรเพื่อทำให้ไม่ถูกต้องและเกิดข้อผิดพลาดเนื่องจากวิธีการ Dosomething ไม่มีอยู่ในวัตถุทั่วโลก
แน่นอนคุณสามารถใช้ bind () ในฟังก์ชั่นเพื่อเชื่อมโยงสิ่งนี้อย่างชัดเจนกับ PageHandler ดูด้านล่าง:
การคัดลอกรหัสมีดังนี้:
var pageHandler = {
ID: "123456"
init: function () {
document.addeventListener ("คลิก", (ฟังก์ชั่น (เหตุการณ์) {
this.dosomething (event.type);
}). ผูก (นี่), เท็จ);
-
Dosomething: ฟังก์ชั่น (ประเภท) {
console.log ("การจัดการ" + type + "สำหรับ" + this.id);
-
-
แม้ว่ามันจะดูแปลก ๆ แต่การดำเนินการรหัสนั้นสอดคล้องกับความคาดหวัง โดยการเรียกใช้ฟังก์ชั่นการผูก (นี้) ฟังก์ชั่นใหม่ที่เกี่ยวข้องกับสิ่งที่มีอยู่นี้ถูกสร้างขึ้นซึ่งหมายความว่าชั้นอื่นจะรวมอยู่เพื่อให้บรรลุวัตถุประสงค์
เนื่องจากฟังก์ชั่นลูกศรรองรับการเชื่อมโยงนี้แล้วจึงมีความสดชื่นมากขึ้นในการใช้ฟังก์ชั่นลูกศรที่นี่ ดูตัวอย่างต่อไปนี้:
การคัดลอกรหัสมีดังนี้:
var pageHandler = {
ID: "123456"
init: function () {
document.addeventListener ("คลิก"
เหตุการณ์ => this.dosomething (event.type), false);
-
Dosomething: ฟังก์ชั่น (ประเภท) {
console.log ("การจัดการ" + type + "สำหรับ" + this.id);
-
-
ฟังก์ชั่นการจัดการเหตุการณ์ในอินสแตนซ์นี้เรียกฟังก์ชันลูกศรของสิ่งนี้ dosomething () ค่าของสิ่งนี้คือค่าของ init นี้ () ดังนั้นจึงเทียบเท่ากับการผูก ()
ลักษณะที่กระชับและกระชับของฟังก์ชั่นลูกศรยังทำให้เป็นตัวเลือกที่เหมาะสำหรับตัวแปรอิสระฟังก์ชั่นอื่น ๆ ตัวอย่างเช่นในการใช้ตัวเปรียบเทียบแบบกำหนดเองเพื่อจัดเรียงอาร์เรย์บน ES5 ดูรหัสทั่วไปด้านล่าง:
การคัดลอกรหัสมีดังนี้:
var result = value.sort (ฟังก์ชั่น (a, b) {
กลับ A - B;
-
ตัวอย่างข้างต้นใช้ไวยากรณ์จำนวนมากเพื่อใช้การดำเนินการอย่างง่าย หากคุณใช้ฟังก์ชั่นลูกศรคุณสามารถเขียนโค้ดที่ละเอียดมาก:
การคัดลอกรหัสมีดังนี้:
var result = value.sort ((a, b) => a - b);
การเรียงลำดับ/แผนที่/ลดวิธีการของอาร์เรย์สนับสนุนฟังก์ชั่นการโทรกลับ การใช้ฟังก์ชั่นลูกศรสามารถทำให้กระบวนการเขียนง่ายขึ้นและปลดปล่อยมือของคุณให้ทำในสิ่งที่คุณต้องการ
3. อาหารเสริม
ฟังก์ชั่นลูกศรแตกต่างจากฟังก์ชั่นดั้งเดิม แต่ก็ยังมีลักษณะร่วมกัน ตัวอย่างเช่น:
1. การดำเนินการ typeof บนฟังก์ชันลูกศรจะส่งคืน "ฟังก์ชั่น"
2. ฟังก์ชั่นลูกศรยังคงเป็นอินสแตนซ์ของฟังก์ชันดังนั้นวิธีการดำเนินการของอินสแตนซ์ของอินสแตนซ์จึงสอดคล้องกับฟังก์ชั่นดั้งเดิม
3. call/apply/bind วิธีการยังคงใช้กับฟังก์ชั่นลูกศร แต่ถึงแม้ว่าวิธีการเหล่านี้จะถูกเรียกให้ขยายขอบเขตปัจจุบัน แต่สิ่งนี้จะไม่เปลี่ยนแปลง
ความแตกต่างที่ใหญ่ที่สุดระหว่างฟังก์ชั่นลูกศรและฟังก์ชั่นดั้งเดิมคือการดำเนินการใหม่ถูกปิดใช้งาน
4. บทสรุป
ฟังก์ชั่นลูกศรเป็นคุณสมบัติใหม่ของ ECMASCRIPT 6 ที่ดึงดูดความสนใจเป็นอย่างมากและได้รับการปรับให้เหมาะสมอย่างต่อเนื่อง มันเป็นแนวโน้มทั่วไปที่จะใช้ไวยากรณ์สั้น ๆ เพื่อกำหนดกระบวนการเขียนฟังก์ชั่นหรือข้อความและพวกเขาจะอยู่ยงคงกระพันอย่างแน่นอนและไม่มีใครสามารถหยุดพวกเขาได้ การเชื่อมโยงกับคำหลักนี้ทำให้นักพัฒนาไม่รำคาญอีกต่อไปและปรับให้เหมาะสมเพื่อปรับปรุงประสิทธิภาพผ่านเอ็นจิ้น JavaScript เมื่อพูดถึงสิ่งนี้เพื่อนของฉันกระหายน้ำอยู่แล้ว หากคุณต้องการลองใช้ฟังก์ชั่นลูกศรเพียงเปิด Firefox เวอร์ชันล่าสุด