Javaสคริปต์กำหนดและเรียกใช้ฟังก์ชันพร้อมตัวอย่าง
เจมส์ ฮาร์ทแมน
⚡ สรุปอย่างชาญฉลาด
Javaฟังก์ชันสคริปต์เป็นกลุ่มของบล็อกโค้ดที่นำกลับมาใช้ซ้ำได้ ซึ่งจะทำงานก็ต่อเมื่อถูกเรียกเท่านั้น และบทช่วยสอนนี้จะแสดงวิธีการประกาศฟังก์ชันสคริปต์ การส่งอาร์กิวเมนต์เข้าไป และการส่งค่ากลับไปยังผู้เรียก
ฟังก์ชั่นอยู่ในอะไร Javaสคริปต์?
ฟังก์ชันมีความสำคัญและมีประโยชน์มากในภาษาโปรแกรมทุกภาษา เพราะทำให้โค้ดสามารถนำกลับมาใช้ซ้ำได้ ฟังก์ชันคือกลุ่มของโค้ดที่จะถูกเรียกใช้ก็ต่อเมื่อถูกเรียกเท่านั้น หากคุณมีโค้ดเพียงไม่กี่บรรทัดที่ต้องใช้หลายครั้ง คุณสามารถสร้างฟังก์ชันที่มีโค้ดส่วนนั้นซ้ำๆ แล้วเรียกใช้ฟังก์ชันนั้นได้ทุกที่ที่ต้องการ
ไม่มีส่วนใดภายในวงเล็บปีกกาทำงานด้วยตัวเอง เบราว์เซอร์จะจัดเก็บบล็อกนั้นไว้ภายใต้ชื่อที่คุณตั้ง และโค้ดจะทำงานก็ต่อเมื่อมีการเขียนชื่อนั้นโดยมีวงเล็บต่อท้าย เช่น myFunction()ดังนั้น หน้าที่ต่างๆ จึงอยู่ใจกลางของทุกสิ่ง Javaต้นฉบับ โปรแกรม ไม่ว่าสคริปต์จะยังใช้งานได้อยู่หรือไม่ ภายในหน้าเว็บหรือในไฟล์ภายนอก.
วิธีสร้างฟังก์ชั่นใน Javaต้นฉบับ
- ใช้คำสำคัญ ฟังก์ชัน ตามด้วยชื่อของฟังก์ชัน
- หลังชื่อฟังก์ชัน ให้เปิดและปิดวงเล็บ
- หลังวงเล็บ ให้เปิดและปิดเครื่องหมายปีกกา
- ภายในวงเล็บปีกกา ให้เขียนบรรทัดโค้ดของคุณ
ไวยากรณ์:
function functionname()
{
lines of code to be executed
}
ตัวอย่างด้านล่างนี้กำหนด myFunction() จากนั้นเรียกใช้ฟังก์ชันนั้นในบรรทัดถัดไปทันที ข้อความจึงปรากฏขึ้นทันทีที่หน้าเว็บโหลดเสร็จ ลองทำดูเองได้เลย:
<html>
<head>
<title>Functions!!!</title>
<script type="text/javascript">
function myFunction()
{
document.write("This is a simple function.<br />");
}
myFunction();
</script>
</head>
<body>
</body>
</html>
ฟังก์ชั่นที่มีอาร์กิวเมนต์
คุณสามารถสร้างฟังก์ชันที่มีอาร์กิวเมนต์ได้เช่นกัน โดยต้องระบุอาร์กิวเมนต์ไว้ในวงเล็บ
ไวยากรณ์:
function functionname(arg1, arg2)
{
lines of code to be executed
}
Here countVowels() ฟังก์ชันนี้จะรับชื่อที่ผู้เข้าชมพิมพ์ลงในช่องป้อนข้อความ วนลูปตรวจสอบแต่ละตัวอักษร และรายงานจำนวนสระในชื่อนั้น ลองทำด้วยตัวเองดู:
<html>
<head>
<script type="text/javascript">
var count = 0;
function countVowels(name)
{
for (var i=0;i<name.length;i++)
{
if(name[i] == "a" || name[i] == "e" || name[i] == "i" || name[i] == "o" || name[i] == "u")
count = count + 1;
}
document.write("Hello " + name + "!!! Your name has " + count + " vowels.");
}
var myName = prompt("Please enter your name");
countVowels(myName);
</script>
</head>
<body>
</body>
</html>
Javaค่าการส่งคืนสคริปต์
คุณยังสามารถสร้างฟังก์ชัน JS ที่ส่งคืนค่าได้ ภายในฟังก์ชันคุณต้องใช้คีย์เวิร์ด กลับ ตามด้วยค่าที่จะส่งคืน
ไวยากรณ์:
function functionname(arg1, arg2) { lines of code to be executed return val1; }
ในตัวอย่างสุดท้ายนี้ returnSum() ส่งคืนค่ารวมกลับไปยังบรรทัดที่เรียกใช้ฟังก์ชันนั้น เพื่อให้สามารถนำผลลัพธ์ไปรวมไว้ในประโยคได้ แทนที่จะพิมพ์ออกมาภายในฟังก์ชัน ลองทำด้วยตัวเองดู:
<html>
<head>
<script type="text/javascript">
function returnSum(first, second)
{
var sum = first + second;
return sum;
}
var firstNo = 78;
var secondNo = 22;
document.write(firstNo + " + " + secondNo + " = " + returnSum(firstNo,secondNo));
</script>
</head>
<body>
</body>
</html>
ประเภทของฟังก์ชันใน Javaต้นฉบับ
ตัวอย่างทั้งสามข้างต้นใช้การประกาศฟังก์ชันแบบคลาสสิก แต่มีความทันสมัย Javaสคริปต์มีรูปแบบอื่นๆ อีกหลายรูปแบบ โดยหลักๆ แล้วแตกต่างกันตรงที่เครื่องยนต์จะยกพวกมันขึ้นหรือไม่ และแต่ละรูปแบบจัดการกับอย่างไร this คำสำคัญ.
| ประเภทฟังก์ชัน | ไวยากรณ์ทั่วไป | เมื่อใช้งาน |
|---|---|---|
| การประกาศฟังก์ชัน | ฟังก์ชัน greet() { } | ตรรกะที่ตั้งชื่อและนำกลับมาใช้ใหม่ได้; ยกระดับขึ้นสู่ขอบเขตสูงสุด |
| การแสดงออกของฟังก์ชัน | const greet = function () { }; | การเก็บฟังก์ชันไว้ในตัวแปร โดยไม่ใช้วิธี Hoisted |
| ฟังก์ชันลูกศร (ES6) | const greet = () => { }; | ฟังก์ชันเรียกกลับแบบสั้น; สืบทอดคุณสมบัตินี้จากขอบเขตโดยรอบ |
| ฟังก์ชันนิรนาม | setTimeout(function () { }, 100); | ตรรกะเฉพาะกิจถูกส่งต่อไปยังฟังก์ชันอื่นโดยตรง |
| IIFE | (การทำงาน () { })(); | ทำงานทันทีและเก็บรักษาตัวแปรไว้เป็นความลับ |
| โทรกลับ | รายการสำหรับแต่ละรายการ (แสดงรายการ); | ฟังก์ชันที่ส่งต่อไปยังฟังก์ชันอื่นและเรียกใช้ในภายหลัง |
หมายเหตุเกี่ยวกับตัวอย่างข้างต้น: ตัวอย่างทางประวัติศาสตร์ที่ใช้ var และ document.write()และทั้งสองแบบยังคงทำงานได้ในทุกเบราว์เซอร์ แนวทางปฏิบัติในปัจจุบันคือการประกาศตัวแปรด้วย let or const และพิมพ์ผลลัพธ์ผ่าน console.log() หรือโดยการตั้งค่า textContent บนองค์ประกอบหนึ่ง เนื่องจาก document.write() ลบหน้าเว็บที่โหลดเสร็จแล้วออกไป type="text/javascript" คุณสมบัตินี้เป็นตัวเลือกเสริมใน HTML5 เช่นกัน
พารามิเตอร์ฟังก์ชัน อาร์กิวเมนต์ และค่าเริ่มต้น
พารามิเตอร์คือชื่อตัวแทนที่ระบุไว้ในคำจำกัดความ ในขณะที่อาร์กิวเมนต์คือค่าจริงที่ป้อนเมื่อเรียกใช้ฟังก์ชัน countVowels(name) ข้างบน, name โดยที่ `parameter` และ `text` คือพารามิเตอร์ และ `argument` คือข้อความที่พิมพ์ลงในช่องป้อนข้อความ
function greet(user, greeting = "Hello") { return greeting + ", " + user; } greet("Ann"); greet("Ann", "Welcome");
- พารามิเตอร์ที่ไม่มีอาร์กิวเมนต์ที่ตรงกันจะกลายเป็น
undefinedเว้นแต่จะมีการระบุค่าเริ่มต้นไว้ เช่นgreetingอยู่ที่นี่. - อาร์กิวเมนต์เพิ่มเติมจะถูกละเว้นโดยรายการพารามิเตอร์ แต่ยังคงสามารถเข้าถึงได้ผ่านทาง
argumentsวัตถุภายในฟังก์ชันที่ไม่ใช่ฟังก์ชันลูกศร - พารามิเตอร์ rest ที่เขียนไว้ดังนี้
...valuesรวบรวมข้อโต้แย้งที่เหลือทั้งหมดเข้าไว้ด้วยกันอย่างแท้จริง แถว.
ขอบเขตการทำงานและการยกใน Javaต้นฉบับ
ตำแหน่งที่เขียนฟังก์ชันจะเป็นตัวกำหนดว่าฟังก์ชันนั้นสามารถมองเห็นอะไรได้บ้างและจะถูกเรียกใช้ได้เมื่อใด กฎสองข้อนี้อธิบายถึงเกือบทุกเรื่องที่ผู้เริ่มต้นพบเจอได้อย่างแม่นยำ
- รอก: การประกาศฟังก์ชันจะถูกย้ายไปอยู่ด้านบนสุดของขอบเขตการทำงานก่อนที่สคริปต์จะเริ่มทำงาน เพื่อให้สามารถเรียกใช้ได้ในบรรทัดที่สูงกว่าคำนิยามของฟังก์ชันนั้น ส่วนนิพจน์ฟังก์ชันและฟังก์ชันลูกศรจะไม่ถูกย้ายไปอยู่ด้านบนสุด และจะเกิดข้อผิดพลาดหากถูกเรียกใช้ก่อนกำหนด
- ขอบเขต: ตัวแปรที่ประกาศด้วย
varภายในฟังก์ชัน สิ่งต่างๆ จะปรากฏให้เห็นตลอดทั้งฟังก์ชันนั้น ในขณะที่letและconstตัวแปรเหล่านั้นจะจำกัดอยู่เฉพาะในบล็อกที่มันอยู่เท่านั้น ส่วนตัวแปรใดๆ ที่ประกาศอยู่นอกฟังก์ชันจะเป็นตัวแปรส่วนกลาง
ตัวนับสระแสดงให้เห็นสิ่งนี้ในทางปฏิบัติ count ตัวแปรถูกประกาศไว้นอกฟังก์ชัน ดังนั้นการเรียกใช้จึงไม่ถูกต้อง countVowels() การประกาศตัวแปรครั้งที่สองในหน้าเดียวกันจะยังคงบวกค่าเดิมต่อไปเรื่อยๆ แทนที่จะเริ่มต้นใหม่ที่ศูนย์ การย้ายการประกาศตัวแปรไปไว้ภายในฟังก์ชันจะทำให้ค่าถูกรีเซ็ตทุกครั้งที่มีการเรียกใช้
เหล่านี้ scoping กฎเหล่านี้ใช้ได้กับโค้ดฝั่งเซิร์ฟเวอร์เช่นกัน ซึ่งเป็นเหตุผลว่าทำไมจึงใช้หลักการเดียวกันเมื่อเขียนฟังก์ชัน Node.jsและเหตุใดพฤติกรรมของฟังก์ชันจึงปรากฏบ่อยครั้งใน Javaคำถามสัมภาษณ์ตามสคริปต์.
