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/