Hướng dẫn Tìm hiểu phạm vi hoạt động của biến trong Javascript

[PVS]

Tìm hiểu phạm vi hoạt động của biến trong Javascript

Khi định nghĩa một biến trong Javascript, chúng ta cần phải quan tâm đến phạm vi hoạt động của biến. Bởi vì nếu định nghĩa trùng, có khả năng ứng dụng của chúng ta có thể chạy sai vì phạm vi hoạt động của nó đến toàn ứng dụng. Và khi đó, điều mà các bạn cần quan tâm nhất đó chính là khi khởi tao biến có từ khóa “var” hay không có từ khóa “var” sẽ như thế nào trong Javascript.

Lưu ý: Nếu bạn chưa có khái niệm về Hàm hay Function trong các ngôn ngữ lập trình, có thể tạm thời bỏ qua bài viết này và tìm hiểu về Hàm trước.

Định nghĩa biến có từ khóa “var”
1. Định nghĩa biến “a” và dùng hàm “func()” để trả về giá trị của biến “a”:

<script type="text/javascript">
    var a = 'Hello World!';
    function func() {
        return a;
    }
    console.log(func());
</script>

Khi định nghĩa biến “a” bằng từ khóa “var” và nó được định nghĩa bên ngoài hàm “func()” thì lúc đó biến “a” sẽ được xem là biến toàn cục của hàm “func()”. Vì thế để truy cập vào biến “a”, chúng ta chỉ đơn giản gọi tên biến “a” bên trong hàm thì tự động nó sẽ hiểu đó chính là biến “a” mà chúng ta đã định nghĩa bên ngoài hàm.

2. Định nghĩa biến “a” bằng từ khóa “var” và can thiệp biến “a” bên trong “func()”:

<script type="text/javascript">
    var a = 'Hello World!'; 
    function func() {
        a = 'Good Bye!';
        return a;
    }
    console.log(func());
    console.log(a);
</script>

Ví dụ trên cho chúng ta thấy việc chúng ta sử dụng lại biến “a” không có từ khóa “var” bên trong hàm “func()” có thể giúp chúng ta can thiệp vào giá trị của biến “a” đã được định nghĩa bên ngoài hàm “func()” mà không gặp trở ngại nào. Và kết quả trả về là 2 chuỗi “Good Bye!” vì biến “a” bên ngoài hàm “func()” cũng đã bị thay đổi.

3. Định nghĩa biến “a” bằng từ khóa “var” và trong hàm “func()” cũng dùng từ khóa “var”:

<script type="text/javascript">
        var a = 'Hello World!';
    function func() {
        var a = 'Good Bye!';
        return a;
    }
    console.log(func());
    console.log(a);
</script>

Ví dụ này cho chúng ta thấy rất rõ về phạm vi sử dụng biến khi có từ khóa “var” sẽ hoạt động như thế nào. Các bạn có thể thấy rằng biến “a” được định nghĩa bên ngoài hàm “func()” hoàn toàn không bị ảnh hưởng gì khi nó được định nghĩa lại với từ khóa “var” bên trong hàm “func()”.

Kết quả cũng trả về cho chúng ta 2 chuỗi khác biệt, khi chúng ta gọi hàm “func()” đầu tiên và nó đã định nghĩa lại biến “a” bên trong nó, sau đó chúng ta kiểm tra lại giá trị của biến “a” được định nghĩa bên ngoài hàm “func()” có thay đổi hay không thì kết quả cho ta thấy các biến “a” hoàn toàn không bị ảnh hưởng lẫn nhau.

Định nghĩa biến không dùng từ khóa “var”
1. Định nghĩa biến “a” và dùng hàm “func()” để trả về giá trị của biến “a”:

<script type="text/javascript">
    a = 'Hello World!';
    function func() {
        return a;
    }
    console.log(func());
</script>

Như vậy, cách định nghĩa biến “a” không dùng từ khóa “var” vẫn không khác với việc chúng ta sử dụng từ khóa “var” trong trường hợp này.

2. Định nghĩa biến “a” không dùng từ khóa “var” và can thiệp biến “a” bên trong hàm “func()”:

<script type="text/javascript">
    a = 'Hello World!';
    function func() {
        a = 'Good Bye!';
        return a;
    }
    console.log(func());
    console.log(a);
</script>

Cũng như ví dụ trước đó khi không dùng từ khóa “var” và cả khi dùng từ khóa “var” thì vẫn không có sự khác biệt khi chúng ta can thiệp vào giá trị của biến “a” bằng cách gán giá trị cho nó bên trong hàm “func()” mà không cần định nghĩa lại biến “a” bằng từ khóa “var”. Thì nó vẫn sẽ hiểu đây là biến “a” đã được định nghĩa bên ngoài hàm “func()”.

3. Định nghĩa biến “a” không dùng từ khóa “var” và can thiệp biến “a” bên trong hàm “func()” nhưng dùng từ khóa “var” để định nghĩa lại biến “a”:

<script type="text/javascript">
        a = 'Hello World!';
        function func() {
             var a = 'Good Bye!';
         return a;
    }
    console.log(func());
    console.log(a);
</script>

Như vậy, ví dụ này cho ta thấy rằng việc sử dụng từ khóa “var” bên trong hàm “func()” khiến biến “a” được định nghĩa không dùng từ khóa “var” bên ngoài hàm “func()” hoàn toàn bị bỏ qua và biến “a” trong hàm “func()” chỉ có hiệu lực hoạt động trong phạm vi hàm “func()” mà thôi. Và trong ví dụ này cũng không hoàn toàn khác với cách dùng từ khóa “var”.

Tuy nhiên, ví dụ cuối cùng sau đây sẽ khiến bạn không ít bối rối khi nhìn qua:

1. Có từ khóa “var”:

<script type="text/javascript">
    function func() {
        var a = 'Hello World!';
        return a;
    }
    console.log(func());
    console.log(a);
</script>

Như chúng ta thấy, thì hàm “func()” chạy hoàn toàn bình thường. Tuy nhiên, khi chúng ta truy cập biến “a” bên trong hàm “func()” bên ngoài hàm “func()” thì chúng ta đã gặp lỗi chưa định nghĩa biến “a” này. Nhưng chúng ta hãy khoan quan tâm tìm hiểu đến vấn đề vì sao chúng ta gặp lỗi mà hãy xem tiếp ví dụ sau đây.

2. Không có từ khóa “var”:

<script type="text/javascript">
    function func() {
        a = 'Hello World!';
        return a;
    }
    console.log(func());
    console.log(a);
</script>

Thật bất ngờ! Biến “a” của chúng ta đã được hiểu là biến đã được định nghĩa. Trong khi đó, biến “a” chỉ được định nghĩa khi nó trong hàm “func()” mà thôi. Và khi đó, khi hàm “func()” được gọi trước khi chúng ta dùng “console.log(a)” để kiểm tra biến “a” thì nó cũng ngầm định nghĩa luôn biến “a” như biến toàn cục chứ không còn nằm trong phạm vi của hàm “func()” nữa.

Sau các ví dụ về cách định nghĩa biến có dùng từ khóa “var” và không dùng từ khóa “var” thì các bạn đã ít nhiều đã thấy được sự nguy hiểm khi không dùng từ khóa “var” chưa nào? Nó khiến chúng ta không thể kiểm soát được biến đó sẽ chạy ở phạm vi nào. Rất dễ gây xáo trộn dữ liệu và lỗi ứng dụng.

Mình sẽ note lại cho các bạn các ý chính sau đây:

1. Định nghĩa biến với từ khóa “var” trong phạm vi hàm nào, thì biến đó sẽ có phạm vi sử dụng chỉ trong hàm đó hay còn gọi là biến cục bộ.
2. Khi không dùng từ khóa “var” để định nghĩa biến, thì biến đó sẽ được xem là biến toàn cục.
3. Khi sử dụng lại biến đã được định nghĩa với từ khóa “var” hay không từ khóa “var”. Tuyệt đối chỉ cần dùng lại tên biến đã định nghĩa trước đó và không được dùng lại từ khóa “var” để gọi lại biến, vì như thế sẽ vô tình khiến biến đó trở thành biến cục bộ hoặc bị ghi đè.
4. Khi viết javascript, vui lòng tắt Cache của trình duyệt để cho kết quả chính xác nhất. Vì nếu trình duyệt cache lại dữ liệu cũ. Nhiều khi các bạn sẽ sử dụng các biến không được định nghĩa nhưng vô tình do lần thử trước đó đã được lưu lại, như thế bạn sẽ không thể nhận ra được là cách viết mình có gặp lỗi hay không.

Chúc các bạn thành công.

Nguồn: thienanblog.com​