ขอบเขตจาวาสคริปต์
ขอบเขตกำหนดการเข้าถึง (การมองเห็น) ของตัวแปร
JavaScript มีขอบเขต 3 ประเภท:
- บล็อกขอบเขต
- ขอบเขตฟังก์ชัน
- ขอบเขตทั่วโลก
บล็อกขอบเขต
ก่อน ES6 (2015) JavaScript มีเพียงGlobal Scope and Function Scope
ES6 แนะนำคำหลัก JavaScript ใหม่ที่สำคัญสองคำ: letและconst.
คำหลักสองคำนี้มีขอบเขตการบล็อกใน JavaScript
ตัวแปรที่ประกาศภายในบล็อก { } ไม่สามารถเข้าถึงได้จากภายนอกบล็อก:
ตัวอย่าง
{
let x = 2;
}
// x can NOT be used here
ตัวแปรที่ประกาศด้วยvarคีย์เวิร์ดไม่สามารถมีขอบเขตการบล็อกได้
ตัวแปรที่ประกาศภายในบล็อก { } สามารถเข้าถึงได้จากภายนอกบล็อก
ตัวอย่าง
{
var x = 2;
}
// x CAN be used here
ขอบเขตท้องถิ่น
ตัวแปรที่ประกาศภายในฟังก์ชัน JavaScript จะกลายเป็น LOCALของฟังก์ชัน
ตัวอย่าง
// code here can NOT use carName
function myFunction() {
let carName = "Volvo";
// code here CAN use carName
}
// code here can NOT use carName
ตัวแปรโลคัลมีขอบเขตฟังก์ชัน :
สามารถเข้าถึงได้จากภายในฟังก์ชันเท่านั้น
เนื่องจากตัวแปรโลคัลเป็นที่รู้จักในฟังก์ชันเท่านั้น ตัวแปรที่มีชื่อเดียวกันจึงสามารถใช้ในฟังก์ชันต่างๆ ได้
ตัวแปรโลคัลจะถูกสร้างขึ้นเมื่อฟังก์ชันเริ่มทำงาน และจะถูกลบเมื่อฟังก์ชันเสร็จสิ้น
ขอบเขตฟังก์ชัน
JavaScript มีขอบเขตฟังก์ชัน: แต่ละฟังก์ชันสร้างขอบเขตใหม่
ตัวแปรที่กำหนดภายในฟังก์ชันไม่สามารถเข้าถึงได้ (มองเห็นได้) จากภายนอกฟังก์ชัน
ตัวแปรที่ประกาศด้วย
และvarค่อนข้างคล้ายกันเมื่อประกาศในฟังก์ชันletconst
พวกเขาทั้งหมดมีขอบเขตฟังก์ชัน :
function myFunction() {
var carName = "Volvo";
// Function Scope
}
function myFunction() {
let carName = "Volvo"; //
Function Scope
}
function myFunction() {
const carName = "Volvo"; //
Function Scope
}
ตัวแปร JavaScript ส่วนกลาง
ตัวแปรที่ประกาศนอกฟังก์ชัน จะกลายเป็นGLOBAL
ตัวอย่าง
let carName = "Volvo";
// code here can use carName
function myFunction() {
// code here can also use carName
}
ตัวแปรส่วนกลางมีขอบเขตทั่วโลก :
สคริปต์และฟังก์ชันทั้งหมดบนหน้าเว็บสามารถเข้าถึงได้
ขอบเขตทั่วโลก
ตัวแปรที่ประกาศทั่วโลก (นอกฟังก์ชันใดๆ) มี Global Scope
ตัวแปร ส่วนกลางสามารถเข้าถึงได้จากทุกที่ในโปรแกรม JavaScript
ตัวแปรที่ประกาศด้วย
และvarค่อนข้างคล้ายกันเมื่อประกาศนอกบล็อกletconst
พวกเขาทั้งหมดมีขอบเขตทั่วโลก :
var x = 2;
// Global scope
let x = 2; //
Global scope
const x = 2; //
Global scope
ตัวแปร JavaScript
ใน JavaScript ออบเจ็กต์และฟังก์ชันก็เป็นตัวแปรเช่นกัน
ขอบเขตกำหนดความสามารถในการเข้าถึงของตัวแปร ออบเจ็กต์ และฟังก์ชันจากส่วนต่างๆ ของโค้ด
ทั่วโลกโดยอัตโนมัติ
หากคุณกำหนดค่าให้กับตัวแปรที่ยังไม่ได้ประกาศ ค่านั้นจะกลายเป็นตัวแปรGLOBAL โดยอัตโนมัติ
ตัวอย่างโค้ดนี้จะประกาศตัวแปรส่วนกลางcarNameแม้ว่าค่าจะถูกกำหนดภายในฟังก์ชันก็ตาม
ตัวอย่าง
myFunction();
// code here can use carName
function myFunction() {
carName = "Volvo";
}
โหมดเข้มงวด
เบราว์เซอร์ที่ทันสมัยทั้งหมดรองรับการเรียกใช้ JavaScript ใน "โหมดเข้มงวด"
คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับวิธีใช้โหมดเข้มงวดในบทต่อๆ ไปของบทช่วยสอนนี้
ใน "โหมดเข้มงวด" ตัวแปรที่ไม่ได้ประกาศจะไม่เป็นสากลโดยอัตโนมัติ
ตัวแปรส่วนกลางใน HTML
ด้วย JavaScript ขอบเขตส่วนกลางคือสภาพแวดล้อม JavaScript
ใน HTML ขอบเขตส่วนกลางคือวัตถุหน้าต่าง
ตัวแปรโกลบอลที่กำหนดด้วยvarคีย์เวิร์ดเป็นของวัตถุหน้าต่าง:
ตัวอย่าง
var carName = "Volvo";
// code here
can use window.carName
ตัวแปรโกลบอลที่กำหนดด้วยletคีย์เวิร์ดไม่อยู่ในอ็อบเจ็กต์ window:
ตัวอย่าง
let carName = "Volvo";
// code here can not use window.carName
คำเตือน
อย่าสร้างตัวแปรส่วนกลางเว้นแต่คุณจะตั้งใจ
ตัวแปรส่วนกลางของคุณ (หรือฟังก์ชัน) สามารถเขียนทับตัวแปรหน้าต่าง (หรือฟังก์ชัน)
ฟังก์ชันใดๆ รวมถึงอ็อบเจ็กต์หน้าต่าง สามารถเขียนทับตัวแปรและฟังก์ชันส่วนกลางของคุณได้
อายุการใช้งานของตัวแปร JavaScript
อายุของตัวแปร JavaScript เริ่มต้นเมื่อมีการประกาศ
ตัวแปรของฟังก์ชัน (ในเครื่อง) จะถูกลบออกเมื่อฟังก์ชันเสร็จสิ้น
ในเว็บเบราว์เซอร์ ตัวแปรร่วมจะถูกลบออกเมื่อคุณปิดหน้าต่างเบราว์เซอร์ (หรือแท็บ)
อาร์กิวเมนต์ฟังก์ชัน
อาร์กิวเมนต์ของฟังก์ชัน (พารามิเตอร์) ทำงานเป็นตัวแปรภายในฟังก์ชัน