JavaScript Closures

Chào mừng sự trở lại sau kì nghỉ, đây cũng là bài viết cuối cùng trong năm 2015 của tôi. Trong bài viết này tôi sẽ giới thiệu với các bạn về Closure. Một khái niệm vô cùng quan trọng trong Javascript. Nếu muốn master Javascript một trong những thứ quan trọng bạn cần phải hiểu đó là Closure.

Trong các bài trước, đặc biệt là trong series Angular cho người mới các bạn cũng đã từng được nghe qua về Closure, chẳng hạn như closure giúp cho bạn viết Javascript một cách tốt hơn, dùng để không bị leak các biến ra global scope, bla bla…

Tuy nhiên, kinh nghiệm bản thân tôi cho thấy, hầu hết những người mới bắt đầu với Javascript đều không thật sự hiểu về Closure hoặc thậm chí không biết về nó.

Closure là gì?

Closure thực chất là một khái niệm, nếu dịch sát nghĩa thì nó là thứ dùng để bao đóng một số thứ khác.

Ví dụ đơn giản thôi, nếu bạn có một cái thùng, đem con mèo của bạn cùng với mớ đồ chơi của nó quẳng hết vào trong thùng sau đó đóng thùng lại, ta có thể thấy cái thùng chính là Closure bao đóng con mèo và đồ chơi của nó. Và trong lúc đó, con mèo vẫn có thể sử dụng đồ chơi của nó bất kể khi nào nó muốn vì tất cả đều ở trong thùng cùng nó. Haha.

Thế nào là Javascript Closure?

Từ ngữ cảnh con mèo, đồ chơi và cái thùng, đem hết tất cả vào trong Javascript ta sẽ có cái thùng là Closure. Thay vì quăng con mèo vào thùng thì ta quăng function vào đó, và thay vì đồ chơi ta đặt hết tất cả các biến vào trong tầm vực của fucntion kia.

Điều quan trọng là function nằm bên trong Closure vẫn có thể truy xuất được tất cả các biên nằm bên trong Closure. Miễn là function còn tồn tại thì các biến bên trong Closure sẽ không bị thu dọn, để cho function có thể truy xuất chúng bất cứ khi nào nó muốn.

Code Closure trong Javascript.

Diễn tả ngôn từ thế đủ rồi, cùng code nào. Cùng xem đoạn code dưới đây.

function sayHello(){
  var message = 'Hello'; // define a local variable
  console.log(message); // print message, variable name message still in the scope
}

sayHello();

Ta có thể thấy ý đồ là in dòng chữ ‘Hello’ ra console. Bây giờ, hãy tinh chỉnh đoạn code một xíu. Thay vì việc in biến ‘message’ ra console, thì chúng ta trả về một function mà trong function đó sẽ in ra biến ‘message’.

function sayHello(){
  var message = 'Hello'; // define a local variable.
  return function(){ // return a function from sayHello.
    console.log(message); // wanna know if 'message' still in scope?
  }
}

var helloSayer = sayHello();
helloSayer(); // call the inner function returned from sayHello.

Đầu tiên chúng ta khai báo biến ‘message’ là một biến local trong function ‘sayHello’ và chỉ có thể truy xuất được trong function này. Tiếp đó chúng ta khai báo một function và trả nó về trong ‘sayHello’. Theo kiến thức Javascript thông thường khi chúng ta return từ ham ‘sayHello’, tất cả các biến local bên trong function sẽ bị out of scope và được thu dọn. Vậy nó có xảy ra với biến ‘message’ trong ví dụ trên, để xem nào.

Khi ta gọi function được trả về từ function ‘sayHello’, thật ngạc nhiên, console in ra ‘Hello’, vậy điều kì diệu gì đã làm cho function nằm trong kết quả trả về của ‘sayHello’ có thể truy xuất được biến ‘message’.

Vâng điều kì diệu tôi đang muốn nói tới ở đây chính là Closure.

Trong Javascript, một Closure sẽ chứa function và những biến mà được khai báo trong tầm vực của function như tôi đã nói từ trước. Trong đoạn code ở trên, khi chúng ta khai báo inner function, Javascript sẽ tạo một Closure và cho function đó cũng như tất cả các biến mà function đó truy xuất vào. Vì thế khi chúng ta gọi function được trả về từ ‘sayHello’ nó vẫn có thể truy xuất được dữ liệu của biến ‘message’.

Trên đây là những điều cơ bản nhất về Closure, trong bài tiếp theo, tôi sẽ trình bày sau hơn cũng như đưa ra nhiều ví dụ cụ thể hơn.

Hãy thoải mái góp ý vì những lời góp ý của các bạn sẽ làm cho những bài viết của tôi có chất lượng hơn.

Cuối cùng Happy new year!!! Chúc các bạn có một năm mới nhiều sức khoẻ và thành công, hẹn gặp lại trong năm 2016.

Bài gốc: https://codeaholicguy.wordpress.com/2015/12/31/javascript-closures/

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

Hoàng Nguyễn

36 bài viết.
464 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
90 34
Nhu cầu về Javascript developer hiện nay trong thị trường IT là rất lớn. Nếu bạn có kiến thức ở mảng này thì cơ hội nghề nghiệp cũng như thu nhập c...
Hoàng Nguyễn viết hơn 2 năm trước
90 34
White
51 19
Microservices hiện đang nhận được rất nhiều sự chú ý: các bài viết, các blog, các cuộc thảo luận trên phương tiện truyền thông, trên mạng xã hội, v...
Hoàng Nguyễn viết 3 năm trước
51 19
White
46 0
Trong quá trình đi làm, nhất là nếu làm frontend thì chắc chắn sẽ có một lúc nào đó các bạn bị Chrome (trình duyệt nói chung) chửi vô mặt những thứ...
Hoàng Nguyễn viết 3 tháng trước
46 0
Bài viết liên quan
Male avatar
0 0
Swift Closure: Bài 2: CallBack/ Completion (Part 2) ===== Updated ngày 30/06 Updated một chút: Vì những bất tiện và không rõ ràng về thông tin củ...
Bùi Khánh Duy viết 7 tháng trước
0 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

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


White
{{userFollowed ? 'Following' : 'Follow'}}
36 bài viết.
464 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á!