Lexical environment trong JavaScript

Trước khi tìm hiểu về scope, scope chain, hay cả closures, bạn cần hiểu về Lexical Environment.

Đây là một khái niệm nền tảng trong JavaScript.

Execution Context và Callstack

Nhắc lại từ bài “Điều gì xảy ra khi chạy một chương trình JavaScript ?”, mỗi khi chương trình JavaScript thực thi, sẽ khởi tạo ra các “Execution Context”

Và có hai giai đoạn của execution context là “Memory Creation” và “Code Execution”.

Ví dụ có đoạn code sau:

function x () {
  var b = 10;
  y();

  function y () {
    var c = 5;
  }
}

x();

thì sơ đồ mô tả các execution context và callback được tạo với chương trình trên như sau:

Lexical Environment & Scope Chain

Mình đã chọn hình cover cho bài viết này là hình ảnh trái đất nhìn từ ngoài vũ trụ, là điểm tương đồng khi nói về lexical environment. Cùng tìm hiểu nhé!

Lexical là gì?

“Lexical” tiếng anh có nghĩa là sự kết nối từ bên ngoài theo một thứ tự nào đó.

Lexical Enviroment là gì?

“Lexical Environment” của hàm bao gồm local memory của hàm đó cộng với “Lexical Environment” của cha nó.

Ví dụ có hàm y ở trên nằm lồng trong hàm x (y con của x), và hàm x nằm bên trong global scope (x con của global. 

Hay còn gọi y is lexically inside the x function. x is lexically inside global

Ngay khi một “Execution Context” khởi tạo, một “Lexical Environment” cũng đồng thời được khởi tạo.

Cùng xem parent’s lexical environment tương ứng ở ví dụ trên:

Và Lexical Environment sẽ gồm local memory và parent lexical environment được biểu diễn với vòng tròn màu tím bên dưới.

Scope Chain

Nhìn vào hình trên bạn có thấy được cách chương trình tìm kiếm các giá trị của biến không ?

Thứ tự tìm sẽ từ vòng tím của y sang vòng tím của x rồi sang vòng tím của global và vẫn tìm không thấy thì sẽ gặp null và kết thúc quá trình tìm kiếm này.

Giả sử tại vòng tím x không tồn tại c như trên, thì chương trình sẽ tiếp tục tìm kiếm xem ở các vòng tím y, rồi đến global.

Nếu vẫn không tìm thấy sẽ báo lỗi. Nếu có tìm thấy tại đâu trước thì sẽ ưu tiên dùng giá trị tại chỗ đó.

Đây chính là các mà JS Engine tìm kiếm từ trong ra ngoài, gọi là Scope Chain.

Hay nói đơn giản hơn Scope Chain chính là chuỗi nối của các Lexical Environment.

Nếu biến không được tìm thấy ở local memory của execution context thì nó sẽ tiến hành tìm kiểm ở các lexical environment cho đến hết chuỗi thì thôi.

Tổng kết

– Lexical Environment được tạo cùng Execution Context

– Lexical Environment = local memory + parent’s Lexical Environment

– Chain of Lexical Environment gọi là Scope Chain

 

Vậy còn scope thì sao ? Scope có liên quan đến lexical environment này không ? 

Mời các bạn đón đọc bài tiếp theo về scope nhé!

Các bài viết khác về JavaScript nằm ở mục “JavaScript” nhé!

 

Nếu bạn nghĩ những nội dung này là hữu ích, bạn có thể khích lệ mình bằng cách:

– Mời mình ☕️ cafe qua Ko-fi hay Momo

– Theo dõi 👀 để nhận các bài viết mới trên: Careerly, fanpage, linkedin

– Comment góp ý để các bài mình viết tốt hơn nữa!🤘 Nhắn mình nhé 🤘

Hẹn gặp mọi người một ngày nào đó!

Leave a Reply

Your email address will not be published. Required fields are marked *

RELATED POST

Cặp đôi hủy diệt code xấu: DRY và Orthogonality

Bạn có nghĩ giai đoạn bảo trì (maintenance) là sau khi chương trình được phát hành (release)? Và trong giai…

Nguyên tắc SOLID trong lập trình hướng đối tượng (OOP) – thực hành cùng ngôn ngữ Python

SOLID là gì? SOLID là 5 nguyên tắc nền tảng trong lập trình hướng đối tượng OOP (Object Oriented Programming), giúp…

Bốn bước để học và viết trong thời gian dài

Bài blog này mình muốn gửi đến 4 bước mình đã làm để có thể duy trì việc học và rèn luyện…

BeautyOnCode đạt top 1 trên Careerly

Time flies! Nhanh thật, vậy là mình đã đồng hành cùng các đọc giả trên Careerly được hơn 6 tháng,…

%d bloggers like this: