Cách Scope Hoạt Động Trong JavaScript

Học về cách Scope hoạt động trong JavaScript và sự khác biệt giữa Global Scope, Local Scope, và Lexical Scope.

Scope ám chỉ ngữ cảnh mà function hoặc variable có thể truy cập. JavaScript có ba kiểu scope: global scope, local scope, lexical scope:

• Global variable là biến khai báo bên ngoài block code
• Local variable là biến khai báo bên trong block code

Tốt để biết: function có thể truy cập biến và function khác được đặt bên ngoài chính nó — nhưng không truy cập biến đặt bên trong function khác.

Sẽ hiểu ngay thôi.

Global Scope

Bất kỳ biến hoặc function nào trong global scope đều truy cập được bên trong function khác:

// Global scope let dogBreed = "Labrador" let getDogBreed = function() { // dogBreed truy cập được vì ở global scope console.log(dogBreed) // "Labrador" } // Chạy function getDogBreed()

Điều đó bao gồm function bên trong function:

// Global scope let dogBreed = "Labrador" let getDogBreed = function() { // function bên trong function let getDogBreedFromGlobalScope = function() { // truy cập dogBreed từ global scope console.log(dogBreed) // "Labrador" } // Chạy function getDogBreedFromGlobalScope() } // Chạy function getDogBreed()

Local Scope

Biến hoặc function với local scope chỉ truy cập được từ bên trong ngữ cảnh (scope) của nó:

let getDogBreed = function() { // local variable scope let dogBreed = "Labrador" // Truy cập được dogBreed vì nó local console.log(dogBreed) // "Labrador }

Biến dogBreed có local scope, chỉ truy cập được từ trong scope của nó (bên trong ngoặc nhọn { .. })

Cùng mã trên, nhưng lần này di chuyển console.log(dogBreed) ra khỏi local scope, giờ nó ở global scope:

let getDogBreed = function() { // local variable scope let dogBreed = "Labrador" } // Thử truy cập biến local scope console.log(dogBreed) // Uncaught ReferenceError: dogBreed is not defined

Bạn nhận reference error "dog breed is not defined", vì bạn cố log biến local scope từ global scope.

Lexical Scope

Khi bạn nest function (đặt function trong function), biến và function trong parent function (function ngoài cùng) có thể được truy cập bởi inner function. Đây gọi là lexical scope.

Tuy nhiên, parent function (ngoài cùng) bản thân không thể truy cập biến hoặc function trong inner function. Nghe rối hơn thực tế, xem ví dụ sẽ hiểu:

// Global scope let animals = function() { // Lexical scope let dogBreed = "Labrador" // Nested function let getAnimals = function() { // Truy cập dogBreed vì nó trong lexical scope console.log(dogBreed) // "Labrador" // Biến local scope ở đây let catBreed = "Persian" console.log(catBreed) // "Persian" } // Chạy function getAnimals() // Điều này hoạt động vì dogBreed ở lexical scope console.log(dogBreed) // "Labrador" // Điều này KHÔNG hoạt động, vì catBreed không ở lexical scope, nó local cho getAnimals() function console.log(catBreed) // Uncaught ReferenceError: catBreed is not defined } animals()