ออปเจกท์ JavaScript

ฟังก์ชันของ JavaScript ถูกออกแบบมาเพื่อทำงานที่เฉพาะเจาะจง

ฟังก์ชันของ JavaScript จะทำงานเมื่อมีรหัสเรียกใช้ฟังก์ชัน

ตัวอย่าง

function myFunction(p1, p2) {
    return p1 * p2;              // ฟังก์ชันนี้จะกลับค่าผลคูณของ p1 และ p2
}

ลองทดลองเอง

ความเข้าใจศัพท์ฟังก์ชันของ JavaScript

ฟังก์ชันของ JavaScript ที่ทำงานผ่าน function ถูกกำหนดด้วยคำเรียกชื่อฟังก์ชันและวงเปิดปิด ()

ชื่อฟังก์ชันสามารถรวมตัวอักษร ตัวเลข ลิงก์ส์ (underscore) และสัญลักษณ์เหรียญ (dollar sign) (ตามกฎของชื่อตัวแปร)

วงเล็กสามารถรวมตัวแปรที่แยกด้วยคำหยุดระดับต่ำ:

(ตัวแปร 1, ตัวแปร 2, ...)

รหัสที่ฟังก์ชันทำงานจะถูกจัดไว้ในรูปแบบของวงเล็บ:{}

function name(ตัวแปร 1, ตัวแปร 2, ตัวแปร 3) {
    รหัสที่ต้องทำงาน
}

ฟังก์ชันองค์ประกอบ (Function parameters)คือชื่อที่ระบุในการประกาศฟังก์ชัน

ฟังก์ชันองค์ประกอบ (Function arguments)คือค่าที่ฟังก์ชันรับมาเมื่อเรียกฟังก์ชันค่า。

ในฟังก์ชัน ตัวแปรที่ใช้เป็นองค์ประกอบของฟังก์ชันเป็นตัวแปรท้องที่

ในภาษาประมวลผลอื่น ฟังก์ชันเหมือนโปรเซส (Procedure) หรือภาคแบบร่วม (Subroutine)

การเรียกฟังก์ชัน

รหัสในฟังก์ชันจะทำงานเมื่อรหัสอื่นเรียกใช้ฟังก์ชันนั้น

  • เมื่อเกิดเหตุการณ์ (เมื่อผู้ใช้คลิกปุ่ม)
  • เมื่อเข้าถึงรหัสที่ตรงกันข้าม
  • ที่เรียกได้โดยอัตโนมัติ (self-invoking)

คุณจะเรียนรู้เกี่ยวกับการเรียกฟังก์ชันมากยิ่งขึ้นในบทความนี้。

ฟังก์ชันคืนค่า

เมื่อ JavaScript ถึง return คำสั่ง

หากฟังก์ชันถูกเรียกโดยบทความคำสั่ง โจรจง JavaScript จะ "กลับ" การปฏิบัติการหลังจากคำสั่งเรียก:

ฟังก์ชันทั่วไปจะคำนวณค่าที่คืนค่าที่คืนมาจะถูกส่งกลับไปยังผู้เรียกใช้:

ตัวอย่าง

คำนวณผลคูณของสองตัวเลข และคืนค่าผลลัพธ์:

var x = myFunction(7, 8);        // เรียกฟังก์ชัน และค่าที่คืนมาถูกกำหนดให้กับ x
function myFunction(a, b) {
    return a * b;                // ฟังก์ชันคืนค่าผลคูณของ a และ b
}

ผลลัพธ์ของ x จะเป็น:

56

ลองทดลองเอง

ทำไมต้องใช้ฟังก์ชัน?

คุณสามารถนำเอาเครื่องมือต่าง ๆ มาใช้ซ้ำตลอดเวลา:

คุณสามารถส่งค่าต่าง ๆ ไปยังฟังก์ชันเดียวกันหลายครั้ง เพื่อได้ผลลัพธ์ที่ต่าง ๆ กัน:

ตัวอย่าง

การปรับเปลี่ยนอุณหภูมิในองศาฟาเรนไฮต์เป็นองศาเซลเซียส:

function toCelsius(fahrenheit) {
    return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius(77);

ลองทดลองเอง

() สัญญาณหรือเรียกฟังก์ชัน

ใช้ตัวอย่างด้านบน:toCelsius ที่ระบุคือฟังก์ชันตัวแปร และ toCelsius() ที่ระบุคือผลลัพธ์ของฟังก์ชัน。

ตัวอย่าง

การเข้าถึงฟังก์ชันที่ไม่มี () จะคืนค่าเป็นการประกาศฟังก์ชัน:

function toCelsius(fahrenheit) {
    return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius;

ลองทดลองเอง

ฟังก์ชันที่ใช้เป็นค่าตัวแปร

วิธีใช้ฟังก์ชันเหมือนตัวแปร ในทุกชนิดของสูตร การจัดการค่าและการคำนวณ。

ตัวอย่าง

ใช้ตัวแปรเพื่อเก็บค่าฟังก์ชัน:

var x = toCelsius(77);
var text = "The temperature is " + x + " Celsius";

คุณสามารถใช้ฟังก์ชันเหมือนตัวแปรตรงไปตรงมาได้:

var text = "The temperature is " + toCelsius(77) + " Celsius";

ลองทดลองเอง

คุณจะเรียนรู้เกี่ยวกับฟังก์ชันมากยิ่งขึ้นในบทความนี้。

ตัวแปรท้องถิ่น

ตัวแปรที่มีการประกาศในฟังก์ชัน JavaScript จะกลายเป็นตัวแปรท้องถิ่น。

ตัวแปรท้องถิ่นสามารถเข้าถึงได้ภายในฟังก์ชันเท่านั้น。

ตัวอย่าง

// รหัสในส่วนนี้ไม่สามารถใช้ carName
function myFunction() {
    var carName = "Volvo";
    // รหัสในส่วนนี้สามารถใช้ carName
}
// รหัสในส่วนนี้ไม่สามารถใช้ carName

ลองทดลองเอง

เนื่องจากตัวแปรท้องที่สามารถถูกพิจารณาโดยฟังก์ชันของมันเท่านั้น ดังนั้นจึงสามารถใช้ชื่อตัวแปรที่เหมือนกันในฟังก์ชันต่าง ๆ

ตัวแปรท้องที่จะถูกสร้างขึ้นเมื่อฟังก์ชันเริ่มทำงาน และจะถูกลบออกเมื่อฟังก์ชันจบงาน

หนังสือเรียนเพิ่มเติม

หากต้องการข้อมูลเพิ่มเติมเกี่ยวกับ ออปเจกท์ JavaScriptข้อมูลเกี่ยวกับ

สรุปฟังก์ชัน ECMAScript
บทนี้อธิบายความหมายของฟังก์ชัน และว่า ECMAScript จะประกาศและเรียกฟังก์ชัน และว่าฟังก์ชันจะกลับค่า
ตัวแปร arguments ของ ECMAScript
บทนี้นำเสนอการใช้งานของตัวแปร และอธิบายว่าจะใช้ length ฟิล์ดเพื่อตรวจสอบจำนวนของอุปกรณ์ฟังก์ชัน และการแทนที่ฟังก์ชันโหลดแบบ multi-overload
ตัวแปร Function ของ ECMAScript (หน้าประจำรูปร่าง)
บทนี้อธิบายวิธีการสร้างฟังก์ชันด้วย Function รูปร่าง และนำเสนอตัวแปรและฟังก์ชันของตัวแปร Function
ที่มีรอบปิด (closure) ของ ECMAScript
บทนี้อธิบายความหมายของความปิดกั้น (closure) และแสดงตัวอย่างสองตัวอย่างที่เรียบง่ายและหนักขนาด