- vừa được xem lúc

Closure trong Javascript - Phần 1: Lexical Environment

0 0 25

Người đăng: Nguyen Tuan Anh K

Theo Viblo Asia

Xin chào các bạn, dạo này mình vẫn đang tìm tòi Javascript các thứ, có đọc qua đến phần closure. Để hiểu được closure thì trước tiên cần biết Lexical Environment là gì, vậy hãy cùng đi tìm hiểu.

1. Định nghĩa

Tất cà các hàm hay code block trong Javascipt và cả Global Object đều có một object được giấu tên, được gọi là Lexical Environment. Một Lexical Environment có 2 phần:

  1. Environment Record: một object chứa tất cả các biến local thành thuộc tính của nó và một vài thông tin khác (như giá trị của this)
  2. Một reference (hãy coi nó như một mỗi liên kết) tới Lexical Environment bên ngoài.

2. Biến số (Variables)

Có thể nói, một biến số trong Javascript (variable) chính là một thuộc tính của Environment Record của môi trường đó. Khi bạn đang truy cập hay thay đổi một biến cũng có nghĩa là đang truy cập hay thay đổi thuộc tính đó của Environment Record.

Ví dụ:

let phrase = "Hello World";
phrase = "Goodbye World";
phrase = "Hello again";

Ở trong ví dụ này, biến phrase sẽ là một thuộc tính của object Environment Record được đính với Global Object.

  • Lưu ý: Lexical Environment chỉ tồn tại dưới dạng specs, tức là chỉ tồn tại dưới mặt lý thuyết. Không có cách nào để get object này và thay đổi nó.

3. Khai báo hàm (Function Declarations)

Khi bạn khai báo một hàm trong Javascript, hàm đó cũng sẽ trở thành một method của Environment Record trong scope đó. Tuy nhiên, khi bạn khai báo (declare) một hàm, hàm đó có thể sử dụng được ngay lập tức, thậm chí trước khi bạn declare hàm đó.

say("Alice") function say(name) { console.log(`Hello ${name}`)
}
-> Hello Alice

4. Lexical Environment trong và ngoài (Inner and Outer Lexical Environment)

Khi một hàm được chạy thì ở đoạn đầu của quá trình đó, một Lexical Environment mới sẽ được tạo ra để chứa các biến và tham số.

Ví dụ:

let phrase = 'Hello'; function say(name) { console.log(`${phrase} ${name}`)
}
say('Alice')
  • Lexical Environment bên trong (của hàm say) có thuộc tính là name, là tham số được truyền vào. Khi gọi hàm này với say('Alice'), giá trị của nameAlice

  • Lexical Environment bên ngoài hàm say (của Global Object) có chứa thuộc tính phrase và chứa luôn cả hàm say.

  • Lưu ý: khi chương trình muốn tìm một biến số, nó sẽ tìm từ Lexical Environment bên trong ra bên ngoài cho tới khi tìm đến Lexical Environment của Global Object. Ở ví dụ trên, chương trình đã không tìm thấy biến phraseLexical Environment bên trong hàm say nên nó đã tìm ở bên ngoài.

Đó là những điều cơ bản về Lexical Environment, chúng ta sẽ quay lại với Closure ở phần tiếp theo. Bạn có thể đọc thêm ở đây.

Bình luận

Bài viết tương tự

- vừa được xem lúc

Giới thiệu Typescript - Sự khác nhau giữa Typescript và Javascript

Typescript là gì. TypeScript là một ngôn ngữ giúp cung cấp quy mô lớn hơn so với JavaScript.

0 0 527

- vừa được xem lúc

Bạn đã biết các tips này khi làm việc với chuỗi trong JavaScript chưa ?

Hi xin chào các bạn, tiếp tục chuỗi chủ đề về cái thằng JavaScript này, hôm nay mình sẽ giới thiệu cho các bạn một số thủ thuật hay ho khi làm việc với chuỗi trong JavaScript có thể bạn đã hoặc chưa từng dùng. Cụ thể như nào thì hãy cùng mình tìm hiểu trong bài viết này nhé (go).

0 0 435

- vừa được xem lúc

Một số phương thức với object trong Javascript

Trong Javascript có hỗ trợ các loại dữ liệu cơ bản là giống với hầu hết những ngôn ngữ lập trình khác. Bài viết này mình sẽ giới thiệu về Object và một số phương thức thường dùng với nó.

0 0 157

- vừa được xem lúc

Tìm hiểu về thư viện axios

Giới thiệu. Axios là gì? Axios là một thư viện HTTP Client dựa trên Promise.

0 0 147

- vừa được xem lúc

Imports và Exports trong JavaScript ES6

. Giới thiệu. ES6 cung cấp cho chúng ta import (nhập), export (xuất) các functions, biến từ module này sang module khác và sử dụng nó trong các file khác.

0 0 112

- vừa được xem lúc

Bài toán đọc số thành chữ (phần 2) - Hoàn chỉnh chương trình dưới 100 dòng code

Tiếp tục bài viết còn dang dở ở phần trước Phân tích bài toán đọc số thành chữ (phần 1) - Phân tích đề và những mảnh ghép đầu tiên. Bạn nào chưa đọc thì có thể xem ở link trên trước nhé.

0 0 249