ขอบเขตทำงานอย่างไรใน JavaScript

เรียนรู้เกี่ยวกับวิธีการทำงานของ Scope ใน JavaScript และความแตกต่างระหว่าง Global Scope, Local Scope และ Lexical Scope

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

• A ตัวแปรส่วนกลาง เป็นตัวแปรที่ประกาศนอกบล็อคโค้ด
• A ตัวแปรท้องถิ่น เป็นตัวแปรที่ประกาศภายในบล็อคโค้ด

นานาน่ารู้: ฟังก์ชั่นสามารถเข้าถึงตัวแปรและฟังก์ชั่นอื่น ๆ ที่ตั้งค่า ภายนอก ตัวเอง — แต่ไม่ใช่ตัวแปรที่ตั้งค่า ภายใน ฟังก์ชันอื่นๆ

มันจะสมเหตุสมผลในไม่กี่นาที

ขอบเขตทั่วโลก

ตัวแปรหรือฟังก์ชันใดๆ ในขอบเขตส่วนกลางสามารถเข้าถึงได้ภายในฟังก์ชันอื่นๆ:

// Global scope
let dogBreed = "Labrador"

let getDogBreed = function() {
  // dogBreed is accessible because it’s in the global scope
  console.log(dogBreed)
  // "Labrador"
}

// Run function
getDogBreed()

ซึ่งรวมถึง ฟังก์ชันภายในฟังก์ชัน:

// Global scope
let dogBreed = "Labrador"

let getDogBreed = function() {
  // function inside function
  let getDogBreedFromGlobalScope = function() {
    // accesses dogBreed from the global scope
    console.log(dogBreed)
    // "Labrador"
  }
  // Run function
  getDogBreedFromGlobalScope()
}

// Run function
getDogBreed()

ขอบเขตท้องถิ่น

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

let getDogBreed = function() {
  // local variable scope
  let dogBreed = "Labrador"
  // We can access the dogBreed variable because it’s local
  console.log(dogBreed)
  // "Labrador
}

ตัวแปร dogBreed มีขอบเขตท้องถิ่นและสามารถเข้าถึงได้จากภายในขอบเขตเท่านั้น (ภายในวงเล็บปีกกา{ .. } )

นี่คือรหัสเดียวกันกับด้านบน แต่คราวนี้เราย้าย console.log(dogBreed) นอกขอบเขตท้องถิ่น ดังนั้นตอนนี้จึงอยู่ในขอบเขตส่วนกลาง:

let getDogBreed = function() {
  // local variable scope
  let dogBreed = "Labrador"
}

// Try to access a locally scoped variable
console.log(dogBreed)
// Uncaught ReferenceError: dogBreed is not defined

คุณได้รับข้อผิดพลาดในการอ้างอิงที่ระบุว่า “dog breed is not defined” เนื่องจากคุณกำลังพยายามล็อกเอาต์ตัวแปรที่กำหนดขอบเขตในเครื่องจากขอบเขตส่วนกลาง

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

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

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

// Global scope
let animals = function() {
  // Lexical scope
  let dogBreed = "Labrador"
  // Nested function
  let getAnimals = function() {
    // We can access dogBreed because it's in the lexical scope
    console.log(dogBreed)
    // "Labrador"

    // Here’s a locally scoped variable
    let catBreed = "Persian"
    console.log(catBreed)
    // "Persian"
  }
  // Run function
  getAnimals()

  // This works because the dogBreed variable is in the lexical scope
  console.log(dogBreed)
  // "Labrador"

  // This won’t work, because catBreed is not in the lexical scope, it’s local to the getAnimals() function
  console.log(catBreed)
  // Uncaught ReferenceError: catBreed is not defined
}

animals()