Phạm vi hoạt động như thế nào trong JavaScript

Tìm hiểu về cách Scope hoạt động trong JavaScript và sự khác biệt giữa Global Scope, Local Scope và Lexical Scope.

Phạm vi đề cập đến ngữ cảnh mà các hàm hoặc biến có thể truy cập được. JavaScript có ba loại phạm vi, phạm vi toàn cầu, phạm vi cục bộ, phạm vi từ vựng:

• Một biến tổng thể là một biến được khai báo bên ngoài một khối mã
• Một biến cục bộ là một biến được khai báo bên trong một khối mã

Điều cần biết: các hàm có thể truy cập các biến và các hàm khác được đặt bên ngoài chính chúng - nhưng không phải là các biến được đặt bên trong các chức năng khác.

Nó sẽ có ý nghĩa sau một phút.

Phạm vi toàn cầu

Bất kỳ biến hoặc hàm nào trong phạm vi toàn cục đều có thể truy cập được bên trong các hàm khác:

// 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()

Điều đó bao gồm các chức năng bên trong các chức năng:

// 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()

Phạm vi cục bộ

Một biến hoặc hàm có phạm vi cục bộ chỉ là khả năng truy cập từ trong ngữ cảnh (phạm vi) của chính nó:

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

Biến dogBreed có phạm vi cục bộ và nó chỉ có thể được truy cập từ trong phạm vi của nó (bên trong dấu ngoặc nhọn { .. } )

Đây là mã tương tự như trên, nhưng lần này chúng tôi di chuyển console.log(dogBreed) bên ngoài phạm vi địa phương, vì vậy nó hiện đang ở phạm vi toàn cầu:

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

Bạn gặp lỗi tham chiếu cho biết “dog breed is not defined” , bởi vì bạn đang cố gắng đăng xuất một biến có phạm vi cục bộ khỏi phạm vi toàn cầu.

Lexical scope

Khi bạn làm tổ các hàm (đặt các hàm bên trong các hàm), các biến và hàm bên trong hàm mẹ (hàm ngoài cùng) có thể được truy cập bởi các hàm bên trong. Đây được gọi là phạm vi từ vựng.

Tuy nhiên, bản thân hàm cha (ngoài cùng) không thể truy cập các biến hoặc hàm bên trong các hàm bên trong. Nghe có vẻ khó hiểu hơn thực tế, hãy xem một ví dụ, sau đó nó sẽ có ý nghĩa:

// 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()