Tại sao chúng ta không nên sử dụng VAR trong JavaScript?

Khai báo

if (true) {
  var test = true; // use "var" instead of "let"
}

alert(test); // true, the variable lives after if

8 tương tự như

if (true) {
  var test = true; // use "var" instead of "let"
}

alert(test); // true, the variable lives after if

6. Hầu hết thời gian chúng ta có thể thay thế

if (true) {
  var test = true; // use "var" instead of "let"
}

alert(test); // true, the variable lives after if

6 bằng

if (true) {
  var test = true; // use "var" instead of "let"
}

alert(test); // true, the variable lives after if

8 hoặc ngược lại và mong mọi thứ hoạt động

var message = "Hi";
alert(message); // Hi

Nhưng bên trong

if (true) {
  var test = true; // use "var" instead of "let"
}

alert(test); // true, the variable lives after if

8 là một con quái vật rất khác, có nguồn gốc từ rất xa xưa. Nó thường không được sử dụng trong các kịch bản hiện đại, nhưng vẫn ẩn nấp trong các kịch bản cũ

Nếu bạn không có kế hoạch gặp những kịch bản như vậy, bạn thậm chí có thể bỏ qua chương này hoặc hoãn lại

Mặt khác, điều quan trọng là phải hiểu sự khác biệt khi di chuyển các tập lệnh cũ từ

if (true) {
  var test = true; // use "var" instead of "let"
}

alert(test); // true, the variable lives after if

8 sang

if (true) {
  var test = true; // use "var" instead of "let"
}

alert(test); // true, the variable lives after if

6, để tránh các lỗi lạ

“var” không có phạm vi khối

Các biến, được khai báo bằng

if (true) {
  var test = true; // use "var" instead of "let"
}

alert(test); // true, the variable lives after if

8, thuộc phạm vi chức năng hoặc phạm vi toàn cầu. Chúng có thể nhìn thấy thông qua các khối

Ví dụ

if (true) {
  var test = true; // use "var" instead of "let"
}

alert(test); // true, the variable lives after if

Khi

if (true) {
  var test = true; // use "var" instead of "let"
}

alert(test); // true, the variable lives after if

8 bỏ qua các khối mã, chúng ta có một biến toàn cục

if (true) {
  var test = true; // use "var" instead of "let"
}

alert(test); // true, the variable lives after if

18

Nếu chúng ta sử dụng

if (true) {
  var test = true; // use "var" instead of "let"
}

alert(test); // true, the variable lives after if

19 thay vì

if (true) {
  var test = true; // use "var" instead of "let"
}

alert(test); // true, the variable lives after if

30, thì biến sẽ chỉ hiển thị bên trong

if (true) {
  var test = true; // use "var" instead of "let"
}

alert(test); // true, the variable lives after if

31

if (true) {
  var test = true; // use "var" instead of "let"
}

alert(test); // true, the variable lives after if

1

Điều tương tự cho các vòng lặp.

if (true) {
  var test = true; // use "var" instead of "let"
}

alert(test); // true, the variable lives after if

8 không thể là khối hoặc vòng lặp cục bộ

if (true) {
  var test = true; // use "var" instead of "let"
}

alert(test); // true, the variable lives after if

3

Nếu một khối mã nằm trong một hàm, thì

if (true) {
  var test = true; // use "var" instead of "let"
}

alert(test); // true, the variable lives after if

8 sẽ trở thành một biến cấp hàm

if (true) {
  var test = true; // use "var" instead of "let"
}

alert(test); // true, the variable lives after if

9

Như chúng ta có thể thấy,

if (true) {
  var test = true; // use "var" instead of "let"
}

alert(test); // true, the variable lives after if

8 xuyên qua

if (true) {
  var test = true; // use "var" instead of "let"
}

alert(test); // true, the variable lives after if

31,

if (true) {
  var test = true; // use "var" instead of "let"
}

alert(test); // true, the variable lives after if

36 hoặc các khối mã khác. Đó là bởi vì cách đây rất lâu trong JavaScript, các khối không có Môi trường từ vựng và

if (true) {
  var test = true; // use "var" instead of "let"
}

alert(test); // true, the variable lives after if

8 là phần còn lại của điều đó

“var” cho phép khai báo lại

Nếu chúng ta khai báo cùng một biến với

if (true) {
  var test = true; // use "var" instead of "let"
}

alert(test); // true, the variable lives after if

6 hai lần trong cùng một phạm vi, thì đó là một lỗi

if (true) {
  var test = true; // use "var" instead of "let"
}

alert(test); // true, the variable lives after if

5

Với

if (true) {
  var test = true; // use "var" instead of "let"
}

alert(test); // true, the variable lives after if

8, chúng ta có thể khai báo lại một biến nhiều lần. Nếu chúng ta sử dụng

if (true) {
  var test = true; // use "var" instead of "let"
}

alert(test); // true, the variable lives after if

8 với một biến đã được khai báo, nó sẽ bị bỏ qua

if (true) {
  var test = true; // use "var" instead of "let"
}

alert(test); // true, the variable lives after if

8

Các biến “var” có thể được khai báo bên dưới mục đích sử dụng của chúng

Khai báo

if (true) {
  var test = true; // use "var" instead of "let"
}

alert(test); // true, the variable lives after if

8 được xử lý khi chức năng bắt đầu (hoặc tập lệnh bắt đầu cho toàn cầu)

Nói cách khác, các biến

if (true) {
  var test = true; // use "var" instead of "let"
}

alert(test); // true, the variable lives after if

8 được định nghĩa ngay từ đầu hàm, bất kể định nghĩa ở đâu (giả sử rằng định nghĩa không có trong hàm lồng nhau)

Vì vậy, mã này

if (true) {
  var test = true; // use "var" instead of "let"
}

alert(test); // true, the variable lives after if

1

…Về mặt kỹ thuật giống như thế này (đã di chuyển

if (true) {
  var test = true; // use "var" instead of "let"
}

alert(test); // true, the variable lives after if

93 ở trên)

if (true) {
  var test = true; // use "var" instead of "let"
}

alert(test); // true, the variable lives after if

3

…Hoặc thậm chí như thế này (hãy nhớ rằng, các khối mã bị bỏ qua)

if (true) {
  var test = true; // use "var" instead of "let"
}

alert(test); // true, the variable lives after if

4

Người ta còn gọi hành vi đó là “hoisting” (nâng cao), bởi vì tất cả

if (true) {
  var test = true; // use "var" instead of "let"
}

alert(test); // true, the variable lives after if

8 đều được “hoisted” (nâng) lên trên cùng của hàm

Vì vậy, trong ví dụ trên, nhánh

if (true) {
  var test = true; // use "var" instead of "let"
}

alert(test); // true, the variable lives after if

95 không bao giờ thực thi, nhưng điều đó không thành vấn đề.

if (true) {
  var test = true; // use "var" instead of "let"
}

alert(test); // true, the variable lives after if

8 bên trong nó được xử lý khi bắt đầu hàm, vì vậy tại thời điểm

if (true) {
  var test = true; // use "var" instead of "let"
}

alert(test); // true, the variable lives after if

97 biến tồn tại

Các tuyên bố được nâng lên, nhưng các bài tập thì không

Điều đó được thể hiện rõ nhất bằng một ví dụ

if (true) {
  var test = true; // use "var" instead of "let"
}

alert(test); // true, the variable lives after if

0

Dòng

if (true) {
  var test = true; // use "var" instead of "let"
}

alert(test); // true, the variable lives after if

98 có hai hành động trong đó

1. Khai báo biến

   if (true) {
     var test = true; // use "var" instead of "let"
   }
   
   alert(test); // true, the variable lives after if

   8
2. Phép gán biến

   if (true) {
     var test = true; // use "var" instead of "let"
   }
   
   alert(test); // true, the variable lives after if

   50

Khai báo được xử lý khi bắt đầu thực thi hàm (“hoisted”), nhưng phép gán luôn hoạt động tại nơi nó xuất hiện. Vì vậy, mã hoạt động cơ bản như thế này

if (true) {
  var test = true; // use "var" instead of "let"
}

alert(test); // true, the variable lives after if

1

Bởi vì tất cả các khai báo của

if (true) {
  var test = true; // use "var" instead of "let"
}

alert(test); // true, the variable lives after if

8 đều được xử lý khi bắt đầu hàm, nên chúng ta có thể tham chiếu chúng ở bất kỳ đâu. Nhưng các biến không được xác định cho đến khi các bài tập

Trong cả hai ví dụ trên,

if (true) {
  var test = true; // use "var" instead of "let"
}

alert(test); // true, the variable lives after if

52 chạy không có lỗi, vì biến

if (true) {
  var test = true; // use "var" instead of "let"
}

alert(test); // true, the variable lives after if

53 tồn tại. Nhưng giá trị của nó chưa được gán, vì vậy nó hiển thị

if (true) {
  var test = true; // use "var" instead of "let"
}

alert(test); // true, the variable lives after if

54

IIFE

Trước đây, vì chỉ có

if (true) {
  var test = true; // use "var" instead of "let"
}

alert(test); // true, the variable lives after if

8 và nó không có khả năng hiển thị ở cấp độ khối nên các lập trình viên đã phát minh ra một cách để mô phỏng nó. Những gì họ đã làm được gọi là "biểu thức hàm được gọi ngay lập tức" (viết tắt là IIFE)

Đó không phải là thứ chúng ta nên sử dụng ngày nay, nhưng bạn có thể tìm thấy chúng trong các tập lệnh cũ

Một IIFE trông như thế này

if (true) {
  var test = true; // use "var" instead of "let"
}

alert(test); // true, the variable lives after if

2

Tại đây, một Biểu thức hàm được tạo và được gọi ngay lập tức. Vì vậy, mã thực thi ngay lập tức và có các biến riêng của nó

Biểu thức hàm được bao bọc bởi dấu ngoặc đơn

if (true) {
  var test = true; // use "var" instead of "let"
}

alert(test); // true, the variable lives after if

56, bởi vì khi công cụ JavaScript gặp

if (true) {
  var test = true; // use "var" instead of "let"
}

alert(test); // true, the variable lives after if

57 trong mã chính, nó sẽ hiểu đó là phần đầu của Tuyên bố hàm. Nhưng một Khai báo hàm phải có tên, vì vậy loại mã này sẽ báo lỗi

if (true) {
  var test = true; // use "var" instead of "let"
}

alert(test); // true, the variable lives after if

3

Ngay cả khi chúng ta nói. "Được rồi, hãy thêm một cái tên", điều đó sẽ không hoạt động, vì JavaScript không cho phép gọi Khai báo hàm ngay lập tức

if (true) {
  var test = true; // use "var" instead of "let"
}

alert(test); // true, the variable lives after if

4

Vì vậy, dấu ngoặc đơn xung quanh hàm là một thủ thuật để cho JavaScript thấy rằng hàm được tạo trong ngữ cảnh của một biểu thức khác và do đó, nó là Biểu thức hàm. nó không cần tên và có thể được gọi ngay lập tức

Có tồn tại những cách khác ngoài dấu ngoặc đơn để nói với JavaScript rằng chúng tôi muốn nói đến Biểu thức hàm

if (true) {
  var test = true; // use "var" instead of "let"
}

alert(test); // true, the variable lives after if

5

Trong tất cả các trường hợp trên chúng ta khai báo một Biểu thức hàm và chạy nó ngay lập tức. Hãy lưu ý lại. ngày nay không có lý do gì để viết mã như vậy

Bản tóm tắt

Có hai điểm khác biệt chính của

if (true) {
  var test = true; // use "var" instead of "let"
}

alert(test); // true, the variable lives after if

8 so với

if (true) {
  var test = true; // use "var" instead of "let"
}

alert(test); // true, the variable lives after if

59

1. Các biến

   if (true) {
     var test = true; // use "var" instead of "let"
   }
   
   alert(test); // true, the variable lives after if

   8 không có phạm vi khối, khả năng hiển thị của chúng nằm trong phạm vi chức năng hiện tại hoặc toàn cục, nếu được khai báo bên ngoài chức năng
2. Khai báo

   if (true) {
     var test = true; // use "var" instead of "let"
   }
   
   alert(test); // true, the variable lives after if

   8 được xử lý khi bắt đầu chức năng (bắt đầu tập lệnh cho toàn cầu)

Có một sự khác biệt rất nhỏ nữa liên quan đến đối tượng toàn cục mà chúng ta sẽ đề cập trong chương tiếp theo

Những khác biệt này làm cho

if (true) {
  var test = true; // use "var" instead of "let"
}

alert(test); // true, the variable lives after if

8 tệ hơn

if (true) {
  var test = true; // use "var" instead of "let"
}

alert(test); // true, the variable lives after if

6 hầu hết thời gian. Các biến cấp độ khối là một điều tuyệt vời. Đó là lý do tại sao

if (true) {
  var test = true; // use "var" instead of "let"
}

alert(test); // true, the variable lives after if

6 đã được giới thiệu trong tiêu chuẩn từ lâu và hiện là một cách chính (cùng với

if (true) {
  var test = true; // use "var" instead of "let"
}

alert(test); // true, the variable lives after if

7) để khai báo một biến

Tại sao chúng ta không nên sử dụng var trong js?

Tôi có nên sử dụng var trong JavaScript không?

Sự thật là không ai nên sử dụng var trong bất kỳ mã JavaScript nào ngoại trừ bài học lịch sử . Thậm chí sau đó, nó sẽ đi kèm với một chú thích có nội dung như "làm ơn đừng bao giờ làm điều này. " Let và const đã có mặt trên mọi trình duyệt chính trong 6 năm qua.