ES2015 [hoặc ES6] đã giới thiệu hai cách mới để tạo biến,
9 vàvar declaration
console.log[declaration] // undefined
0. Nhưng trước khi chúng ta thực sự đi sâu vào sự khác biệt giữavar declaration
console.log[declaration] // undefined
declaration = 'This is an initialization'
1,var declaration
console.log[declaration] // undefined
declaration = 'This is an initialization'
9 vàvar declaration
console.log[declaration] // undefined
0, có một số điều kiện tiên quyết bạn cần biết trước. Chúng là khai báo biến so với khởi tạo, phạm vi [cụ thể là phạm vi chức năng] và cẩuvar declaration
console.log[declaration] // undefined
declaration = 'This is an initialization'
Khai báo biến so với khởi tạo
Một khai báo biến giới thiệu một định danh mới
var declaration
Ở trên, chúng tôi tạo một định danh mới được gọi là khai báo. Trong JavaScript, các biến được khởi tạo với giá trị
4 khi chúng được tạo. Điều đó có nghĩa là nếu chúng ta cố ghi nhật ký biếnvar declaration
console.log[declaration] // undefined
declaration = 'This is an initialization'
5, chúng ta sẽ nhận đượcvar declaration
console.log[declaration] // undefined
declaration = 'This is an initialization'
4var declaration
console.log[declaration] // undefined
declaration = 'This is an initialization'
var declaration
console.log[declaration] // undefined
Vì vậy, nếu chúng ta đăng nhập biến khai báo, chúng ta sẽ không xác định được
Khác với khai báo biến, khởi tạo biến là khi bạn gán giá trị cho biến lần đầu tiên
var declaration
console.log[declaration] // undefined
declaration = 'This is an initialization'
Vì vậy, ở đây chúng tôi đang khởi tạo biến
5 bằng cách gán nó cho một chuỗivar declaration
console.log[declaration] // undefined
declaration = 'This is an initialization'
Điều này dẫn chúng ta đến khái niệm thứ hai, Phạm vi
Phạm vi
Phạm vi xác định nơi có thể truy cập các biến và hàm bên trong chương trình của bạn. Trong JavaScript, có hai loại phạm vi - phạm vi toàn cục và phạm vi chức năng. Theo thông số kỹ thuật chính thức,
"Nếu câu lệnh biến xuất hiện bên trong Khai báo hàm, thì các biến được xác định với phạm vi hàm-cục bộ trong hàm đó. "
Điều đó có nghĩa là nếu bạn tạo một biến với
1, thì biến đó được "phạm vi" với hàm mà nó được tạo và chỉ có thể truy cập được bên trong hàm đó hoặc, bất kỳ hàm lồng nhau nàovar declaration
console.log[declaration] // undefined
declaration = 'This is an initialization'
3var declaration
console.log[declaration] // undefined
declaration = 'This is an initialization'
Ở trên, chúng tôi cố gắng truy cập một biến bên ngoài hàm mà nó đã được khai báo. Bởi vì
9 là "phạm vi" của hàmvar declaration
console.log[declaration] // undefined
declaration = 'This is an initialization'
30, nên nó chỉ có thể truy cập được bên trong chínhvar declaration
console.log[declaration] // undefined
declaration = 'This is an initialization'
31 hoặc bất kỳ hàm lồng nhau nào bên trongvar declaration
console.log[declaration] // undefined
declaration = 'This is an initialization'
31 [như bên dưới]var declaration
console.log[declaration] // undefined
declaration = 'This is an initialization'
8var declaration
console.log[declaration] // undefined
declaration = 'This is an initialization'
Bây giờ hãy xem một ví dụ nâng cao hơn. Giả sử chúng ta có một mảng
33 và chúng ta cần một hàm nhận vào mảng đó cũng như mộtvar declaration
console.log[declaration] // undefined
declaration = 'This is an initialization'
34 và trả về cho chúng ta một mảng giá chiết khấu mới. Mục tiêu cuối cùng có thể trông giống như thế nàyvar declaration
console.log[declaration] // undefined
declaration = 'This is an initialization'
1var declaration
console.log[declaration] // undefined
declaration = 'This is an initialization'
Và việc thực hiện có thể trông giống như thế này
2var declaration
console.log[declaration] // undefined
declaration = 'This is an initialization'
Có vẻ đủ đơn giản nhưng điều này có liên quan gì đến phạm vi khối? . Các biến được khai báo bên trong nó có thể truy cập được bên ngoài nó không?
4var declaration
console.log[declaration] // undefined
declaration = 'This is an initialization'
Nếu JavaScript là ngôn ngữ lập trình duy nhất bạn biết, bạn có thể không nghĩ gì về điều này. Tuy nhiên, nếu bạn đến với JavaScript từ một ngôn ngữ lập trình khác, cụ thể là ngôn ngữ lập trình bị chặn phạm vi, thì có lẽ bạn hơi lo lắng về những gì đang diễn ra ở đây. Nó không thực sự bị hỏng, nó chỉ là một loại kỳ lạ. Thực sự không có lý do gì để vẫn có quyền truy cập vào
36,var declaration
console.log[declaration] // undefined
declaration = 'This is an initialization'
37 vàvar declaration
console.log[declaration] // undefined
declaration = 'This is an initialization'
38 bên ngoài vòng lặpvar declaration
console.log[declaration] // undefined
declaration = 'This is an initialization'
35. Nó không thực sự mang lại lợi ích gì cho chúng ta và thậm chí nó có thể gây hại cho chúng ta trong một số trường hợp. Tuy nhiên, vì các biến được khai báo vớivar declaration
console.log[declaration] // undefined
declaration = 'This is an initialization'
1 nằm trong phạm vi hàm, nên bạn phảivar declaration
console.log[declaration] // undefined
declaration = 'This is an initialization'
Bây giờ chúng ta đã thảo luận về khai báo biến, khởi tạo và phạm vi, điều cuối cùng chúng ta cần làm trước khi đi sâu vào
9 vàvar declaration
console.log[declaration] // undefined
0 là cẩuvar declaration
console.log[declaration] // undefined
declaration = 'This is an initialization'
cẩu
Hãy nhớ trước đó chúng tôi đã nói rằng "Trong JavaScript, các biến được khởi tạo với giá trị là
4 khi chúng được tạo. ". Hóa ra, đó là tất cả những gì "Hoisting" là. Trình thông dịch JavaScript sẽ gán cho các khai báo biến một giá trị mặc định làvar declaration
console.log[declaration] // undefined
declaration = 'This is an initialization'
4 trong giai đoạn được gọi là giai đoạn "Sáng tạo"var declaration
console.log[declaration] // undefined
declaration = 'This is an initialization'
Để có hướng dẫn chi tiết hơn về Giai đoạn tạo, cẩu và phạm vi, hãy xem "Hướng dẫn cơ bản về cẩu, phạm vi và đóng trong JavaScript"
Hãy xem ví dụ trước và xem cách cẩu ảnh hưởng đến nó
4var declaration
console.log[declaration] // undefined
Lưu ý rằng tất cả các khai báo biến đều được gán giá trị mặc định là
4. Đó là lý do tại sao nếu bạn thử truy cập một trong các biến đó trước khi nó thực sự được khai báo, bạn sẽ chỉ nhận đượcvar declaration
console.log[declaration] // undefined
declaration = 'This is an initialization'
4var declaration
console.log[declaration] // undefined
declaration = 'This is an initialization'
7var declaration
console.log[declaration] // undefined
Bây giờ bạn đã biết mọi thứ cần biết về
1, cuối cùng hãy nói về toàn bộ lý do tại sao bạn ở đây, sự khác biệt giữavar declaration
console.log[declaration] // undefined
declaration = 'This is an initialization'
1,var declaration
console.log[declaration] // undefined
declaration = 'This is an initialization'
9 vàvar declaration
console.log[declaration] // undefined
0 là gì?var declaration
console.log[declaration] // undefined
declaration = 'This is an initialization'
var VS hãy để VS const
Đầu tiên, hãy so sánh
1 vàvar declaration
console.log[declaration] // undefined
declaration = 'This is an initialization'
9. Sự khác biệt chính giữavar declaration
console.log[declaration] // undefined
1 vàvar declaration
console.log[declaration] // undefined
declaration = 'This is an initialization'
9 là thay vì nằm trong phạm vi chức năng,var declaration
console.log[declaration] // undefined
9 là phạm vi khối. Điều đó có nghĩa là một biến được tạo bằng từ khóavar declaration
console.log[declaration] // undefined
9 có sẵn bên trong "khối" mà nó được tạo cũng như bất kỳ khối lồng nhau nào. Khi tôi nói "khối", ý tôi là bất cứ thứ gì được bao quanh bởi dấu ngoặc nhọnvar declaration
console.log[declaration] // undefined
17 như trong vòng lặpvar declaration
console.log[declaration] // undefined
declaration = 'This is an initialization'
35 hoặc câu lệnhvar declaration
console.log[declaration] // undefined
declaration = 'This is an initialization'
19var declaration
console.log[declaration] // undefined
declaration = 'This is an initialization'
Vì vậy, hãy nhìn lại hàm
20 của chúng ta lần cuốivar declaration
console.log[declaration] // undefined
declaration = 'This is an initialization'
0var declaration
console.log[declaration] // undefined
Hãy nhớ rằng chúng ta có thể ghi nhật ký
36,var declaration
console.log[declaration] // undefined
declaration = 'This is an initialization'
37 vàvar declaration
console.log[declaration] // undefined
declaration = 'This is an initialization'
38 bên ngoài vòng lặpvar declaration
console.log[declaration] // undefined
declaration = 'This is an initialization'
35 vì chúng được khai báo vớivar declaration
console.log[declaration] // undefined
declaration = 'This is an initialization'
1 vàvar declaration
console.log[declaration] // undefined
declaration = 'This is an initialization'
1 nằm trong phạm vi chức năng. Nhưng bây giờ, điều gì sẽ xảy ra nếu chúng ta thay đổi khai báo _______ 11 để sử dụngvar declaration
console.log[declaration] // undefined
declaration = 'This is an initialization'
9 và thử chạy nó?var declaration
console.log[declaration] // undefined
1var declaration
console.log[declaration] // undefined
🙅♀️ Chúng tôi nhận được
29. Điều này cho chúng ta biết rằng các biến được khai báo vớivar declaration
console.log[declaration] // undefined
declaration = 'This is an initialization'
9 là phạm vi khối, không phải phạm vi chức năng. Vì vậy, cố gắng truy cập vàovar declaration
console.log[declaration] // undefined
36 [hoặcvar declaration
console.log[declaration] // undefined
declaration = 'This is an initialization'
37 hoặcvar declaration
console.log[declaration] // undefined
declaration = 'This is an initialization'
38] bên ngoài "khối" mà chúng được khai báo sẽ mang lại cho chúng tôi một lỗi tham chiếu như chúng tôi vừa mới thấyvar declaration
console.log[declaration] // undefined
declaration = 'This is an initialization'
2var declaration
console.log[declaration] // undefined
Sự khác biệt tiếp theo phải làm với Palăng. Trước đó, chúng tôi đã nói rằng định nghĩa của hoisting là "Trình thông dịch JavaScript sẽ gán cho các khai báo biến một giá trị mặc định là
4 trong giai đoạn được gọi là 'Tạo'. " Chúng tôi thậm chí đã thấy điều này trong thực tế bằng cách ghi nhật ký một biến trước khi nó được khai báo [bạn nhận đượcvar declaration
console.log[declaration] // undefined
declaration = 'This is an initialization'
4]var declaration
console.log[declaration] // undefined
declaration = 'This is an initialization'
7var declaration
console.log[declaration] // undefined
Tôi không thể nghĩ ra bất kỳ trường hợp sử dụng nào mà bạn thực sự muốn truy cập vào một biến trước khi nó được khai báo. Có vẻ như ném ReferenceError sẽ là một mặc định tốt hơn là trả lại
4. Trên thực tế, đây chính xác là những gìvar declaration
console.log[declaration] // undefined
declaration = 'This is an initialization'
9 làm. Nếu bạn cố gắng truy cập một biến được khai báo bằngvar declaration
console.log[declaration] // undefined
9 trước khi nó được khai báo, thay vì nhận đượcvar declaration
console.log[declaration] // undefined
4 [như với những biến được khai báo bằngvar declaration
console.log[declaration] // undefined
declaration = 'This is an initialization'
1], bạn sẽ nhận được ReferenceErrorvar declaration
console.log[declaration] // undefined
declaration = 'This is an initialization'
4var declaration
console.log[declaration] // undefined
5var declaration
console.log[declaration] // undefined
hãy để VS const
Bây giờ bạn đã hiểu sự khác biệt giữa
1 vàvar declaration
console.log[declaration] // undefined
declaration = 'This is an initialization'
9, vậy cònvar declaration
console.log[declaration] // undefined
0 thì sao? . Tuy nhiên, điểm khác biệt duy nhất là khi bạn đã gán giá trị cho một biến bằng cách sử dụngvar declaration
console.log[declaration] // undefined
declaration = 'This is an initialization'
0, bạn không thể gán lại giá trị đó cho một giá trị mớivar declaration
console.log[declaration] // undefined
declaration = 'This is an initialization'
6var declaration
console.log[declaration] // undefined
Điều rút ra ở trên là các biến được khai báo bằng
9 có thể được gán lại, nhưng các biến được khai báo bằngvar declaration
console.log[declaration] // undefined
0 thì không thểvar declaration
console.log[declaration] // undefined
declaration = 'This is an initialization'
Thật tuyệt, vì vậy bất cứ khi nào bạn muốn một biến là bất biến, bạn có thể khai báo nó bằng _____10. Chà, không hẳn. Chỉ vì một biến được khai báo với
0 không có nghĩa là biến đó là bất biến, tất cả những gì có nghĩa là giá trị không thể được gán lại. Đây là một ví dụ tốtvar declaration
console.log[declaration] // undefined
declaration = 'This is an initialization'
7var declaration
console.log[declaration] // undefined
Lưu ý rằng việc thay đổi một thuộc tính trên một đối tượng không có nghĩa là gán lại nó, vì vậy mặc dù một đối tượng được khai báo bằng
0, nhưng điều đó không có nghĩa là bạn không thể thay đổi bất kỳ thuộc tính nào của nó. Nó chỉ có nghĩa là bạn không thể gán lại nó cho một giá trị mớivar declaration
console.log[declaration] // undefined
declaration = 'This is an initialization'
Bây giờ, câu hỏi quan trọng nhất mà chúng tôi chưa trả lời, bạn nên sử dụng
1,var declaration
console.log[declaration] // undefined
declaration = 'This is an initialization'
9 hayvar declaration
console.log[declaration] // undefined
0? . Lý do cho điều này là bằng cách sử dụngvar declaration
console.log[declaration] // undefined
declaration = 'This is an initialization'
0, bạn đang báo hiệu cho chính mình trong tương lai cũng như bất kỳ nhà phát triển tương lai nào khác phải đọc mã của bạn rằng biến này không nên thay đổi. Nếu nó cần thay đổi [như trong vòng lặpvar declaration
console.log[declaration] // undefined
declaration = 'This is an initialization'
35], bạn nên sử dụngvar declaration
console.log[declaration] // undefined
declaration = 'This is an initialization'
9var declaration
console.log[declaration] // undefined
Vì vậy, giữa các biến thay đổi và các biến không thay đổi, không còn nhiều. Điều đó có nghĩa là bạn không bao giờ phải sử dụng lại
1var declaration
console.log[declaration] // undefined
declaration = 'This is an initialization'
Bây giờ, ý kiến không phổ biến, mặc dù nó vẫn có một số giá trị đối với nó, là bạn không bao giờ nên sử dụng
0 bởi vì mặc dù bạn đang cố gắng báo hiệu rằng biến đó là bất biến, nhưng như chúng ta đã thấy ở trên, điều đó không hoàn toàn đúng. Các nhà phát triển đăng ký ý kiến này luôn sử dụngvar declaration
console.log[declaration] // undefined
declaration = 'This is an initialization'
9 trừ khi họ có các biến thực sự là hằng số nhưvar declaration
console.log[declaration] // undefined
02var declaration
console.log[declaration] // undefined
Vì vậy, để tóm tắt lại,
1 là phạm vi chức năng và nếu bạn cố gắng sử dụng một biến được khai báo bằngvar declaration
console.log[declaration] // undefined
declaration = 'This is an initialization'
1 trước khi khai báo thực tế, bạn sẽ chỉ nhận đượcvar declaration
console.log[declaration] // undefined
declaration = 'This is an initialization'
4.var declaration
console.log[declaration] // undefined
declaration = 'This is an initialization'
0 vàvar declaration
console.log[declaration] // undefined
declaration = 'This is an initialization'
9 bị chặn trong phạm vi và nếu bạn cố gắng sử dụng biến được khai báo bằngvar declaration
console.log[declaration] // undefined
9 hoặcvar declaration
console.log[declaration] // undefined
0 trước khi khai báo, bạn sẽ nhận được ReferenceError. Cuối cùng, sự khác biệt giữavar declaration
console.log[declaration] // undefined
declaration = 'This is an initialization'
9 vàvar declaration
console.log[declaration] // undefined
0 là một khi bạn đã gán giá trị chovar declaration
console.log[declaration] // undefined
declaration = 'This is an initialization'
0, bạn không thể gán lại giá trị đó, nhưng vớivar declaration
console.log[declaration] // undefined
declaration = 'This is an initialization'
9, bạn có thểvar declaration
console.log[declaration] // undefined
8var declaration
console.log[declaration] // undefined
Trước khi bạn đi
Tôi biết, một bản tin khác - nhưng hãy nghe tôi nói. Hầu hết các bản tin JavaScript đều tệ. Lần cuối cùng bạn thực sự mong muốn có được một cái là khi nào?
Chúng tôi gọi nó là Byte, nhưng những người khác gọi nó là bản tin yêu thích của họ
tham gia byte
Được gửi tới 114.218 nhà phát triển vào mỗi thứ Hai và thứ Năm
Sdu
@sduduzo_g
Đây là bản tin đầu tiên mà tôi mở danh sách phát nhạc và tối đa hóa cửa sổ trình duyệt của mình chỉ để yên tâm đọc nó. Kudos để @uidotdev cho nội dung hàng tuần tuyệt vời
Brandon Bayer
@flybayer
Bản tin Bytes là một tác phẩm nghệ thuật. Đó là bản tin dành cho nhà phát triển duy nhất mà tôi đã đăng ký. Bằng cách nào đó, họ lấy những thứ hơi nhàm chán và truyền vào đó một lượng hài vừa phải để khiến bạn cười khúc khích
John Hawley
@johnhawly
Bytes là bản tin yêu thích của tôi kể từ khi thành lập. Đó là điều yêu thích của tôi mà tôi mong đợi vào thứ Hai. Tuyệt vời với một tách cà phê nóng
màu xanh lá cây Garrett
@garrettgreen
Tôi đăng ký RẤT NHIỀU bản tin dành cho nhà phát triển [đặc biệt là JS/TS/Node] và Byte của @uidotdev luôn là một sự thay đổi thú vị, được hoan nghênh đối với hầu hết [hài hước, vui vẻ, v.v.] nhưng vẫn toàn diện/hữu ích
Muhammad
@mhashim6_
Thực sự là bản tin duy nhất mà tôi chờ đợi mỗi tuần
Grayson Hicks
@graysonhicks
Bytes là bản tin dành cho nhà phát triển mà tôi mong chờ nhất mỗi tuần. Cân bằng tuyệt vời giữa nội dung và ngữ cảnh. Cảm ơn @uidotdev
Mitchell Wright
@mitchellbwright
Tôi biết tôi đã nói điều đó trước đây, nhưng @tylermcginnis không bỏ lỡ email Bytes. Nếu bạn là nhà phát triển, bạn thực sự cần phải đăng ký
Ali Spittel
@aspittel
Tôi có thể nói rằng tôi cười khúc khích mỗi khi nhận được email @uidotdev mỗi tuần không?
Chris Finn
@thefinnomenon
Mọi lập trình viên JavaScript nên đăng ký nhận bản tin từ @uidotdev. Họ không chỉ quản lý để đưa tin ngắn gọn về những tin tức nóng hổi trong thế giới JavaScript trong tuần mà họ còn quản lý để thêm sự hài hước mới mẻ vào tất cả