Phân biệt Lexical Scope và Block Scope trong javascript

Scope

Trong javascript có 2 loại scopes: lexical scopeblock 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;
}
view raw lexicalScope.js hosted with ❤ by GitHub

Ở 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"“const" được dùng để khai báo biến ở trong block scope. Ví dụ:

if (true) {
let variable;
}
view raw blockScope.js hosted with ❤ by GitHub

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"“lexical scope”:

Ví dụ 1:

function foo() {
var bar = 2;
if (true) {
var bar = 1;
}
return bar;
}
console.log(foo()); // result: 1
view raw blockScope1.js hosted with ❤ by GitHub

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
view raw scopewithlet.js hosted with ❤ by GitHub

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“ (letconst 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


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Quân Cao

4 bài viết.
31 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
22 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...
Quân Cao viết 10 tháng trước
22 2
White
19 3
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...
Quân Cao viết 10 tháng trước
19 3
White
8 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 đượ...
Quân Cao viết 11 tháng trước
8 7
Bài viết liên quan
White
39 7
Tăng sức mạnh cho javascript với lodash Lần này mình sẽ giới thiệu 1 thư viện javascript vô cùng bá đạo có tên là "lodash]1]", có thể nói nó là LI...
Huy Hoàng Phạm viết hơn 2 năm trước
39 7
White
21 8
Lâu không post gì muốn viết một bài dài dài về js cơ mà đau đầu quá viết mãi không xong, thôi post bài ngắn vậy :smiley: Lấy screen size ở đây tôi...
Hoàng Duy viết hơn 2 năm trước
21 8
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
4 bài viết.
31 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!