HTML - CSS - Javascript

Phạm Vi Của Biến (variable scope) trong javascript

Phạm vi của biến (variable scope) hay còn gọi là Tầm biến. Khi được định nghĩa ở ngoài hàm biến sẽ có phạm vi global, ngược lại khi định nghĩa trong hàm biến có phạm vi local (chỉ có thể truy cập biến trong phạm vi hàm đó).

Ví dụ:

var globalVar = 3;
function myFunction() {
    var localVar = 5;
    document.getElementById("text1").innerHTML = globalVar;
}
myFunction();

document.getElementById("text2").innerHTML = globalVar;

 

Trường hợp này do biết globaVar được khai báo ở ngoài hàm nên sẽ có phạm vi toàn cục vì vậy chúng ta có thể truy cập được gía trị của biến này ngay ở trong hàm myFunction.

Ngược lại biến localVar do được khái báo bên trong hàm myFunction nên được gọi là biến cục bộ, chúng ta chỉ có thể truy cập giá trị của biến này khi ở trong hàm myFunction:

var globalVar = 3;
function myFunction() {
    var localVar = 5;
    document.getElementById("text1").innerHTML = localVar;
}
myFunction();
document.getElementById("text2").innerHTML = localVar;

 

Ở ví dụ trên phép toán typeof dùng để xác định kiểu dữ liệu của biến trả về undefined khi chúng ta truy cập biến localVar ở ngoài hàm. Điều này có nghĩa là ở phạm vi toàn cục biến localVar chưa được xác định (chưa khai báo).

Từ Khoá var

Ở bài học trước về biến bạn đã biết từ khoá var được sử dụng để khai báo biến. Khi bạn đã khai báo một biến sử dụng từ khoá var trong phạm vi toàn cục rồi thì khi ở bên trong một hàm bạn không cần khai báo lại và lúc này javascript tự hiểu biến này có phạm vi global. Ngược lại nếu bạn tiếp tục sử dụng khai báo sử dụng từ khoá var trong hàm thì JavaScript sẽ hiểu đây là một biến cục bộ khác với biến toàn cục bạn đã khai báo. Ví dụ:

var globalVar = 10;
function myFunction() {
    var globalVar = 5;
    return globalVar;
}
myFunction();
document.getElementsById("text1").innerHTML = myFunction();
document.getElementsById("text2").innerHTML = globalVar;