Scope trong JavaScript là gì

Scope trong JavaScript là gì?

Anh NguyễnBạn nghĩ gì về bài viết này?

Scope trong JavaScript là gì?

Scope trong JavaScript là gì

Scope trong JavaScript (phạm vi trong JavaScript) xác định khả năng truy cập của các biến, đối tượng và hàm.

Có hai loại scope trong JavaScript:

  • Global scope (Toàn cục)
  • Local scope (Cục bộ)

Global scope

Các biến được khai báo bên ngoài của bất kỳ hàm nào sẽ trở thành biến toàn cục. Các biến toàn cục có thể được truy cập và sửa đổi từ bất kỳ hàm nào.

var userName = "Bill";

    function modifyUserName() {
            userName = "Steve";
        };

    function showUserName() {
            alert(userName);
        };

    alert(userName); // display Bill
    
    modifyUserName();
    showUserName();// display SteveCode language: JavaScript (javascript)

Trong ví dụ trên, biến userName trở thành biến toàn cục vì nó được khai báo bên ngoài bất kỳ hàm nào. Một hàm modUserName() sửa đổi userName vì userName là một biến toàn cục và có thể được truy cập bên trong bất kỳ hàm nào.

Theo cách tương tự, hàm showUserName() hiển thị giá trị hiện tại của biến userName. Thay đổi giá trị của biến toàn cục trong bất kỳ hàm nào sẽ phản ánh trong suốt chương trình.

Xin lưu ý rằng các biến được khai báo bên trong một hàm không có từ khóa var cũng trở thành các biến toàn cục.

function createUserName() {
        userName = "Bill";
    }

    function modifyUserName() {
        if(userName)
            userName = "Steve";
    };

    function showUserName() {
        alert(userName);  
    }
    
    createUserName();
    showUserName(); // Bill 

    modifyUserName();
    showUserName(); // Steve Code language: JavaScript (javascript)

Trong ví dụ trên, biến userName được khai báo mà không có từ khóa var bên trong createUserName(), vì vậy nó sẽ tự động trở thành biến toàn cục sau khi gọi createUserName() lần đầu tiên.

Lưu ý: Một biến userName sẽ trở thành biến toàn cục chỉ sau khi createUserName() được gọi ít nhất một lần. Việc gọi showUserName() trước createUserName() sẽ ném ra một ngoại lệ ‘userName is not defined’.

Local scope

Scope trong JavaScript là gì

Các biến được khai báo bên trong bất kỳ hàm nào có từ khóa var được gọi là biến cục bộ. Không thể truy cập hoặc sửa đổi các biến cục bộ bên ngoài khai báo hàm.

function createUserName() {
        var userName = "Bill";
    }

    function showUserName() {
        alert(userName);
    }

    createUserName();
    showUserName();
    // throws error: userName is not definedCode language: JavaScript (javascript)

Trong ví dụ trên, userName là cục bộ của hàm createUserName(). Nó không thể được truy cập trong hàm showUserName() hoặc bất kỳ hàm nào khác.

Nó sẽ xuất hiện một lỗi nếu bạn cố gắng truy cập một biến không thuộc phạm vi cục bộ hoặc toàn cục. Sử dụng khối try catch để xử lý ngoại lệ.

Lưu ý:

Nếu biến cục bộ và biến toàn cục có cùng tên thì việc thay đổi giá trị của một biến không ảnh hưởng đến giá trị của biến khác.

var userName = "Bill";

function ShowUserName()
{
    var userName = "Steve";

    alert(userName); // "Steve"
}

ShowUserName();

alert(userName); // BillCode language: JavaScript (javascript)

JavaScript không cho phép phạm vi cấp khối bên trong {}. Ví dụ, các biến được xác định trong khối if có thể được truy cập bên ngoài khối if, bên trong một hàm.

function NoBlockLevelScope(){
    
    if (1 > 0)
    {
        var myVar = 22;

    }

    alert(myVar);
}

NoBlockLevelScope();Code language: JavaScript (javascript)

Kết luận

Scope trong JavaScript là gì

Trên đây là toàn bộ lý thuyết và ví dụ giúp bạn trả lời cho câu hỏi ‘Scope trong JavaScript là gì?’. Về phần này, chỉ cần bạn hiểu được bản chất giữa các scope trong JavaScript là hoàn toàn có thể ứng dụng được chúng trong thực tế.

Dưới đây là một số điểm cần ghi nhớ:

  • JavaScript có phạm vi toàn cầu và phạm vi cục bộ.
  • Các biến được khai báo và khởi tạo bên ngoài bất kỳ hàm nào sẽ trở thành biến toàn cục.
  • Các biến được khai báo và khởi tạo bên trong hàm sẽ trở thành các biến cục bộ của hàm đó.
  • Các biến được khai báo không có từ khóa var bên trong bất kỳ hàm nào sẽ tự động trở thành các biến toàn cục.
  • Các biến toàn cục có thể được truy cập và sửa đổi ở bất kỳ đâu trong chương trình.
  • Không thể truy cập các biến cục bộ bên ngoài khai báo hàm.
  • Biến toàn cục và biến cục bộ có thể trùng tên mà không ảnh hưởng đến nhau.
  • JavaScript không cho phép phạm vi cấp khối bên trong dấu ngoặc vuông {}.

Cảm ơn bạn đã theo dõi bài viết!

Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.

TỔNG HỢP TÀI LIỆU HỌC LẬP TRÌNH CƠ BẢN CHO NGƯỜI MỚI BẮT ĐẦU

KHOÁ HỌC BOOTCAMP JAVA/JAVASCRIPT/PHP TRỞ THÀNH LẬP TRÌNH VIÊN TRONG 5-6 THÁNG

Bình luận