Thuật ngữ "Hoisting" trong JavaScript

h2>1) Hoisting là gì !?

– “Hoisting” là hành động mặc định của JavaScript, nó sẽ di chuyển những câu lệnh khai báo tên biến lên vị trí đầu tiên trong phạm vi (lên đầu tập tin hiện tại hoặc lên đầu hàm hiện tại)

Ví dụ:

– Chúng ta có một đoạn mã như sau:

<script>
    text = "Lập Trình Web";
    document.write(text);
    var text;
</script>

Xem ví dụ

– JavaScript sẽ tự động chuyển các câu lệnh khai báo tên biến lên vị trí đầu tiên trong phạm vi.

– Do đó, đoạn mã phía trên sẽ có ý nghĩa tương tự như đoạn mã sau:

<script>
    var text;
    text = "Lập Trình Web";
    document.write(text);
</script>

Xem ví dụ

– Lưu ý: “Hoisting” chỉ di chuyển phần khai báo tên biến lên vị trí đầu tiên trong phạm vi, còn phần gán giá trị thì không được di chuyển lên.

Ví dụ:

– Hai đoạn mã bên dưới có ý nghĩa khác nhau:

Đoạn mã 1	Đoạn mã 2
`<script> var text = "Lập Trình Web"; document.write(text); </script>` Xem ví dụ	`<script> document.write(text); var text = "Lập Trình Web"; </script>` Xem ví dụ

– Đoãn mã 2 sẽ có ý nghĩa tương tự như đoạn mã sau:

<script>
    var text;
    document.write(text);
    text = "Lập Trình Web";
</script>

Xem ví dụ

2) Công dụng của Hoisting

– Như chúng ta đã biết, nếu sử dụng một biến trong khi nó chưa được khai báo thì câu lệnh sử dụng biến đó sẽ bị lỗi.

– Hoisting giúp ta tránh tình trạng bị lỗi khi sử dụng những biến chưa được khai báo.

– Ví dụ:

<script>
    document.write(text); //bị lỗi

</script>

Xem ví dụ

<script>
    document.write(text);
    var text;
</script>

Xem ví dụ

– Ngoài ra, nếu đang ở trong một hàm mà ta gán giá trị cho biến chưa được khai báo thì biến đó sẽ trở thành biến toàn cục.

– Hoisting giúp ta tránh tình trạng tạo ra những biến toàn cục không mong muốn.

– Ví dụ:

<script>
  function hello(){
      text = "Lập Trình Web";
      document.write(text);

  }
  hello();
  document.write("<br>Xin chào: " + text);
</script>

Xem ví dụ

<script>
  function hello(){
      text = "Lập Trình Web";
      document.write(text);
      var text;
  }
  hello();
  document.write("<br>Xin chào: " + text);
</script>

Xem ví dụ

Vậy tóm lại: Để đảm bảo an toàn, tránh tình trạng bị lỗi do sử dụng những biến chưa được khai báo hoặc vô tình tạo ra biến toàn cục không mong muốn, ta có thể khai báo lại một lần nữa các tên biến ở cuối phạm vi (cuối tập tin hoặc cuối hàm)

Thuật ngữ “Hoisting” trong JavaScript

2) Công dụng của Hoisting

Chuyên mục

Recent News