ใน JavaScript ฟังก์ชั่นเป็นคลาสของวัตถุซึ่งหมายความว่าสามารถส่งผ่านเป็นพารามิเตอร์ไปยังฟังก์ชั่นอื่น ๆ นอกจากนี้ฟังก์ชั่นยังสามารถให้ขอบเขต
ส่วนพื้นฐานของฟังก์ชั่น JS: บันทึกการเรียนรู้ JavaScript (iv) ฟังก์ชันฟังก์ชัน
ไวยากรณ์สำหรับการสร้างฟังก์ชัน
ชื่อการแสดงออกของฟังก์ชั่น
การคัดลอกรหัสมีดังนี้:
// นิพจน์ฟังก์ชั่นชื่อ
var add = function เพิ่ม (a, b) {
ส่งคืน A+B;
-
การแสดงออกของฟังก์ชั่น
การคัดลอกรหัสมีดังนี้:
// หรือที่รู้จักกันในชื่อฟังก์ชันที่ไม่ระบุชื่อ
var add = function (a, b) {
ส่งคืน A+B;
-
การประกาศฟังก์ชั่น
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่น foo () {
// รหัสที่นี่
} // ไม่จำเป็นต้องมีเครื่องหมายอัฒภาคที่นี่
ในเครื่องหมายอัฒภาคที่ตามมาการแสดงออกของฟังก์ชั่นควรใช้เครื่องหมายอัฒภาคเสมอและการสิ้นสุดของเครื่องหมายอัฒภาคไม่จำเป็นต้องใช้ในการประกาศของฟังก์ชั่น
การประกาศฟังก์ชั่นและการแสดงออก
โปรโมชั่นฟังก์ชั่น (Hoisting)
พฤติกรรมของการประกาศฟังก์ชั่นไม่เทียบเท่ากับการแสดงออกของฟังก์ชันที่มีชื่อ ความแตกต่างคือพฤติกรรมการยก ดูตัวอย่างต่อไปนี้:
การคัดลอกรหัสมีดังนี้:
<script type = "text/javascript">
// ฟังก์ชั่นทั่วโลก
function foo () {Alert ("Global Foo!");}
Function Bar () {Alert ('global bar');}
ฟังก์ชั่นรอก () {
console.log (typeof foo); // function
console.log (typeof bar); // undefined
foo (); // local foo!
bar (); // typeerror: 'undefined' ไม่ใช่ฟังก์ชัน
// ตัวแปร foo และ edponderner ได้รับการส่งเสริม
ฟังก์ชั่น foo () {
การแจ้งเตือน ('foo ท้องถิ่น! ');
-
// เฉพาะแถบตัวแปรเท่านั้นที่ได้รับการส่งเสริมส่วนการใช้งานฟังก์ชั่นไม่ได้รับการส่งเสริม
var bar = function () {
การแจ้งเตือน ('local bar!');
-
-
Hoist ();
</script>
สำหรับตัวแปรทั้งหมดไม่ว่าจะมีการประกาศในร่างกายที่ไหนพวกเขาจะได้รับการเลื่อนตำแหน่งภายในให้กับด้านบนของฟังก์ชั่น เหตุผลสำหรับการใช้งานทั่วไปของฟังก์ชั่นคือฟังก์ชั่นเป็นเพียงวัตถุที่กำหนดให้กับตัวแปรเท่านั้น
ตามชื่อแนะนำการปรับปรุงหมายถึงการกล่าวถึงสิ่งต่อไปนี้ไปด้านบน ใน JS มันคือการอัพเกรดสิ่งที่กำหนดไว้ใน (ตัวแปรหรือฟังก์ชั่น) ต่อไปนี้เป็นคำจำกัดความก่อนหน้า ดังที่เห็นได้จากตัวอย่างข้างต้น Foo และ Bar ในฟังก์ชั่นยกภายในฟังก์ชั่นเคลื่อนที่ไปด้านบนดังนั้นจึงครอบคลุมฟังก์ชั่น Foo และ Bar ทั่วโลก ความแตกต่างระหว่างแถบฟังก์ชั่นท้องถิ่นและ Foo คือ Foo ได้รับการเลื่อนตำแหน่งให้อยู่ด้านบนและสามารถทำงานได้ตามปกติในขณะที่คำจำกัดความของ Bar () ยังไม่ได้รับการปรับปรุง ดังนั้นเมื่อมีการดำเนินการ bar () ผลลัพธ์จะไม่ได้กำหนดแทนที่จะใช้เป็นฟังก์ชัน
โหมดฟังก์ชันเรียลไทม์
ฟังก์ชั่นเป็นวัตถุดังนั้นจึงสามารถใช้เป็นค่าส่งคืน ข้อได้เปรียบของการใช้ฟังก์ชั่นการดำเนินการด้วยตนเองคือการประกาศฟังก์ชั่นที่ไม่ระบุชื่อโดยตรงและใช้งานทันทีเพื่อหลีกเลี่ยงการกำหนดฟังก์ชั่นที่ไม่ได้ใช้ครั้งเดียวและหลีกเลี่ยงจากปัญหาการตั้งชื่อความขัดแย้ง ไม่มีแนวคิดของเนมสเปซใน JS ดังนั้นจึงเป็นเรื่องง่ายที่จะมีชื่อฟังก์ชั่นความขัดแย้ง เมื่อเกิดความขัดแย้งการตั้งชื่อแล้วคนสุดท้ายก็ประกาศว่าจะได้รับชัยชนะ
โหมด 1:
การคัดลอกรหัสมีดังนี้:
<script>
(การทำงาน () {
var a = 1;
return function () {
การแจ้งเตือน (2);
-
} () ()); // ป๊อป 2, วงเล็บแรกดำเนินการตัวเองและวงเล็บที่สองดำเนินการฟังก์ชันที่ไม่ระบุชื่อภายใน
</script>
รูปแบบที่ 2: การชี้ของตัวแปรฟังก์ชันที่กำลังดำเนินการด้วยตนเอง
การคัดลอกรหัสมีดังนี้:
<script type = "text/javascript">
var result = (function () {
กลับ 2;
}) (); // ฟังก์ชั่นถูกดำเนินการที่นี่
การแจ้งเตือน (ผลลัพธ์); // คะแนนผลลัพธ์ไปยังค่าส่งคืน 2 ของฟังก์ชันที่ดำเนินการด้วยตนเอง; หากผลลัพธ์ () ปรากฏขึ้นข้อผิดพลาดจะเกิดขึ้น
</script>
รูปแบบที่สาม: ฟังก์ชั่นซ้อนกัน
การคัดลอกรหัสมีดังนี้:
<script type = "text/javascript">
var result = (function () {
return function () {
กลับ 2;
-
-
การแจ้งเตือน (ผลลัพธ์ ()); // 2 ปรากฏขึ้นเมื่อแจ้งเตือน (ผลลัพธ์); function () {return 2}
</script>
โหมด 4: ฟังก์ชั่น Execution Self-Execution กำหนดค่าการส่งคืนให้กับตัวแปร
การคัดลอกรหัสมีดังนี้:
var abc = (function () {
var a = 1;
return function () {
return ++ a;
-
}) (); // ฟังก์ชั่นที่กำลังดำเนินการด้วยตนเองส่งคืนฟังก์ชันหลังจากกลับไปที่ตัวแปร
การแจ้งเตือน (abc ()); // ถ้าเป็นการแจ้งเตือน (ABC) รหัสหลังจากคำสั่ง Return จะปรากฏขึ้น หากเป็น ABC () ฟังก์ชันหลังจากการส่งคืนจะถูกดำเนินการ
รูปแบบที่ 5: ฟังก์ชั่นดำเนินการตัวเองภายใน
การคัดลอกรหัสมีดังนี้:
// นี่เป็นฟังก์ชั่นการดำเนินการด้วยตนเองฟังก์ชั่นดำเนินการตัวเองภายใน
ฟังก์ชั่น abc () {abc (); -
โหมดโทรกลับ
ฟังก์ชั่นการโทรกลับ: เมื่อคุณผ่านฟังก์ชั่นเขียน () เป็นอาร์กิวเมนต์ไปยังการเรียกใช้ฟังก์ชันอื่น () จากนั้น call () อาจเรียกใช้ (หรือการโทร) เขียน () ในบางจุด ในกรณีนี้เขียน () เรียกว่าฟังก์ชันการโทรกลับ
ผู้ฟังเหตุการณ์แบบอะซิงโครนัส
โหมดการโทรกลับมีการใช้งานจำนวนมากตัวอย่างเช่นเมื่อผู้ฟังเหตุการณ์ถูกแนบกับองค์ประกอบในหน้าจริงมันจะให้ตัวชี้ไปยังฟังก์ชั่นการโทรกลับที่จะถูกเรียกเมื่อเหตุการณ์เกิดขึ้น ชอบ:
การคัดลอกรหัสมีดังนี้:
document.addeventListener ("คลิก", console.log, false);
ตัวอย่างโค้ดด้านบนแสดงฟังก์ชั่นการโทรกลับ console.log () ในโหมดฟองเมื่อเอกสารคลิก
JavaScript เหมาะอย่างยิ่งสำหรับการเขียนโปรแกรมที่ขับเคลื่อนด้วยเหตุการณ์เนื่องจากโหมดการโทรกลับรองรับโปรแกรมเพื่อเรียกใช้แบบอะซิงโครนัส
หมดเวลา
อีกตัวอย่างหนึ่งของการใช้โหมดการโทรกลับคือเมื่อใช้วิธีการหมดเวลาที่จัดทำโดยวัตถุหน้าต่างของเบราว์เซอร์: settimeout () และ setInterval () เช่น:
การคัดลอกรหัสมีดังนี้:
<script type = "text/javascript">
var call = function () {
console.log ("100ms จะถูกถาม ... ");
-
settimeout (โทร, 100);
</script>
โหมดโทรกลับในไลบรารี
เมื่อออกแบบไลบรารี JS ฟังก์ชั่นการโทรกลับจะมีประโยชน์ รหัสของไลบรารีควรใช้รหัสที่นำกลับมาใช้ใหม่ได้มากที่สุดและการโทรกลับสามารถช่วยให้บรรลุพื้นฐานนี้ได้ เมื่อเราออกแบบห้องสมุด JS ขนาดใหญ่ความจริงก็คือผู้ใช้ไม่ต้องการส่วนใหญ่เราสามารถมุ่งเน้นไปที่ฟังก์ชั่นหลักและให้ฟังก์ชั่นการโทรกลับใน "ฟอร์มเบ็ด" ซึ่งจะทำให้เราสามารถสร้างปรับขนาดและปรับแต่งวิธีไลบรารีได้ง่ายขึ้น
การแกงกะหรี่
Currying เป็นเทคนิคที่แปลงฟังก์ชั่นเป็นฟังก์ชั่นใหม่ (เป็นพารามิเตอร์ที่น้อยลง) ใหม่โดยการเติมพารามิเตอร์หลายตัวลงในร่างกายฟังก์ชั่น ―
พูดง่ายๆคือ Curryization เป็นกระบวนการแปลงนั่นคือกระบวนการของการแปลงฟังก์ชั่นของเรา ดังที่แสดงในตัวอย่างต่อไปนี้:
การคัดลอกรหัสมีดังนี้:
<script type = "text/javascript">
// ฟังก์ชั่น Add () Curry-based
ฟังก์ชั่นเพิ่ม (x, y) {
var oldx = x, oldy = y;
if (typeof oldy == "undefined") {
ฟังก์ชั่น return (newy) {
กลับ oldx + newy;
-
-
// แอปพลิเคชันเต็มรูปแบบ
ส่งคืน x+y;
-
//ทดสอบ
typeof add (5); // output "function"
เพิ่ม (3) (4); // 7
// สร้างและจัดเก็บฟังก์ชั่นใหม่
var add2000 = เพิ่ม (2000);
add2000 (10); // output 2010
</script>
เมื่อเพิ่ม () ถูกเรียกเป็นครั้งแรกมันจะสร้างการปิดสำหรับฟังก์ชั่นภายในที่ส่งคืน การปิดนี้เก็บค่า X และ Y ดั้งเดิมไว้ในตัวแปรส่วนตัว oldx และ oldy
ตอนนี้เราจะสามารถใช้วิธีการทั่วไปของแกงกะหรี่โดยใช้ฟังก์ชั่นใด ๆ เช่น:
การคัดลอกรหัสมีดังนี้:
<script type = "text/javascript">
// ฟังก์ชั่นปกติ
ฟังก์ชั่นเพิ่ม (x, y) {
ส่งคืน x + y;
-
// Curry A ฟังก์ชั่นเพื่อรับฟังก์ชั่นใหม่
var newadd = ทดสอบ (เพิ่ม, 5);
Newadd (4); // 9
// ตัวเลือกอื่นโทรฟังก์ชันใหม่โดยตรง
ทดสอบ (เพิ่ม, 6) (7); // output 13
</script>
เมื่อใดควรใช้แกงกะหรี่
เมื่อพบว่ามีการเรียกฟังก์ชั่นเดียวกันและพารามิเตอร์ที่ผ่านส่วนใหญ่จะเหมือนกันฟังก์ชั่นอาจเป็นตัวเลือกที่ดีสำหรับ curryization