JS กวดวิชา

เจเอสโฮม JS Introduction JS Where To JS เอาท์พุต งบ JS JS ไวยากรณ์ JS ความคิดเห็น ตัวแปร JS เจเอส เลท JS Const JS Operators JS เลขคณิต JS Assignment ประเภทข้อมูล JS ฟังก์ชัน JS วัตถุ JS JS Events JS Strings JS String Methods JS String Search เทมเพลตสตริง JS JS Numbers JS Number Methods JS Arrays JS Array Methods JS Array Sort JS Array Iteration JS Array Const JS Dates รูปแบบวันที่ JS JS วันที่รับเมธอด JS Date Set Methods JS Math JS สุ่ม JS Booleans JS เปรียบเทียบ JS Conditions JS Switch JS ลูปสำหรับ JS Loop สำหรับ In JS วนสำหรับ Of JS วนรอบในขณะที่ JS Break JS Iterables JS ชุด JS Maps JS Typeof JS ประเภทการแปลง JS Bitwise JS RegExp JS Errors JS ขอบเขต JS Hoisting JS โหมดเข้มงวด JS คำสำคัญนี้ JS Arrow Function JS Classes JS JSON JS Debugging คู่มือสไตล์ JS JS แนวทางปฏิบัติที่ดีที่สุด JS ความผิดพลาด JS Performance JS สงวนคำ

เวอร์ชัน JS

เวอร์ชัน JS JS 2009 (ES5) เจเอส 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / ขอบ JS History

วัตถุ JS

คำจำกัดความของวัตถุ คุณสมบัติของวัตถุ วิธีการวัตถุ การแสดงวัตถุ อุปกรณ์เสริมวัตถุ ตัวสร้างวัตถุ ต้นแบบวัตถุ วัตถุ Iterables ชุดวัตถุ แผนที่วัตถุ การอ้างอิงวัตถุ

ฟังก์ชัน JS

คำจำกัดความของฟังก์ชัน พารามิเตอร์ฟังก์ชัน เรียกใช้ฟังก์ชัน เรียกฟังก์ชัน ฟังก์ชัน สมัคร การปิดฟังก์ชัน

JS Classes

แนะนำคลาส การสืบทอดคลาส คลาสคงที่

JS Async

JS Callbacks JS แบบอะซิงโครนัส JS Promises JS Async/รอ

JS HTML DOM

บทนำ DOM วิธี DOM เอกสาร DOM องค์ประกอบ DOM DOM HTML แบบฟอร์ม DOM DOM CSS ภาพเคลื่อนไหว DOM กิจกรรม DOM DOM Event Listener การนำทาง DOM โหนด DOM DOM Collections รายการโหนด DOM

JS เบราว์เซอร์ BOM

JS Window JS Screen JS Location JS History JS Navigator JS Popup Alert JS Timing JS Cookies

JS Web APIs

แนะนำ Web API เว็บฟอร์ม API API ประวัติเว็บ API ที่เก็บข้อมูลเว็บ Web Worker API API ดึงเว็บ เว็บ Geolocation API

JS AJAX

บทนำ AJAX AJAX XMLHttp คำขอ AJAX การตอบสนอง AJAX ไฟล์ AJAX XML AJAX PHP AJAX ASP ฐานข้อมูล AJAX แอปพลิเคชัน AJAX ตัวอย่าง AJAX

JS JSON

บทนำ JSON ไวยากรณ์ JSON JSON กับ XML ประเภทข้อมูล JSON JSON Parse JSON สตริงริฟาย วัตถุ JSON อาร์เรย์ JSON เซิร์ฟเวอร์ JSON JSON PHP JSON HTML JSON JSONP

JS กับ jQuery

ตัวเลือก jQuery jQuery HTML jQuery CSS jQuery DOM

JS กราฟิก

JS กราฟิก JS Canvas JS Plotly JS Chart.js JS Google Chart JS D3.js

ตัวอย่าง JS

ตัวอย่าง JS JS HTML DOM JS HTML อินพุต JS HTML Objects JS HTML Events JS Browser JS Editor JS แบบฝึกหัด JS Quiz ใบรับรอง JS

JS References

วัตถุ JavaScript วัตถุ HTML DOM


คำจำกัดความของฟังก์ชัน JavaScript


ฟังก์ชัน JavaScript ถูกกำหนดด้วย functionคีย์เวิร์ด

คุณสามารถใช้การประกาศฟังก์ชันหรือนิพจน์ ฟังก์ชัน


ประกาศฟังก์ชัน

ก่อนหน้านี้ในบทช่วยสอนนี้ คุณได้เรียนรู้ว่ามีการประกาศ ฟังก์ชัน ด้วยไวยากรณ์ต่อไปนี้:

function functionName(parameters) {
  // code to be executed
}

ฟังก์ชันที่ประกาศไว้จะไม่ถูกดำเนินการทันที พวกเขา "บันทึกไว้เพื่อใช้ในภายหลัง" และจะดำเนินการในภายหลังเมื่อถูกเรียกใช้ (เรียกเมื่อ)

ตัวอย่าง

function myFunction(a, b) {
  return a * b;
}

อัฒภาคใช้เพื่อแยกคำสั่ง JavaScript ที่เรียกทำงานได้ เนื่องจากการ ประกาศ
ฟังก์ชันไม่ใช่คำสั่งเรียกทำงาน จึงไม่ใช่เรื่องปกติที่จะลงท้ายด้วยเครื่องหมายอัฒภาค


นิพจน์ฟังก์ชัน

ฟังก์ชัน JavaScript สามารถกำหนดได้โดยใช้นิพจน์

นิพจน์ของฟังก์ชันสามารถเก็บไว้ในตัวแปรได้:

ตัวอย่าง

const x = function (a, b) {return a * b};

หลังจากเก็บนิพจน์ของฟังก์ชันไว้ในตัวแปรแล้ว ตัวแปรจะสามารถใช้เป็นฟังก์ชันได้ดังนี้

ตัวอย่าง

const x = function (a, b) {return a * b};
let z = x(4, 3);

ฟังก์ชันด้านบนนี้เป็น ฟังก์ชันที่ ไม่ระบุตัวตน จริงๆ (ฟังก์ชันที่ไม่มีชื่อ)

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

ฟังก์ชันด้านบนลงท้ายด้วยเครื่องหมายอัฒภาคเนื่องจากเป็นส่วนหนึ่งของคำสั่งเรียกทำงาน



ฟังก์ชัน() ตัวสร้าง

ดังที่คุณได้เห็นในตัวอย่างก่อนหน้านี้ ฟังก์ชัน JavaScript ถูกกำหนดด้วยfunctionคีย์เวิร์ด

ฟังก์ชันต่างๆ ยังสามารถกำหนดได้ด้วยตัวสร้างฟังก์ชัน JavaScript ในตัวที่เรียกว่า Function().

ตัวอย่าง

const myFunction = new Function("a", "b", "return a * b");

let x = myFunction(4, 3);

คุณไม่จำเป็นต้องใช้ตัวสร้างฟังก์ชัน ตัวอย่างข้างต้นเหมือนกับการเขียน:

ตัวอย่าง

const myFunction = function (a, b) {return a * b};

let x = myFunction(4, 3);

โดยส่วนใหญ่ คุณสามารถหลีกเลี่ยงการใช้newคำหลักใน JavaScript


รอกฟังก์ชั่น

ก่อนหน้านี้ในบทช่วยสอนนี้ คุณได้เรียนรู้เกี่ยวกับ "hoisting" ( JavaScript Hoisting )

Hoisting เป็นพฤติกรรมเริ่มต้นของ JavaScript ในการย้ายการประกาศไปที่ด้านบนสุดของขอบเขตปัจจุบัน

การชักรอกใช้กับการประกาศตัวแปรและการประกาศฟังก์ชัน

ด้วยเหตุนี้ ฟังก์ชัน JavaScript จึงสามารถเรียกได้ก่อนที่จะประกาศ:

myFunction(5);

function myFunction(y) {
  return y * y;
}

ฟังก์ชันที่กำหนดโดยใช้นิพจน์จะไม่ถูกยกขึ้น


ฟังก์ชันเรียกตนเอง

นิพจน์ฟังก์ชันสามารถทำ "เรียกตนเอง" ได้

นิพจน์เรียกตัวเองถูกเรียก (เริ่มต้น) โดยอัตโนมัติโดยไม่ต้องเรียก

นิพจน์ของฟังก์ชันจะดำเนินการโดยอัตโนมัติหากนิพจน์นั้นตามด้วย ()

คุณไม่สามารถเรียกการประกาศฟังก์ชันได้เอง

คุณต้องเพิ่มวงเล็บรอบฟังก์ชันเพื่อระบุว่าเป็นนิพจน์ของฟังก์ชัน:

ตัวอย่าง

(function () {
  let x = "Hello!!";  // I will invoke myself
})();

ที่จริงแล้ว ฟังก์ชันข้างต้นเป็นฟังก์ชันเรียกตัวเองแบบไม่ระบุตัวตน (ฟังก์ชันไม่มีชื่อ)


ฟังก์ชันสามารถใช้เป็นค่าได้

ฟังก์ชัน JavaScript สามารถใช้เป็นค่าได้:

ตัวอย่าง

function myFunction(a, b) {
  return a * b;
}

let x = myFunction(4, 3);

ฟังก์ชัน JavaScript สามารถใช้ในนิพจน์:

ตัวอย่าง

function myFunction(a, b) {
  return a * b;
}

let x = myFunction(4, 3) * 2;

หน้าที่คืออ็อบเจกต์

โอtypeofเปอเรเตอร์ใน JavaScript ส่งคืน "ฟังก์ชัน" สำหรับฟังก์ชัน

แต่ฟังก์ชัน JavaScript สามารถอธิบายได้ดีที่สุดว่าเป็นวัตถุ

ฟังก์ชัน JavaScript มีทั้งคุณสมบัติและ เมธอด

คุณสมบัติarguments.lengthส่งคืนจำนวนอาร์กิวเมนต์ที่ได้รับเมื่อเรียกใช้ฟังก์ชัน:

ตัวอย่าง

function myFunction(a, b) {
  return arguments.length;
}

เมธอดส่งคืน ฟังก์ชันtoString()เป็นสตริง:

ตัวอย่าง

function myFunction(a, b) {
  return a * b;
}

let text = myFunction.toString();

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


ฟังก์ชั่นลูกศร

ฟังก์ชันลูกศรช่วยให้ไวยากรณ์สั้น ๆ สำหรับเขียนนิพจน์ของฟังก์ชัน

คุณไม่จำเป็นต้องมีfunctionคีย์เวิร์ดreturnคีย์เวิร์ด และ วงเล็บปีกกา

ตัวอย่าง

// ES5
var x = function(x, y) {
  return x * y;
}

// ES6
const x = (x, y) => x * y;

ฟังก์ชั่นลูกศรไม่มีของตัวthisเอง ไม่เหมาะสำหรับการกำหนด วิธีการ ของวัตถุ

ฟังก์ชั่นลูกศรไม่ได้ถูกยกขึ้น ต้องกำหนดก่อนนำไปใช้

การใช้const ปลอดภัยกว่าการใช้varเนื่องจากนิพจน์ของฟังก์ชันมีค่าคงที่เสมอ

คุณสามารถละเว้นreturnคีย์เวิร์ดและวงเล็บปีกกาได้ก็ต่อเมื่อฟังก์ชันนั้นเป็นคำสั่งเดียว ด้วยเหตุนี้ การรักษาสิ่งเหล่านี้อาจเป็นนิสัยที่ดีเสมอ:

ตัวอย่าง

const x = (x, y) => { return x * y };

ไม่รองรับฟังก์ชันลูกศรใน IE11 หรือเก่ากว่า