Xóa bài viết
Bạn có chắc chắn muốn xóa bài viết này không ?
Xóa bình luận
Bạn có chắc chắn muốn xóa bình luận này không ?
Phân biệt Lexical Scope và Block Scope trong javascript
Scope
Trong javascript có 2 loại scopes: lexical scope và block scope
Lexical scope là không gian biến được khai báo ở trong hàm (function). Từ khoá “var” được dùng để khai báo biến trong lexical scope của hàm. Ví dụ:
| function foo() { | |
| var bar; | |
| } |
Ở ví dụ trên, biến bar được khai báo trong lexical scope của hàm foo.
Block scope là không gian biến được khai báo giữa 1 cặp dấu ngoặc nhọn “{…}”. Từ khoá “let" và “const" được dùng để khai báo biến ở trong block scope. Ví dụ:
| if (true) { | |
| let variable; | |
| } |
Trong ví dụ trên, biến “variable” được khai báo trong block scope giữa hai dấu ngoặc nhọn “{…}” của if.
Một số ví dụ để các bạn hiểu rõ hơn về 2 loại scope “block scope" và “lexical scope”:
Ví dụ 1:
| function foo() { | |
| var bar = 2; | |
| if (true) { | |
| var bar = 1; | |
| } | |
| return bar; | |
| } | |
| console.log(foo()); // result: 1 |
Trong ví dụ trên biến ”bar” thứ 2 do có từ khoá khai báo “var” ở phía trước nên sẽ có nhiều bạn hiểu lầm là biến “bar” này sẽ không gây ảnh hưởng đến biến "bar" ban đầu.
Tuy nhiên, do “var” khai báo biến trong lexical scope (ở đây là function foo) như mình đã nói ở trên nên biến “bar” thứ 2 sẽ được khai báo đè lên biến bar thứ nhất.
Do đó, kết quả trả về sẽ là giá trị của biến “bar“ thứ 2 là 1
Ví dụ 2:
| function foo() { | |
| let bar = 2; | |
| if (true) { | |
| let bar = 1; // bar variable locally defined to block scope of if | |
| } | |
| return bar; | |
| } | |
| console.log(foo()); // result: 2 |
Ví dụ trên tương tự như ví dụ 1 nhưng sử dụng từ khoá “let” để khai báo thay vì từ khoá “var”.
Ở đây, biến bar thứ 2 được khai báo locally trong block scope giữa 2 dấu ngoặc nhọn "{...}" của if do tác dụng của từ khoá “let“ (let và const khai báo biến trong block scope). Do đó, giá trị của biến “bar” đầu tiên sẽ không bị ảnh hưởng và hàm này sẽ trả về giá trị của biến bar đầu tiên là 2.
Cám ơn bạn đã đọc bài viết. Hãy like nếu bài viết bổ ích với bạn. Nếu mình có nhầm lẫn hoặc bạn có ý kiến đóng góp, xin vui lòng comment ở bên dưới.
Một số nguồn tham khảo:
https://developer.mozilla.org/en/docs/Web/JavaScript/Closures#Lexical_scoping
QuanCao 12-04-2017
Bình luận
{{ comment.user.name }}
Bỏ hay
Hay
Cùng một tác giả
24
2
Sử dụng data attribute trong HTML Hôm nay trong lúc làm chức năng mới cho hệ thống (Link), mình có dùng lại Data attribute trong HTML, tiện thể mìn...
23
4
Sử dụng biến trong CSS Những website lớn thường sẽ sử dụng rất nhiều CSS với lượng lớn giá trị bị lặp lại. Giả sử khi bạn muốn sửa màu chủ đạo của...
10
7
Javascript Closure Closure là một hàm (function), trong hàm đó có sử dụng những biến độc lập (là biến được sử dụng locally trong hàm nhưng lại đượ...
Bài viết liên quan
38
3
(Ảnh) Giới thiệu thư viện VisSense.js Chắc hẳn hiện giờ những bạn nào thường xuyên dùng Facebook đều biết một chức năng hay ho của mạng xã hội n...
150
15
(Ảnh) Biểu thức chính quy (hay regex) là một công cụ mạnh mẽ mà mỗi nhà phát triển nên biết. Nó có thể khớp với một chuỗi các ký tự dựa trên các t...