Closures trong JavaScript là gì và chúng hoạt động như thế nào?

là một ngôn ngữ hướng chức năng mang lại nhiều tự do cho người dùng. Bạn có thể tạo động một hàm, sao chép nó sang một biến khác hoặc chuyển làm đối số cho một hàm khác và gọi từ một nơi khác sau đó. Các đóng trong JavaScript được tạo mỗi khi một hàm được tạo, tại thời điểm tạo hàm. Trong bài viết này, chúng ta sẽ hiểu các bao đóng theo trình tự sau:

• Giới thiệu về Closures trong JavaScript
• Đóng cửa thực tế
• Chuỗi phạm vi
• Đóng cửa trong một vòng lặp

Giới thiệu về Closures trong JavaScript

Đóng cửa là sự kết hợp của một chức năng được nhóm cùng với các tham chiếu đến trạng thái xung quanh của nó, tức là môi trường từ vựng. Nói cách khác, một bao đóng cung cấp cho bạn quyền truy cập từ một chức năng bên trong đến phạm vi của một chức năng bên ngoài.

Hầu hết các Nhà phát triển sử dụng các bao đóng trong JavaScript một cách có ý thức hoặc vô thức. Nó cung cấp khả năng kiểm soát tốt hơn đối với mã khi sử dụng chúng. Ngoài ra, đây là câu hỏi thường gặp nhất trong bất kỳ .

Thí dụ:

function foo () {var x = 10 function inner () {return x} return inner} var get_func_inner = foo () console.log (get_func_inner ()) console.log (get_func_inner ()) console.log (get_func_inner ())

Đầu ra:

10
10
10

Tại đây, bạn có thể truy cập vào Biến đổi x được định nghĩa trong hàm foo () thông qua hàm inner () vì hàm này sau này bảo toàn chuỗi phạm vi của hàm bao quanh tại thời điểm thực thi hàm bao. Do đó, hàm bên trong biết giá trị của x thông qua chuỗi phạm vi của nó. Đây là cách bạn có thể sử dụng các bao đóng trong JavaScript.

Đóng cửa thực tế

Closures cho phép bạn liên kết môi trường từ vựng với một hàm hoạt động trên dữ liệu đó. Điều này rõ ràng tương đồng với lập trình hướng đối tượng , nơi các đối tượng cho phép chúng tôi liên kết các thuộc tính của đối tượng với một hoặc nhiều phương thức.

hợp nhất trong c ++

Do đó, bạn có thể sử dụng một bao đóng ở bất cứ đâu mà bạn có thể thường sử dụng một đối tượng chỉ với một phương thức duy nhất.

Thí dụ:

function makeSizer (size) {return function () {document.body.style.fontSize = size + 'px'}} var size12 = makeSizer (12) var size14 = makeSizer (14) var size16 = makeSizer (16)

Ví dụ trên thường được đính kèm dưới dạng gọi lại: một hàm duy nhất được thực thi để phản hồi lại sự kiện.

Chuỗi phạm vi

Đóng trong JavaScript có ba phạm vi như:

• Phạm vi địa phương
• Phạm vi chức năng bên ngoài
• Phạm vi toàn cầu

Một sai lầm phổ biến là không nhận ra rằng, trong trường hợp bản thân hàm bên ngoài là một hàm lồng nhau, thì quyền truy cập vào phạm vi của hàm bên ngoài bao gồm phạm vi bao quanh của hàm bên ngoài, tạo một chuỗi phạm vi hàm một cách hiệu quả.

// phạm vi toàn cục var x = 10 function sum (a) {return function (b) {return function (c) {// hàm trả về phạm vi bên ngoài hàm (d) {// phạm vi cục bộ trả về a + b + c + d + x}}}} console.log (sum (1) (2) (3) (4)) // log 20

Nó cũng có thể được viết mà không có chức năng ẩn danh:

// phạm vi toàn cục var x = 10 function sum (a) {return function sum2 (b) {return function sum3 (c) {// hàm bên ngoài phạm vi trả về function sum4 (d) {// phạm vi cục bộ trả về a + b + c + d + x}}}} var s = sum (1) var s1 = s (2) var s2 = s1 (3) var s3 = s2 (4) console.log (s3) // log 20

Trong ví dụ trên, có một loạt các hàm lồng nhau, tất cả đều có quyền truy cập vào phạm vi bên ngoài của một hàm, do đó, bạn có thể nói rằng các bao đóng có quyền truy cập vào tất cả các phạm vi hàm bên ngoài mà chúng được khai báo.

Đóng cửa trong một vòng lặp

Bạn có thể sử dụng các bao đóng trong JavaScript để lưu trữ một hàm ẩn danh ở mọi chỉ mục của một mảng . Hãy lấy một ví dụ và xem cách sử dụng bao đóng trong một vòng lặp.

Thí dụ:

hàm ngoài () {var arr = [] var i for (i = 0 i<3 i++) { // storing anonymus function arr[i] = function () { return i } } // returning the array. return arr } var get_arr = outer() console.log(get_arr[0]()) console.log(get_arr[1]()) console.log(get_arr[2]())

Đầu ra:

3
3
3
3

Với điều này, chúng ta đã đi đến phần cuối của bài viết của chúng tôi. Tôi hy vọng bạn đã hiểu cách hoạt động của các bao đóng trong JavaScript và cách chúng được sử dụng để kiểm soát tốt hơn mã.

Bây giờ bạn đã biết về Closures trong JavaScript, hãy xem của Edureka. Đào tạo Chứng chỉ Phát triển Web sẽ giúp bạn Học cách tạo các trang web ấn tượng bằng cách sử dụng HTML5, CSS3, Twitter Bootstrap 3, jQuery và Google API và triển khai nó cho Amazon Simple Storage Service (S3).

Có một câu hỏi cho chúng tôi? Vui lòng đề cập đến nó trong phần nhận xét của 'Closures in JavaScript' và chúng tôi sẽ liên hệ lại với bạn.