ทำความเข้าใจขอบเขตใน JavaScript

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

ขอบเขตใน JavaScript กำหนดบริบทปัจจุบันของโค้ด ในระดับพื้นฐาน มีสองขอบเขตภายใน JavaScript คือขอบเขตส่วนกลางและขอบเขตท้องถิ่น และโดยพื้นฐานแล้วจะกำหนดว่าตัวแปรใดที่สามารถเข้าถึงได้และมองเห็นได้เมื่อโค้ดกำลังทำงาน

ขอบเขตทั่วโลกคืออะไร?

ใน JavaScript โปรแกรมของเรามีขอบเขตเดียวทั่วโลก ตัวแปรที่อยู่ในขอบเขตส่วนกลางสามารถเข้าถึงได้ เปลี่ยนแปลงได้ และมองเห็นได้จากทุกที่ภายในโค้ดของเรา ตัวแปรในขอบเขตส่วนกลางจะพร้อมใช้งานตลอดอายุการใช้งานที่โปรแกรมของเรารัน ตัวแปรที่ถูกประกาศนอกฟังก์ชันหรือบล็อกเป็นส่วนหนึ่งของขอบเขตส่วนกลาง

สิ่งสำคัญคือต้องคำนึงถึงเมื่อเราประกาศตัวแปรในขอบเขตทั่วโลกว่าเหตุใดเราจึงทำเช่นนี้ การประกาศตัวแปรในขอบเขตส่วนกลางอาจกินหน่วยความจำเมื่อโปรแกรมทำงาน และเหตุการณ์การตั้งชื่ออาจเกิดขึ้นได้เมื่อมีการประกาศตัวแปรที่มีชื่อเดียวกันแยกกันภายในขอบเขตที่แตกต่างกันของโค้ดของเรา ด้านล่างนี้เป็นตัวอย่างของตัวแปรที่ประกาศในขอบเขตส่วนกลาง

var ourGlobalVariable = "Hello";
function someFunction() {
  return ourGlobalVariable;
}
someFunction();
//Returns ---> 'Hello'

ในตัวอย่างข้างต้น เราประกาศตัวแปรโกลบอล ourGlobalVariable และเราเริ่มต้นด้วยสตริง hello ต่อไป เราจะกำหนดฟังก์ชันที่เรียกว่า someFunction ซึ่งจะส่งคืน ourGlobalVariable เมื่อมันถูกเรียกใช้ สุดท้ายนี้ เราไปเรียกใช้ฟังก์ชัน someFunction ซึ่งจะส่งคืนสตริงจาก ourGlobalVariable ทั้งหมดนี้เป็นไปได้เพียงเพราะ ourGlobalVariable อยู่ในขอบเขตส่วนกลางและสามารถเข้าถึงได้จากทุกที่

ขอบเขตท้องถิ่นคืออะไร?

เมื่อใดก็ตามที่มีการสร้างขอบเขตใหม่ภายในขอบเขตส่วนกลาง ตัวอย่างเช่น ทุกครั้งที่คุณสร้างฟังก์ชัน ขอบเขตภายในเครื่องใหม่จะถูกสร้างขึ้น ตัวแปรใดๆ ที่สร้างขึ้นภายในขอบเขตภายในนี้จะสามารถเข้าถึงได้จากภายในฟังก์ชันนี้เท่านั้น พารามิเตอร์ฟังก์ชันยังได้รับการจัดประเภทว่าอยู่ภายในขอบเขตท้องถิ่น หากคุณพยายามเข้าถึงจากภายนอกฟังก์ชัน JavaScript จะเกิดข้อผิดพลาด

เนื่องจาก ES6 เราสามารถแบ่งขอบเขตภายในออกเป็นสองส่วน ได้แก่ ขอบเขตฟังก์ชันและขอบเขตบล็อก เมื่อเราใช้ตัวแปรทุกวันนี้ เรามักจะใช้ let หรือ const. เมื่อพิจารณาจากจำนวนโค้ดที่เขียนก่อน ES6 ยังคงคุ้มค่าที่จะทำความคุ้นเคยกับ var. ตัวแปรแต่ละตัวเหล่านี้ใช้ขอบเขตที่แตกต่างกันดังที่แสดงด้านล่าง:

• var: ฟังก์ชั่นกำหนดขอบเขต
• const: บล็อกกำหนดขอบเขต
• ให้: บล็อกขอบเขต

ขอบเขตฟังก์ชันคืออะไร?

เมื่อมีการกำหนดตัวแปรภายในฟังก์ชัน เราสามารถพูดได้ว่าตัวแปรนั้นอยู่ในขอบเขตของฟังก์ชัน หากคุณพยายามเข้าถึงตัวแปรภายในเครื่องจากภายนอกฟังก์ชัน พบว่ามีข้อผิดพลาดเกิดขึ้น โดยเฉพาะข้อผิดพลาดในการอ้างอิงจะถูกส่งออกไปเมื่อคุณเรียกใช้โค้ด ตัวแปรที่กำหนดด้วยคีย์เวิร์ด let และ const จะทำงานในลักษณะเดียวกันในขอบเขตฟังก์ชันเหมือนกับที่ทำในขอบเขตบล็อก

function someFunction() {
  let ourLocalVariable = "Hello";
  return ourLocalVariable;
}
console.log(ourLocalVariable);
//Returns ---> VM95:7 Uncaught ReferenceError: ourGlobalVariable is not defined

ในตัวอย่างข้างต้น เรากำหนดฟังก์ชันที่เรียกว่า someFunction ภายในบางฟังก์ชัน ขั้นแรกเราจะประกาศตัวแปรชื่อ ourLocalVariable ซึ่งเริ่มต้นด้วยสตริง Hello ฟังก์ชันจะส่งกลับตัวแปร ภายนอกฟังก์ชัน ดังนั้นย้อนกลับไปในขอบเขตส่วนกลาง เราจึงพยายาม console.log out ค่าของ ourLocalVariable เราได้รับข้อผิดพลาดในการอ้างอิงส่งคืนเนื่องจากเราพยายามเข้าถึงตัวแปรที่กำหนดขอบเขตในเครื่องจากขอบเขตส่วนกลาง

function someFunction() {
  const ourGlobalVariable = "Hello";
  return ourGlobalVariable;
}
console.log(ourGlobalVariable);
//Returns ---> VM95:7 Uncaught ReferenceError: ourGlobalVariable is not defined

ในตัวอย่างถัดไป เราทำซ้ำขั้นตอนเดียวกันโดยใช้ตัวแปรที่สร้างโดยใช้ const เนื่องจาก const และ let ต่างก็มีขอบเขตเป็นบล็อก เราประสบปัญหาเดียวกัน

ขอบเขตบล็อกคืออะไร?

ใน JavaScript บล็อกคือโค้ดชิ้นหนึ่งที่ซ้อนอยู่ในเครื่องหมายปีกกาคู่หนึ่ง คำสั่งแบบมีเงื่อนไขและลูปเป็นทั้งตัวอย่างของบล็อก

ขอบเขตของบล็อกหมายความว่าทุกครั้งที่มีการสร้างบล็อก ขอบเขตท้องถิ่นใหม่ก็เช่นกัน เมื่อเราสร้างตัวแปรภายในบล็อก ตัวแปรนั้นจะถูกกำหนดขอบเขตไว้ที่บล็อกนั้น ซึ่งหมายความว่าตัวแปรจะไม่สามารถเข้าถึงได้จากภายนอกบล็อก หากคุณพยายามเข้าถึงตัวแปรที่กำหนดไว้ภายในบล็อกจากภายนอกบล็อก JavaScript จะส่งข้อผิดพลาด (ข้อผิดพลาดในการอ้างอิง) ขอบเขตของบล็อกจะไม่ใช้เมื่อเรากำหนดตัวแปรด้วยคีย์เวิร์ด var

function ourScopeExample(){
    if (true){
        var one = "I was created using var";

    }
    console.log(one);
}

ourScopeExample();
//Returns ---> I was created using var

ในตัวอย่างข้างต้น เราสร้างฟังก์ชันชื่อ ourScopeExample ภายในฟังก์ชัน เราสร้างบล็อกโดยใช้คำสั่ง if ภายในคำสั่ง if เราจะสร้างตัวแปรชื่อ หนึ่งซึ่งเริ่มต้นด้วยสตริง นอกบล็อก จากนั้นเราจะพยายาม console.log ค่าของตัวแปร หนึ่ง สุดท้ายนี้ เราเรียกใช้ฟังก์ชัน ourScopeExample . เมื่อโค้ดนี้รันสตริงที่ หนึ่ง ถูกเตรียมใช้งานจะถูกพิมพ์ไปยังคอนโซล เหตุผลที่ใช้งานได้ก็คือ var มีการกำหนดขอบเขตฟังก์ชัน ดังนั้นจึงไม่มีการใช้กฎการกำหนดขอบเขตแบบบล็อก

function ourScopeExample(){
    if(true){
        let two = "I was created using let";

    }
    console.log(two);
}

ourScopeExample();
//Returns ---> Uncaught ReferenceError: two is not defined

ตอนนี้เราไปข้างหน้าและทำซ้ำขั้นตอนเดียวกัน แต่คราวนี้เราใช้ Let แทน var เมื่อโค้ดทำงานในช่วงเวลานี้ ข้อผิดพลาดในการอ้างอิงจะถูกส่งกลับ เนื่องจากให้อยู่ในขอบเขตบล็อกและไม่สามารถเข้าถึงได้จากภายนอกบล็อกที่ถูกสร้างขึ้น หากเราต้องการให้โค้ดนี้ทำงาน เราจะต้องดำเนินการบางอย่างตามตัวอย่างต่อไปนี้

function ourScopeExample(){
    if(true){
        let two = "I was created using let";
        console.log(two);
    }
}

ourScopeExample();
//Returns ---> I was created using let

อีกทางหนึ่ง เราสามารถนำการอนุญาตออกไปนอกขอบเขตของบล็อกและเข้าสู่ขอบเขตภายนอกของฟังก์ชันได้ สิ่งนี้นำเราไปสู่ขอบเขตคำศัพท์

function ourScopeExample(){
    let two = "I was created using let";
    if(true){
        console.log(two);
    }
}

ourScopeExample();
//Returns ---> I was created using let

ขอบเขตคำศัพท์

ขอบเขตคำศัพท์เป็นวิธีที่ขอบเขตฟังก์ชันสามารถเข้าถึงตัวแปรจากขอบเขตภายนอกหรือขอบเขตหลักได้ ฟังก์ชันภายในหรือฟังก์ชันย่อยถูกผูกไว้กับฟังก์ชันภายนอก/พาเรนต์ ซึ่งหมายความว่าฟังก์ชันอาจเข้าถึงขอบเขตทั้งหมดตั้งแต่ขอบเขตของตนเองไปจนถึงและรวมถึงขอบเขตส่วนกลางด้วย

function outerParent(){
    var one = "I was created using var";        
    let two = "I was created using let";
    function innerChild(){
        console.log(one);
        console.log(two);
    }
    innerChild();
}

outerParent();
//Returns --->
//I was created using var
//I was created using let

ตัวอย่างข้างต้นให้อีกตัวอย่างหนึ่งของขอบเขตคำศัพท์ เราสร้างฟังก์ชันที่เรียกว่า outerParent ภายในซึ่งเราสร้างตัวแปรสองตัว หนึ่ง ซึ่งสร้างด้วย var และ two ซึ่งสร้างด้วย let ตัวแปรทั้งสองนี้เริ่มต้นด้วยสตริง ต่อไป เราจะสร้างฟังก์ชันอื่นขึ้นมาและเรียกฟังก์ชันนี้ว่า innerChild ภายในฟังก์ชัน innerChild เราจะบันทึกค่าของตัวแปร หนึ่ง และ สอง ภายนอกฟังก์ชัน innerChild โดยตรง เราจะเรียกใช้ฟังก์ชัน innerChild สุดท้ายนี้ ภายนอกฟังก์ชัน outerParent เราจะเรียกใช้ฟังก์ชัน outerParent เมื่อโค้ดนี้ทำงานบน console.logs ทั้งสองจะทำงานได้สำเร็จ

ฉันหวังว่าคุณจะชอบบทความนี้ โปรดอย่าลังเลที่จะแสดงความคิดเห็น คำถาม หรือข้อเสนอแนะ และติดตามฉันสำหรับเนื้อหาเพิ่มเติม!