Closures trong JavaScript

Closure là gì ?

Closure là một khía cạnh quan trọng của Javascript mà các lập trình viên nên biết, bài viết hôm nay chúng ta cùng tìm hiểu những điều cơ bản về Closure, cách thức hoạt động của Closure trong Javascript. Chúng ta sẽ bắt đầu bằng cách xem xét hai định nghĩa về Closure:

Closure là một chức năng (function) có quyền truy cập vào phạm vi phụ huynh (parent scope) ngay cả khi phạm vi đã đóng.

Closure là sự kết hợp của một chức năng và môi trường mà chức năng đó được khai báo

Đầu tiên chúng ta cần tìm hiểu phạm vi (scope) trong Javascript. Phạm vi (scope) về cơ bản là tuổi thọ của một biến trong Javascript, nơi mà một biến được định nghĩa đóng một vai trò trong bao lâu và những chức năng (functions) trong chương trình có quyền truy cập nó.

Khi tạo một hàm trong Javascript, nó có quyền truy cập các biến được tạo bên trong và bên ngoài hàm. Các biến được tạo bên trong một hàm là các biến được định nghĩa cục bộ. Một biến địa phương (local variable) chỉ có thể được truy cập trong phạm vi chức năng mà nó được định nghĩa. Trong ví dụ dưới đây, bạn sẽ thấy rằng nếu chúng ta cố gắng lấy giá trị của words ngoài chức năng (function) chúng ta nhận được một lỗi tham chiếu. Đó là bởi vì các từ là một biến địa phương:

// Example of accessing variables INSIDE the function
// words is a LOCAL variable
function speak(){
  var words = 'hi'; 
  console.log(words);
}
speak(); // 'hi'
console.log(words); // Uncaught ReferenceError: words is not defined

Tương phản với ví dụ này nơi chúng ta định nghĩa words trong phạm vi toàn cầu (global scope). Điều này có nghĩa là nó có thể truy cập tới cả trong và ngoài hàm (function):

// Example of accessing variables OUTSIDE the function
// words is a GLOBAL variable
var words = 'hi';
function speak(){ 
  console.log(words);
}
speak(); // 'hi' 
console.log(words); // 'hi'

Nested Functions

Điều gì xảy ra khi chúng ta viết một hàm bên trong một hàm khác? Chúng ta cùng xem ví dụ sau để biết nhé