Phạm vi từ vựng trong JavaScript – Hướng dẫn cho người mới bắt đầu


Trong bài viết này, chúng ta sẽ hiểu phạm vi từ vựng là gì bằng cách xem qua một số ví dụ hữu ích.

Chúng ta cũng sẽ có một cuộc thảo luận ngắn về cách JavaScript biên dịch và thực thi các chương trình.

Cuối cùng, chúng ta sẽ xem xét cách bạn có thể sử dụng phạm vi từ vựng để giải thích lỗi biến không được khai báo hoặc lỗi tham chiếu.

Không chần chừ nữa, chúng ta hãy bắt đầu.

Mục lục

Javascript thực thi chương trình như thế nào?

Trước khi hiểu cách JavaScript thực thi mã/chương trình, trước tiên chúng ta sẽ khám phá các bước khác nhau có liên quan đến bất kỳ quy trình biên dịch nào từ góc độ lý thuyết trình biên dịch.

Đối với bất kỳ ngôn ngữ nào, trình biên dịch thực hiện các thao tác sau:

Token hóa/Lexing

Trong quá trình này, toàn bộ chương trình được chia thành các từ khóa được gọi là mã thông báo. Ví dụ, hãy xem xét tuyên bố sau: let temp = 10 – sau khi áp dụng mã thông báo, nó sẽ chia câu lệnh này thành các từ khóa như sau: let, temp, =, 10.

Thuật ngữ Lexing và tokenizing được sử dụng thay thế cho nhau, nhưng có một sự khác biệt nhỏ giữa chúng. Lexing là một quá trình mã thông báo nhưng nó cũng kiểm tra xem nó có cần được coi là một mã thông báo riêng biệt hay không. chúng ta có thể xem xét lexing để trở thành một phiên bản thông minh của mã thông báo.

phân tích cú pháp

Đây là quá trình thu thập tất cả các mã thông báo được tạo ở bước trước và biến chúng thành một cấu trúc cây lồng nhau đại diện cho mã theo ngữ pháp.

Cấu trúc cây này được gọi là cây cú pháp trừu tượng (AST).

Tạo mã

Quá trình này chuyển đổi AST thành mã có thể đọc được bằng máy.

Vì vậy, đây là một lời giải thích ngắn gọn về cách trình biên dịch hoạt động và tạo mã có thể đọc được bằng máy.

Tất nhiên, có nhiều bước hơn ngoài những bước được đề cập ở trên. Nhưng việc giải thích các bước/giai đoạn khác của trình biên dịch nằm ngoài phạm vi của bài viết này.

Quan sát quan trọng nhất mà chúng ta có thể thực hiện về việc thực thi JS là để thực thi mã, nó trải qua hai giai đoạn:

  1. phân tích cú pháp
  2. Chấp hành

Trước khi chúng ta hiểu phạm vi từ vựng, điều quan trọng trước tiên là phải hiểu cách JavaScript thực thi một chương trình. Trong các phần tiếp theo, chúng ta sẽ tìm hiểu sâu hơn về cách thức hoạt động của hai giai đoạn này.

Cách JavaScript phân tích/biên dịch và thực thi mã

không có tiêu đề
giai đoạn phân tích cú pháp

Trước tiên hãy nói về giai đoạn phân tích cú pháp. Trong giai đoạn này, công cụ JavaScript sẽ duyệt qua toàn bộ chương trình, gán các biến cho phạm vi tương ứng của chúng và cũng kiểm tra mọi lỗi. Nếu nó tìm thấy lỗi thì việc thực hiện chương trình sẽ bị dừng lại.

Đọc thêm  Ví dụ JSON Stringify – Cách phân tích đối tượng JSON bằng JS

Trong giai đoạn tiếp theo, quá trình thực thi mã thực sự diễn ra.

Để hiểu điều này chi tiết hơn, chúng ta sẽ xem xét hai tình huống sau:

  • Lỗi cú pháp
  • cẩu biến

Lỗi cú pháp

Để cho bạn thấy cách JS phân tích cú pháp chương trình đầu tiên và sau đó thực thi nó, cách tốt nhất và đơn giản nhất là trình bày hành vi của một lỗi cú pháp.

Hãy xem xét mã lỗi sau:

const token = "ABC";
console.log(token);

//Syntax error:
const newToken = %((token);

Chương trình trên sẽ phát sinh lỗi cú pháp ở dòng cuối cùng. Đây là lỗi sẽ như thế nào:

Uncaught SyntaxError: Unexpected token '%'

Nếu bạn xem lỗi, thì công cụ JavaScript đã không thực thi lệnh console.log bản tường trình. Thay vào đó, nó đi qua toàn bộ chương trình theo cách sau:

  • Dòng 1, thấy đã có phần khai báo và định nghĩa biến. Vì vậy, nó đã lưu trữ tài liệu tham khảo của token biến trong phạm vi hiện tại, đó là phạm vi toàn cầu.
  • Dòng 2, công cụ JavaScript đã phát hiện ra rằng token biến đang được tham chiếu. Đầu tiên nó đề cập đến phạm vi hiện tại để kiểm tra xem token biến có mặt hay không. Nếu nó hiện diện thì nó được gọi là token khai báo của biến.
  • Dòng 3, động cơ phát hiện ra rằng newToken biến đã được khai báo và định nghĩa. Nó đã kiểm tra xem có biến nào có tên newToken có mặt trong phạm vi hiện tại hay không. Nếu có, sau đó đưa ra một lỗi tham chiếu. Nếu không, sau đó lưu trữ tham chiếu của biến này trong phạm vi hiện tại.
  • Đồng thời, động cơ cũng phát hiện ra rằng nó đang cố gắng tham chiếu đến một biến %((token). Nhưng nó phát hiện ra rằng nó bắt đầu với % và tên biến không thể bắt đầu bằng từ khóa dành riêng, vì vậy nó đã gây ra lỗi cú pháp.

Biến/Chức năng Palăng

Nâng là một cơ chế mà qua đó tất cả các biến có trong phạm vi tương ứng của chúng được nâng lên, được cung cấp ở trên cùng.

Bây giờ, hãy xem ví dụ bên dưới sẽ cho bạn thấy rằng việc lưu trữ diễn ra trong giai đoạn phân tích cú pháp và sau đó quá trình thực thi diễn ra:

doSomething();

function doSomething(){
	console.log("How you doing?");
}

Trong chương trình trên, động cơ đi qua chương trình theo cách sau:

  • Dòng 1, công cụ JavaScript gặp phải một chức năng gọi là doSomething. Nó đã tìm kiếm để xem nếu doSomething đã có sẵn trong phạm vi hiện tại. Nếu có thì nó đề cập đến chức năng, nếu không nó sẽ đưa ra lỗi tham chiếu.
  • Hóa ra là trong giai đoạn phân tích cú pháp, động cơ đã tìm thấy function doSomething dòng để có mặt trong phạm vi hiện tại. Do đó, nó đã thêm tham chiếu của biến này trong phạm vi hiện tại và làm cho nó có sẵn trong toàn bộ chương trình.
  • cuối cùng doSomething chức năng in ra chuỗi How you doing?.

Như chúng ta có thể thấy từ phần giải thích ở trên, mã này trước tiên được phân tích cú pháp để tạo ra một số mã trung gian đảm bảo biến/hàm (nghĩa là doSomething) được tham chiếu trong phạm vi hiện tại được cung cấp.

Đọc thêm  Làm cách nào để xử lý các cuộc gọi lại không đồng bộ trong JavaScript...Không có cuộc gọi lại?

Trong giai đoạn tiếp theo, JavaScript biết về hàm này và bắt đầu thực thi.

Từ các ví dụ trên, chúng ta có thể kết luận một cách an toàn rằng công cụ JavaScript thực hiện những việc sau trước khi thực thi mã:

  1. Phân tích mã.
  2. Tạo mã trung gian cung cấp mô tả về các biến/hàm có sẵn.
  3. Sử dụng mã trung gian ở trên, nó sẽ bắt đầu thực hiện chương trình.

Phạm vi từ vựng là gì?

Quá trình xác định phạm vi của các biến/hàm trong thời gian chạy được gọi là phạm vi từ vựng. từ từ vựng đến từ giai đoạn từ vựng/token hóa của các bước biên dịch JS.

Trong thời gian chạy, JavaScript thực hiện hai việc sau: parsingexecution. Như bạn đã học trong phần trước, trong giai đoạn phân tích cú pháp, phạm vi của các biến/hàm được xác định. Đó là lý do tại sao điều quan trọng trước tiên là phải hiểu giai đoạn phân tích cú pháp của quá trình thực thi mã vì nó đặt nền tảng cho việc hiểu phạm vi từ vựng.

Theo thuật ngữ phổ thông, giai đoạn phân tích cú pháp của công cụ JavaScript là nơi diễn ra phạm vi từ vựng.

Bây giờ chúng ta đã biết những điều cơ bản về nó, hãy xem xét một số đặc điểm chính của phạm vi từ vựng:

Trước hết, trong giai đoạn phân tích cú pháp, một phạm vi được gán/tham chiếu đến một biến mà nó được khai báo.

Ví dụ, hãy xem xét một kịch bản trong đó một biến được tham chiếu trong hàm bên trong và phần khai báo của nó có trong phạm vi toàn cục. Trong trường hợp này, biến bên trong được gán với phạm vi bên ngoài, đó là phạm vi toàn cục.

ezgif.com-gif-maker--1---1-
Phạm vi giao minh họa

Sau đó, trong khi gán phạm vi cho một biến, công cụ JavaScript sẽ kiểm tra các phạm vi chính của biến đó để biết tính khả dụng của biến.

Nếu biến có mặt thì phạm vi cha đó được áp dụng cho biến. Nếu một biến không được tìm thấy trong bất kỳ phạm vi cha nào thì một lỗi tham chiếu sẽ được đưa ra.

Hãy xem hình minh họa bên dưới minh họa cách tìm kiếm phạm vi của một biến.

ezgif.com-gif-maker--3---1-
Công cụ JS tìm thành công một biến bằng cách đi qua từng phạm vi

Đây là một minh họa đại diện cho công cụ JS đang cố gắng tìm một biến không tồn tại trong bất kỳ phạm vi nào:

ezgif.com-gif-maker--6---1-
Công cụ JS ném lỗi tham chiếu

Hiểu phạm vi từ vựng

Trong phần trên, chúng tôi đã định nghĩa phạm vi từ vựng là gì. Chúng tôi cũng đã hiểu nó có những đặc điểm gì.

Trong phần này, chúng ta sẽ hiểu phạm vi từ vựng với sự trợ giúp của một ví dụ. Như họ nói, việc hiểu các chủ đề khó luôn dễ dàng hơn bằng cách xem xét các ví dụ từ mã thực tế hàng ngày. Bắt đầu nào.

Ví dụ mà chúng ta sẽ sử dụng liên quan đến việc tô màu các vùng mã có phạm vi tương tự. Điều này nghe có vẻ khó hiểu, nhưng hãy để tôi chứng minh điều này bằng một minh họa đơn giản.

Phạm vi toàn cầu và chức năng--1---1-
Hiểu phạm vi từ vựng với một ví dụ tô màu

Hãy lùi lại một bước và hiểu điều gì đang diễn ra trong hình minh họa này.

Đọc thêm  Phần mềm JavaScript Phần tử JSON

Chúng tôi có những điều sau đây trong chương trình của chúng tôi:

  • empData: Mảng các đối tượng.
  • allPositions: Mảng các chuỗi bao gồm tất cả các vị trí của nhân viên.
  • Cuối cùng, chúng tôi có một câu lệnh điều khiển in ra allPositions biến.

Bây giờ chúng ta hãy xem điều gì xảy ra trong giai đoạn phân tích cú pháp của chương trình này:

  • Động cơ bắt đầu với dòng đầu tiên và nó bắt gặp một khai báo biến empData.
  • Sau đó, động cơ sẽ kiểm tra xem empData có sẵn trong phạm vi hiện tại hay không. Vì không tìm thấy biến tương tự nên nó kiểm tra sự tồn tại của biến này trong phạm vi cha của nó.
  • Công cụ sẽ dừng tìm kiếm tại đây vì không có sẵn phạm vi và phạm vi hiện tại cũng là phạm vi toàn cầu.
  • Tiếp theo, động cơ gán một undefined giá trị cho empData trong giai đoạn phân tích cú pháp để một khi bất kỳ phạm vi lồng nhau nào cố gắng tham chiếu đến biến này, thì nó có thể được sử dụng.
  • Phía bên tay phải của toán tử gán này được đánh giá trong giai đoạn thực hiện chương trình.
  • Theo cách tương tự, động cơ cũng làm như vậy đối với allPositions biến và gán cho nó một undefined giá trị.
  • Nhưng ở phía bên tay phải, chúng tôi cũng đang tham khảo empData Biến đổi. Ở giai đoạn này, công cụ sẽ kiểm tra xem biến này có sẵn trong phạm vi hiện tại hay không. Vì nó có sẵn, nó đề cập đến giống nhau (nghĩa là có mặt trong phạm vi toàn cục).
  • Động cơ vẫn ở phía bên tay phải vì nó phát hiện ra rằng có chức năng mũi tên bên trong chức năng bản đồ. Vì động cơ đã gặp định nghĩa chức năng, nó tạo ra một phạm vi mới. Trong gif, đây là số 2.
  • Vì đây là một phạm vi mới, chúng tôi sẽ tô mã màu đen cho nó.
  • Hàm mũi tên này có một đối số là data và trả về data.position. Trong giai đoạn phân tích cú pháp, công cụ nâng tất cả các biến được yêu cầu bằng cách tham chiếu các biến có trong phạm vi hiện tại cũng như trong phạm vi chính của nó.
  • Bên trong chức năng này, các data biến được tham chiếu để công cụ kiểm tra xem phạm vi hiện tại có biến này không. Vì biến có mặt trong phạm vi hiện tại, nên nó đề cập đến giống nhau.
  • Một khi động cơ gặp phải } cú đúp, nó di chuyển ra khỏi phạm vi chức năng.
  • Cuối cùng, khi kết thúc chương trình, chúng ta có một câu lệnh console hiển thị allPositions biến. Vì nó đang tham chiếu đến allPositions biến, nó tìm kiếm trong phạm vi hiện tại (đó là phạm vi toàn cầu). Vì nó được tìm thấy, nó đề cập đến điều tương tự trong console bản tường trình.

Tóm lược

Trong bài viết này, chúng ta đã tìm hiểu về ý nghĩa của phạm vi từ vựng và cách nó hoạt động bằng cách xem một ví dụ tô màu đơn giản.

Cảm ơn bạn đã đọc!

theo tôi trên TwitterGitHub và LinkedIn.





Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status