Understand JavaScript - Function Factories
Trong bài trước mình đã giới thiệu về Closure , vậy nó có ích như thế nào ? khi nào nên sử dụng nó ? trong bài viết này mình sẽ nói tiếp về Closure để các bạn hiểu thêm về khái niệm này.
Lợi thế của Closure để tạo các mẫu thiết kế mà nếu không dùng Closure thì không thể.
Tạo mẫu Function Facories :
Trong những bài trước mình có nói rằng chúng ta có thể tạo ra một hàm và nó sẽ được gọi nhiều lần khác nhau với số lượng tham số đầu vào khác nhau hay nói cách khác chính là Function Overloading
Nhưng với Closure mình sẽ cho bạn thấy làm thế nào chúng ta có thể cải tiến các mẫu để linh hoạt trong việc sử dụng và thực tế chính là lợi dụng tính bao đóng (Closure) tồn tại trong JS .
Thay vì tạo một hàm thông thường mình tạo ra một Function Factories
Kết quả :
Hàm makeGreeting này mình cho nó trả về một hàm
- Điều đặc biệt là mình truyền biến Language cho hàm makeGreeting chứ không truyền cho hàm được trả về .(Lợi dùng tính chất Closure) khi mình yêu cầu Language ở trong hàm trả về mặc dù hàm maketGreeting đã thực thi nhưng biến bị mắc kẹt hay bị nhét vào trong Closure .
Hàm makeGreet của mình hoạt động như một nơi tạo ra các hàm ^^. Mình đang lợi dùng tính chất bao đóng để thiết lập giá trị tham số được sử dụng bên trong hàm được trả về.
Bạn có thể thấy rằng ở hàm greetEnglish mình không thể truy cập trực tiếp hay thay đổi giá trị biến Language nữa , biến Language được giấu đi không cho phép sử dụng ở Scope Global nhưng biến có thể sử dụng rất nhiều lần trong nhiều hàm khác nhau ^^. Bạn có tưởng tượng ra điều này có sức mạnh thế nào không ? Hầu hết các framework hiện nay đều sử dụng mô hình này để xây dựng các hàm.
Nếu bạn thấy khó hiểu hãy đi vào chi tiết theo từng dòng code.
Khi chương trình chạy EC Global được tạo ra , biến greetEnlish, greetSpanish, hàm makeGreeting được lưu vào trong vùng nhớ của EC.
Khi chạy đến dòng 13 một EC mới của hàm makeGreeting được tạo ra biến language = en được lưu vào trong vùng nhớ của EC này.
JSE chạy hàm này theo từng dòng và trả về một hàm rồi kết thúc , EC bị ném ra khỏi ECS nhưng vùng nhớ của EC này vẫn nằm đó.
Code ở Global Execution Context lại tiếp tục chạy đến dòng 14.
=> Một EC mới được tạo ra , chú ý rằng mỗi lần một hàm được gọi nó sẽ tạo ra một EC mới hoàn toàn riêng biệt kể cả có cùng gọi một hàm đi chăng nữa và biến language lại được thêm vào vùng nhớ của EC này.
Hàm lại chạy và trả về một hàm khác rồi bị bật ra khỏi ECS nhưng như bạn đoán được vùng nhớ của EC này thì không bị mất đi.
Code trong Global EC lại tiếp tục chạy từng dòng , chạy đến dòng số 15 lúc này mình mới thực sự gọi hàm được trả về trong hàm makeGreeting
=> Một EC mới được tạo ra
JS biết rằng trong hàm greetEnglish nó biết rằng bạn muốn tham đến vùng nhớ nào để lấy biến Language hiện tượng bao đóng xảy ra
=> Mỗi khi bạn gọi một hàm thì một EC mới được tạo ra và bất cứ hàm nào được tạo ra bên trong nó sẽ trỏ đến EC đó (tứ là hàm con trỏ đến EC của hàm cha) , ngay cả khi hàm cha chạy nó vẫn trỏ đến vùng nhớ của EC cha như thể hàm cha không bị bật ra khỏi ECS và bạn chú ý rằng có một cơ chết giúp JS nhận biết trỏ đến vùng nhớ phù hợp.
Mô hình Function Factories rất hữu dụng nó giúp chúng ta tạo ra các chức năng có một tham số mặc định bằng cách sử dụng tính chất bao đóng.
Lợi thế của Closure để tạo các mẫu thiết kế mà nếu không dùng Closure thì không thể.
Tạo mẫu Function Facories :
Trong những bài trước mình có nói rằng chúng ta có thể tạo ra một hàm và nó sẽ được gọi nhiều lần khác nhau với số lượng tham số đầu vào khác nhau hay nói cách khác chính là Function Overloading
Nhưng với Closure mình sẽ cho bạn thấy làm thế nào chúng ta có thể cải tiến các mẫu để linh hoạt trong việc sử dụng và thực tế chính là lợi dụng tính bao đóng (Closure) tồn tại trong JS .
Thay vì tạo một hàm thông thường mình tạo ra một Function Factories
Kết quả :
Hàm makeGreeting này mình cho nó trả về một hàm
- Điều đặc biệt là mình truyền biến Language cho hàm makeGreeting chứ không truyền cho hàm được trả về .(Lợi dùng tính chất Closure) khi mình yêu cầu Language ở trong hàm trả về mặc dù hàm maketGreeting đã thực thi nhưng biến bị mắc kẹt hay bị nhét vào trong Closure .
Hàm makeGreet của mình hoạt động như một nơi tạo ra các hàm ^^. Mình đang lợi dùng tính chất bao đóng để thiết lập giá trị tham số được sử dụng bên trong hàm được trả về.
Bạn có thể thấy rằng ở hàm greetEnglish mình không thể truy cập trực tiếp hay thay đổi giá trị biến Language nữa , biến Language được giấu đi không cho phép sử dụng ở Scope Global nhưng biến có thể sử dụng rất nhiều lần trong nhiều hàm khác nhau ^^. Bạn có tưởng tượng ra điều này có sức mạnh thế nào không ? Hầu hết các framework hiện nay đều sử dụng mô hình này để xây dựng các hàm.
Nếu bạn thấy khó hiểu hãy đi vào chi tiết theo từng dòng code.
Khi chương trình chạy EC Global được tạo ra , biến greetEnlish, greetSpanish, hàm makeGreeting được lưu vào trong vùng nhớ của EC.
Khi chạy đến dòng 13 một EC mới của hàm makeGreeting được tạo ra biến language = en được lưu vào trong vùng nhớ của EC này.
JSE chạy hàm này theo từng dòng và trả về một hàm rồi kết thúc , EC bị ném ra khỏi ECS nhưng vùng nhớ của EC này vẫn nằm đó.
Code ở Global Execution Context lại tiếp tục chạy đến dòng 14.
=> Một EC mới được tạo ra , chú ý rằng mỗi lần một hàm được gọi nó sẽ tạo ra một EC mới hoàn toàn riêng biệt kể cả có cùng gọi một hàm đi chăng nữa và biến language lại được thêm vào vùng nhớ của EC này.
Hàm lại chạy và trả về một hàm khác rồi bị bật ra khỏi ECS nhưng như bạn đoán được vùng nhớ của EC này thì không bị mất đi.
Code trong Global EC lại tiếp tục chạy từng dòng , chạy đến dòng số 15 lúc này mình mới thực sự gọi hàm được trả về trong hàm makeGreeting
=> Một EC mới được tạo ra
JS biết rằng trong hàm greetEnglish nó biết rằng bạn muốn tham đến vùng nhớ nào để lấy biến Language hiện tượng bao đóng xảy ra
=> Mỗi khi bạn gọi một hàm thì một EC mới được tạo ra và bất cứ hàm nào được tạo ra bên trong nó sẽ trỏ đến EC đó (tứ là hàm con trỏ đến EC của hàm cha) , ngay cả khi hàm cha chạy nó vẫn trỏ đến vùng nhớ của EC cha như thể hàm cha không bị bật ra khỏi ECS và bạn chú ý rằng có một cơ chết giúp JS nhận biết trỏ đến vùng nhớ phù hợp.
Mô hình Function Factories rất hữu dụng nó giúp chúng ta tạo ra các chức năng có một tham số mặc định bằng cách sử dụng tính chất bao đóng.
Nhận xét
Đăng nhận xét