Bài 24: Biến toàn cục và biến cục bộ trong Javascript

Biến toàn cụcbiến cục bộ là những khái niệm mà bất kì một ngôn ngữ lập trình nào đều có và Javascript cũng không ngoại lệ. Nhưng với javascript thì có một số lưu ý khác với các ngôn ngữ khác nếu trong ứng dụng của bạn trùng tên biến quá nhiều từ trong hàm cho đến ngoài hàm thì đôi khi dẫn đến những kết quả không mong muốn.

1. Biến cục bộ trong Javascript

Một biến được gọi là cục bộ khi bạn khai báo nó nằm bên trong một hàm cụ thể nào đó, lúc này biến đó sẽ không sử dụng được ở bên ngoài hàm.

Ví dụ: Trong ví dụ này đoạn code alert() biến comment ở ngoài function add_comment() sẽ thông báo lỗi vì nó chưa được định nghĩa

function add_comment()
{
    var comment = "Nội dung comment"; 
    
    // Đoạn code này đúng vì biến comment đã tồn tại
    alert(comment);
}

// Đoạn code này sẽ sai vì không tồn tại biến comment
alert(comment);

2. Biến toàn cục trong Javascript

Biến toàn cục là biến mà bạn khai báo bên ngoài và không nằm bên trong một hàm cụ thể nào cả.

Ví dụ: Trong ví dụ này không có đoạn code nào sai cả

// Biến toàn cục
var comment = "Nội dung comment bên ngoài";

// Hàm có sử dụng biến toàn cục
function add_comment()
{
    alert(comment);
}

// In biến toàn cục
alert(comment);

3. Một số ví dụ biến toàn cục và biến cục bộ

Cách sử dụng biến toàn cục và biến cục bộ trong javascript có rất nhiều lưu ý nên trong phần này chúng ta sẽ tìm hiểu thông qua các ví dụ nhé.

Nếu trong hàm có sử dụng từ khóa var và để tạo một biến và tên của biến đó đã tồn tại ở bên ngoài (toàn cục) thì lúc này bên trong hàm nó sẽ hiểu là đang sử dụng biến cục bộ chứ không ảnh hưởng gì biến bên ngoài cả.

Ví dụ: XEM DEMO

<html>
    <body>
        <script language="javascript">
          
          // Biến toàn cục
          var comment = "Nội dung comment toàn cục";
          
          // Hàm có sử dụng biến toàn cục
          function add_comment()
          {
             var comment = "Nội dung comment cục bộ";
           	 alert(comment);
          }
          
          // Gọi fuction comment
          add_comment();
          
          // In biến toàn cục
          alert(comment);
          
        </script>
    </body>
</html>

Nếu bạn không sử dụng từ khóa var để tạo tên biến trong hàm thì nó sẽ sử dụng biến toàn cục nên mọi thay đổi của biến đó trong hàm sẽ bị ảnh hưởng ra ngoài hàm.

Ví dụ: XEM DEMO

<html>
    <body>
        <script language="javascript">
          
          // Biến toàn cục
          var comment = "Nội dung comment trước khi thay đổi";
          
          // Hàm có sử dụng biến toàn cục
          function add_comment()
          {
             comment = "Nội dung comment đa bị thay đổi";
          	 alert(comment);
          }
          
          // Gọi fuction comment
          add_comment();
          
          // In biến toàn cục
          alert(comment);
          
        </script>
    </body>
</html>

Nếu liên tưởng qua ngôn ngữ PHP thì không thể thực hiện như hai ví dụ này được mà nó phải thông qua một từ khóa nữa đó là global thì trong hàm mới sử dụng được biến toàn cục ở ngoài hàm.

4. Lời kết

Tóm lại biến toàn cục là biến được khai báo bên ngoài hàm  và được sử dụng ở tất cả các vị trí. Biến cục bộ là biến khai báo ở trong hàm và chỉ sử dụng được trong nội bộ của hàm đó thôi, sau khi hàm thực thi xong thì ngay lập tức nó sẽ bị xóa khỏi bộ nhớ. Và một chú ý là ở phần ví dụ bạn cần hiểu được trường hợp ghi đè tên biến thông qua từ khóa var ở trong hàm nhé.

Hãy để lại link bài viết gốc khi chia sẻ bài viết này, mình sẽ report DMCA với những website lấy nội dung mà không để nguồn hoặc copy bài với số lượng lớn.

Nguồn: freetuts.net

Profile photo of adminTheHalfHeart

TheHalfHeart

Có sở thích viết tuts nên đã từng tham gia viết ở một số diễn đàn, đến năm 2014 mới có điều kiện sáng lập ra freetuts.net. Sinh năm 90 và có 1 vợ 2 con, thích ca hát và lập trình.

ĐĂNG BÌNH LUẬN: Đăng câu hỏi trên Group Facebook để được hỗ trợ nhanh nhất.