ฟังก์ชั่น JavaScript

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

การรู้วิธีการที่แตกต่างกันของการแสดงและการกำหนดฟังก์ชั่นจะเปิดโอกาสให้ การใช้ตรรกะในวิธีที่เหมาะสมที่สุด ใน JavaScript นอกจากนี้คุณอาจตอบคำถามสัมภาษณ์ได้ง่ายขึ้น.

ฟังก์ชั่นการแสดงออก

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

ใส่การประกาศนั้นในนิพจน์ JavaScript (เช่นในการกำหนดหรือการแสดงออกทางคณิตศาสตร์) มันจะกลายเป็น ฟังก์ชัน การแสดงออก.

// ฟังก์ชันประกาศฟังก์ชัน function_name () ; // ฟังก์ชั่นการแสดงออก var function_name = function () ; 

การประกาศ JavaScript ทั้งหมดถูกยกขึ้น (ขยับขึ้นในขอบเขต) ระหว่างการประเมิน ดังนั้นการเขียนการเรียกใช้ฟังก์ชันก่อนการประกาศฟังก์ชันจะไม่เป็นไร (เนื่องจากการประกาศจะถูกย้ายขึ้นอยู่ดี).

function_name (); // การเรียกใช้ฟังก์ชัน [WORKS] function function_name () ; 

อย่างไรก็ตามการแสดงออกของฟังก์ชั่นไม่ได้ถูกยกขึ้นเนื่องจากฟังก์ชั่นเป็นส่วนหนึ่งของการแสดงออกและไม่ใช่การประกาศแบบสแตนด์อะโลน.

function_name (); // การเรียกใช้ฟังก์ชัน [ไม่ทำงาน] var function_name = function () ; 

การเรียกใช้ฟังก์ชั่นการแสดงออกทันที (IIFE)

มันคือการแสดงออกของฟังก์ชั่นรหัสที่ได้รับการดำเนินการทันที (เพียงครั้งเดียวเมื่อมันประเมิน) คุณสามารถสร้างได้โดยเพิ่ม () (ไวยากรณ์ที่ใช้สำหรับเรียกใช้ฟังก์ชัน) ทันทีหลังจากนิพจน์ฟังก์ชัน พวกเขาสามารถไม่ระบุชื่อ (ไม่มีชื่อที่จะเรียกมันด้วย).

ด้านล่างนี้เป็นไวยากรณ์ที่พบบ่อยที่สุดสองแบบในการสร้าง IIFE:

(function optional_function_name () // body ()); 

และ

(ฟังก์ชัน optional_function_name () // body) (); 

วงเล็บที่อยู่รอบ ๆ การประกาศฟังก์ชันจะแปลงเป็นนิพจน์แล้วเพิ่ม () หลังจากเรียกใช้ฟังก์ชัน คุณสามารถใช้วิธีอื่นในการสร้าง IIFE ได้ตราบใดที่คุณเพิ่ม () หลังจากการแสดงออกของฟังก์ชั่น (เช่นด้านล่าง) แต่วิธีการที่ต้องการคือทั้งสองข้างต้น.

// บางวิธีในการสร้าง IIFEs! function () / * … * / (); + function () / * … * / (); ฟังก์ชั่นใหม่ () / * … * /; 

IIFE เหมาะอย่างยิ่งสำหรับการเขียนโค้ดที่ต้องการดำเนินการเพียงครั้งเดียวการกำหนดชื่อการสร้างการปิดการสร้างตัวแปรส่วนตัวและอื่น ๆ อีกมากมาย ด้านล่างเป็นตัวอย่างของการใช้ IIFE.

var page_language = (ฟังก์ชั่น () var lang; // รหัสเพื่อรับภาษาของหน้า return lang;) (); 

รหัสเพื่อให้ภาษาของเพจเรียกใช้งานเพียงครั้งเดียว (โดยเฉพาะหลังจากโหลดหน้าเว็บ) ผลลัพธ์จะถูกเก็บไว้ใน page_language เพื่อใช้ในภายหลัง.

วิธีการ

เมื่อฟังก์ชั่นเป็นคุณสมบัติของวัตถุก็จะเรียกว่าวิธีการ เนื่องจากฟังก์ชั่นเป็นวัตถุฟังก์ชันในฟังก์ชันอื่นจึงเป็นวิธี ด้านล่างเป็นตัวอย่างสำหรับวิธีการภายในวัตถุ.

var calc = add: function (a, b) return a + b, sub: ฟังก์ชั่น (a, b) return a-b console.log (calc.add (1,2)); // 3 console.log (calc.sub (80,2)); // 78 

เพิ่ม และ ย่อย ฟังก์ชั่นเป็นวิธีการของ Calc วัตถุ.

ตอนนี้สำหรับฟังก์ชันภายในตัวอย่างฟังก์ชัน:

ฟังก์ชั่นเพิ่ม (a) function return (b) return a + b; console.log (เพิ่ม (1) (2)) // ผลลัพธ์คือ 3 

ฟังก์ชันที่ไม่ระบุชื่อที่ส่งคืนเป็นวิธีการของฟังก์ชัน เพิ่ม.

หมายเหตุ: เนื่องจากพารามิเตอร์ () ของฟังก์ชั่น เพิ่ม ในตัวอย่างข้างต้นมีให้ใช้งานสำหรับฟังก์ชั่นต่อไปนี้เรียกกระบวนการชนิดนี้เรียกว่า currying.

ก่อสร้าง

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

ฟังก์ชั่นผลไม้ () ชื่อ var, ครอบครัว; // ชื่อวิทยาศาสตร์ & family this.getName = function () return name;; this.setName = ฟังก์ชัน (ค่า) name = value; this.getFamily = function () return family;; this.setFamily = ฟังก์ชัน (ค่า) family = value;  var apple = new Fruit (); apple.setName ("Malus domestica"); apple.setFamily ( "Rosaceae"); var orange = new Fruit (); orange.setName ("ส้มà ??  ?? â ?? ?? sinensis "); orange.setFamily (" Rutaceae "); console.log (orange.getName ()); //" Citrus à ??  ?? â ?? ?? sinensis "console.log (apple.getName ()); //" Malus domestica "console.log (orange.getFamily ()); //" Rutaceae " 

ฟังก์ชั่นลูกศร (มาตรฐาน ES6) [เฉพาะใน Firefox]

นิยามฟังก์ชั่นใหม่จากมาตรฐาน ES6 ให้ไวยากรณ์ที่สั้นลงสำหรับการแสดงออกฟังก์ชั่น ไวยากรณ์คือ

() => / * body * / 

ฟังก์ชั่นตัวอย่างนี้:

var sing = function () console.log ('ร้องเพลง…'); 

เหมือนกับ:

var sing = () => console.log ('ร้องเพลง ... '); 

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

มันมีประโยชน์สำหรับเมื่อคุณต้องการ นี้ ภายในฟังก์ชั่นจะเหมือนกับนอกและไวยากรณ์ที่สั้นกว่าของมันทำให้รหัสสำหรับการเขียนฟังก์ชั่นภายในฟังก์ชั่นรัดกุม (เช่นด้านล่าง)

setInterval (ฟังก์ชั่น () console.log ('ข้อความ'), 1,000); 

เข้าไป

setInterval (() => console.log ('ข้อความ'), 1,000); 

ฟังก์ชันตัวสร้าง (มาตรฐาน ES6) [เฉพาะใน Firefox]

นิยามฟังก์ชั่นใหม่อีกอย่างจากมาตรฐาน ES6 คือฟังก์ชั่นสร้าง ฟังก์ชันตัวสร้างมีความสามารถในการหยุดและดำเนินการต่อ ไวยากรณ์ของมันคือ:

function * function_name ()  

หรือ

function * function_name ()  

ฟังก์ชันตัวสร้างสร้างตัววนซ้ำ ตัววนซ้ำ ต่อไป วิธีการนั้นจะใช้ในการรันรหัสภายในฟังก์ชั่นเครื่องกำเนิดไฟฟ้าจนกระทั่ง ผล ถึงคำค้นหา หลังจากนั้นค่าซ้ำที่ระบุโดย ผล คีย์เวิร์ดถูกส่งคืนโดยฟังก์ชันตัวสร้างและการดำเนินการถูกหยุด.

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

ด้านล่างเป็นตัวอย่างง่ายๆ:

ฟังก์ชัน * generator_func (นับ) สำหรับ (var i = 0; i 
นี่เป็นอีกตัวอย่าง:
 
ฟังก์ชัน * randomIncrement (i) อัตราผลตอบแทน i + 3; ให้ผลฉัน + 5; ให้ผลฉัน + 10; ให้ผลฉัน + 6;  var itr = randomIncrement (4); console.log (. itr.next () มูลค่า); // 7 console.log (itr.next (). value); // 9 console.log (itr.next (). value); // 14 
 
นอกจากนี้ยังมี อัตราผลตอบแทน * expression ซึ่งส่งผ่านค่าไปยังฟังก์ชันตัวสร้างอื่น
 
ฟังก์ชั่น * ผลไม้ (ผลไม้) ผลผลิต * ผัก (ผลไม้); ให้ผลผลิต "องุ่น";  function * veggies (fruit) ให้ผลไม้ + "และผักโขม"; ให้ผลไม้ + "และบรอกโคลี"; ให้ผลไม้ + "และแตงกวา";  var itr = fruits ("Apple"); console.log (. itr.next () มูลค่า); // "Apple และ Spinach" console.log (itr.next (). ค่า); // "Apple และ Broccoli" console.log (itr.next (). ค่า); // "Apple และ Cucumber" console.log (itr.next (). ค่า); // "องุ่น" console.log (itr.next (). value); //ไม่ได้กำหนด 
 
ฟังก์ชันตัวสร้างมีประโยชน์ถ้าคุณต้องการผ่านค่าหนึ่งต่อหนึ่ง ณ จุดที่คุณต้องการในโค้ดโดยหยุดมันชั่วคราวแทนที่จะไปในทิศทางเดียวเหมือนวนลูปผ่านอาร์เรย์.
 
ข้อสรุป
 
ฉันได้รวมรายการอ้างอิงด้านล่างซึ่งคุณจะพบลิงค์ไปยังข้อมูลอ้างอิงและบทความที่มีเนื้อหาเชิงลึกในหัวข้อต่างๆ. ทั้งฟังก์ชั่นมาตรฐาน ES6 จะทำงานเฉพาะใน Firefox ในขณะนี้.
 
อ้างอิง
 
ภาษา ECMAScript: ฟังก์ชั่นและชั้นเรียน
 
นิพจน์ฟังก์ชันที่เรียกใช้ทันที (IIFE)
 
พื้นฐานของ ES6 Generators
 
ฟังก์ชั่นลูกศร
 
ฟังก์ชัน - Mozilla Developer Network