JavaScript sử dụng phạm vi nào?

Phạm vi và Chuỗi phạm vi là các khái niệm cơ bản của JavaScript và các ngôn ngữ lập trình khác. Tuy nhiên, những khái niệm này gây nhầm lẫn cho nhiều nhà phát triển JavaScript mới. Kiến thức về các khái niệm này là điều cần thiết để thành thạo JavaScript

Hiểu đúng về các khái niệm này sẽ giúp bạn viết mã tốt hơn, hiệu quả hơn và rõ ràng hơn. Điều này sẽ giúp bạn trở thành một nhà phát triển JavaScript tốt hơn

Vì vậy, trong bài viết này, tôi sẽ giải thích phạm vi và chuỗi phạm vi là gì, cách công cụ JavaScript thực hiện tra cứu biến và nội tại của các khái niệm này

Vì vậy, không cần phải quảng cáo thêm, Hãy bắt đầu. )

Mẹo. Khi xây dựng ứng dụng JS, hãy sử dụng các công cụ mã nguồn mở như Bit để xây dựng nhanh hơn. Bit biến các thành phần thành các mảnh Lego dùng chung mà nhóm của bạn có thể dễ dàng chia sẻ, tìm, sử dụng và phát triển trong tất cả các dự án của bạn để cùng nhau xây dựng nhanh hơn nhiều. Hãy thử một lần

Hợp tác và khám phá thành phần · Bit

Bit là nơi các nhà phát triển chia sẻ các thành phần và hợp tác để cùng nhau xây dựng phần mềm tuyệt vời. Khám phá các thành phần được chia sẻ…

chút. nhà phát triển

Phạm vi là gì?

Phạm vi trong JavaScript đề cập đến khả năng truy cập hoặc khả năng hiển thị của các biến. Đó là, phần nào của chương trình có quyền truy cập vào biến hoặc vị trí hiển thị của biến

Tại sao Phạm vi lại quan trọng?

1. Lợi ích chính của phạm vi là bảo mật. Nghĩa là, các biến chỉ có thể được truy cập từ một khu vực nhất định của chương trình. Sử dụng phạm vi, chúng ta có thể tránh được những sửa đổi ngoài ý muốn đối với các biến từ các phần khác của chương trình
2. Phạm vi cũng làm giảm xung đột không gian tên. Tức là chúng ta có thể sử dụng các tên biến giống nhau trong các phạm vi khác nhau

Các loại phạm vi

Có ba loại phạm vi trong JavaScript — 1) Phạm vi toàn cầu, 2) Phạm vi chức năng và, 3) Phạm vi khối

1. Phạm vi toàn cầu

Bất kỳ biến nào không nằm trong bất kỳ hàm hoặc khối nào (một cặp dấu ngoặc nhọn), đều nằm trong phạm vi toàn cầu. Các biến trong phạm vi toàn cầu có thể được truy cập từ bất kỳ đâu trong chương trình. Ví dụ

var greeting = 'Hello World!';function greet() {
  console.log(greeting);
}// Prints 'Hello World!'
greet();

2. Phạm vi cục bộ hoặc Phạm vi chức năng

Các biến được khai báo bên trong một hàm nằm trong phạm vi cục bộ. Chúng chỉ có thể được truy cập từ bên trong chức năng đó, điều đó có nghĩa là chúng không thể được truy cập từ mã bên ngoài. Ví dụ

function greet() {
  var greeting = 'Hello World!';
  console.log(greeting);
}// Prints 'Hello World!'
greet();// Uncaught ReferenceError: greeting is not defined
console.log(greeting);

3. Phạm vi khối

ES6 đã giới thiệu các biến let và const, không giống như các biến var, chúng có thể được đặt trong phạm vi cặp dấu ngoặc nhọn gần nhất. Điều đó có nghĩa là, chúng không thể được truy cập từ bên ngoài cặp dấu ngoặc nhọn đó. Ví dụ

{
  let greeting = 'Hello World!';
  var lang = 'English';
  console.log(greeting); // Prints 'Hello World!'
}// Prints 'English'
console.log(lang);// Uncaught ReferenceError: greeting is not defined
console.log(greeting);

Chúng ta có thể thấy rằng các biến

function greet() {
  var greeting = 'Hello World!';
  console.log(greeting);
}// Prints 'Hello World!'
greet();// Uncaught ReferenceError: greeting is not defined
console.log(greeting);

2 có thể được sử dụng bên ngoài khối, nghĩa là các biến

function greet() {
  var greeting = 'Hello World!';
  console.log(greeting);
}// Prints 'Hello World!'
greet();// Uncaught ReferenceError: greeting is not defined
console.log(greeting);

2 không nằm trong phạm vi khối

Phạm vi lồng nhau

Giống như các hàm trong JavaScript, một phạm vi có thể được lồng vào trong một phạm vi khác. Ví dụ

var name = 'Peter';function greet() {
  var greeting = 'Hello';
  {
    let lang = 'English';
    console.log(`${lang}: ${greeting} ${name}`);
  }
}greet();

Ở đây chúng ta có 3 phạm vi được lồng vào nhau. Đầu tiên, phạm vi khối (được tạo do biến

function greet() {
  var greeting = 'Hello World!';
  console.log(greeting);
}// Prints 'Hello World!'
greet();// Uncaught ReferenceError: greeting is not defined
console.log(greeting);

4) được lồng bên trong phạm vi hàm hoặc cục bộ, lần lượt được lồng bên trong phạm vi toàn cục

Phạm vi từ vựng

Phạm vi từ vựng (còn được gọi là Phạm vi tĩnh) có nghĩa đen là phạm vi được xác định tại thời điểm từ vựng (thường được gọi là biên dịch) chứ không phải tại thời điểm chạy. Ví dụ

let number = 42;function printNumber() {
  console.log(number);
}function log() {
  let number = 54;
  printNumber();
}// Prints 42
log();

Ở đây,

function greet() {
  var greeting = 'Hello World!';
  console.log(greeting);
}// Prints 'Hello World!'
greet();// Uncaught ReferenceError: greeting is not defined
console.log(greeting);

5 sẽ luôn in ra

function greet() {
  var greeting = 'Hello World!';
  console.log(greeting);
}// Prints 'Hello World!'
greet();// Uncaught ReferenceError: greeting is not defined
console.log(greeting);

6 bất kể hàm

function greet() {
  var greeting = 'Hello World!';
  console.log(greeting);
}// Prints 'Hello World!'
greet();// Uncaught ReferenceError: greeting is not defined
console.log(greeting);

7 được gọi từ đâu. Điều này khác với các ngôn ngữ có phạm vi động trong đó

function greet() {
  var greeting = 'Hello World!';
  console.log(greeting);
}// Prints 'Hello World!'
greet();// Uncaught ReferenceError: greeting is not defined
console.log(greeting);

5 sẽ in giá trị khác nhau tùy thuộc vào nơi hàm

function greet() {
  var greeting = 'Hello World!';
  console.log(greeting);
}// Prints 'Hello World!'
greet();// Uncaught ReferenceError: greeting is not defined
console.log(greeting);

7 được gọi

Nếu đoạn mã trên được viết bằng ngôn ngữ hỗ trợ phạm vi động, thì thay vào đó,

function greet() {
  var greeting = 'Hello World!';
  console.log(greeting);
}// Prints 'Hello World!'
greet();// Uncaught ReferenceError: greeting is not defined
console.log(greeting);

5 sẽ in ra

{
  let greeting = 'Hello World!';
  var lang = 'English';
  console.log(greeting); // Prints 'Hello World!'
}// Prints 'English'
console.log(lang);// Uncaught ReferenceError: greeting is not defined
console.log(greeting);

1

Sử dụng phạm vi từ vựng, chúng ta có thể xác định phạm vi của biến chỉ bằng cách xem mã nguồn. Trong khi trong trường hợp phạm vi động, phạm vi không thể được xác định cho đến khi mã được thực thi

Hầu hết các ngôn ngữ lập trình đều hỗ trợ phạm vi từ vựng hoặc tĩnh như C, C++, Java, JavaScript. Perl hỗ trợ cả phạm vi tĩnh và động

chuỗi phạm vi

Khi một biến được sử dụng trong JavaScript, công cụ JavaScript sẽ cố gắng tìm giá trị của biến đó trong phạm vi hiện tại. Nếu nó không thể tìm thấy biến, nó sẽ xem xét phạm vi bên ngoài và sẽ tiếp tục làm như vậy cho đến khi tìm thấy biến hoặc đạt đến phạm vi toàn cầu

Nếu vẫn không tìm thấy biến, nó sẽ khai báo ngầm biến đó trong phạm vi toàn cục (nếu không ở chế độ nghiêm ngặt) hoặc trả về lỗi

Ví dụ

function greet() {
  var greeting = 'Hello World!';
  console.log(greeting);
}// Prints 'Hello World!'
greet();// Uncaught ReferenceError: greeting is not defined
console.log(greeting);

5

Khi hàm

{
  let greeting = 'Hello World!';
  var lang = 'English';
  console.log(greeting); // Prints 'Hello World!'
}// Prints 'English'
console.log(lang);// Uncaught ReferenceError: greeting is not defined
console.log(greeting);

2 được thực thi, công cụ JavaScript sẽ tìm biến

{
  let greeting = 'Hello World!';
  var lang = 'English';
  console.log(greeting); // Prints 'Hello World!'
}// Prints 'English'
console.log(lang);// Uncaught ReferenceError: greeting is not defined
console.log(greeting);

3 và tìm thấy nó trong phạm vi hiện tại. Tiếp theo, nó tìm biến

{
  let greeting = 'Hello World!';
  var lang = 'English';
  console.log(greeting); // Prints 'Hello World!'
}// Prints 'English'
console.log(lang);// Uncaught ReferenceError: greeting is not defined
console.log(greeting);

4 trong phạm vi hiện tại và nó không thể tìm thấy nó ở đó, vì vậy nó tìm biến ở phạm vi bên ngoài và tìm thấy nó ở đó (i. e phạm vi toàn cầu)

Sau đó, chúng tôi gán

function greet() {
  var greeting = 'Hello World!';
  console.log(greeting);
}// Prints 'Hello World!'
greet();// Uncaught ReferenceError: greeting is not defined
console.log(greeting);

6 cho biến số, để công cụ JavaScript tìm kiếm biến

{
  let greeting = 'Hello World!';
  var lang = 'English';
  console.log(greeting); // Prints 'Hello World!'
}// Prints 'English'
console.log(lang);// Uncaught ReferenceError: greeting is not defined
console.log(greeting);

6 trong phạm vi hiện tại và sau đó ở phạm vi bên ngoài

Nếu tập lệnh không ở chế độ nghiêm ngặt, công cụ sẽ tạo một biến mới có tên là

{
  let greeting = 'Hello World!';
  var lang = 'English';
  console.log(greeting); // Prints 'Hello World!'
}// Prints 'English'
console.log(lang);// Uncaught ReferenceError: greeting is not defined
console.log(greeting);

6 và gán

function greet() {
  var greeting = 'Hello World!';
  console.log(greeting);
}// Prints 'Hello World!'
greet();// Uncaught ReferenceError: greeting is not defined
console.log(greeting);

6 cho nó hoặc trả về lỗi (nếu không ở chế độ nghiêm ngặt)

Vì vậy, khi một biến được sử dụng, công cụ sẽ duyệt qua chuỗi phạm vi cho đến khi tìm thấy biến đó

Phạm vi và Chuỗi phạm vi hoạt động như thế nào?

Cho đến bây giờ, chúng ta đã thảo luận về phạm vi là gì và các loại phạm vi. Bây giờ, hãy hiểu cách công cụ JavaScript xác định phạm vi của các biến và thực hiện tra cứu biến dưới mui xe

Để hiểu cách công cụ JavaScript thực hiện tra cứu biến, chúng ta phải hiểu khái niệm về môi trường từ vựng trong JavaScript

Môi trường từ điển là gì?

Môi trường từ vựng là một cấu trúc chứa ánh xạ biến định danh. (ở đây định danh đề cập đến tên của biến/hàm và biến là tham chiếu đến đối tượng thực [bao gồm đối tượng hàm và đối tượng mảng] hoặc giá trị nguyên thủy)

Nói một cách đơn giản, môi trường từ vựng là nơi lưu trữ các biến và tham chiếu đến đối tượng

Lưu ý — Đừng nhầm lẫn phạm vi từ vựng với môi trường từ vựng, phạm vi từ vựng là phạm vi được xác định tại thời điểm biên dịch và môi trường từ vựng là nơi lưu trữ các biến trong quá trình thực thi chương trình

Về mặt khái niệm, một môi trường từ vựng trông như thế này

{
  let greeting = 'Hello World!';
  var lang = 'English';
  console.log(greeting); // Prints 'Hello World!'
}// Prints 'English'
console.log(lang);// Uncaught ReferenceError: greeting is not defined
console.log(greeting);

3

Một môi trường từ vựng mới được tạo cho từng phạm vi từ vựng nhưng chỉ khi mã trong phạm vi đó được thực thi. Môi trường từ vựng cũng có tham chiếu đến môi trường từ vựng bên ngoài của nó ( i. e phạm vi bên ngoài). Ví dụ

{
  let greeting = 'Hello World!';
  var lang = 'English';
  console.log(greeting); // Prints 'Hello World!'
}// Prints 'English'
console.log(lang);// Uncaught ReferenceError: greeting is not defined
console.log(greeting);

4

Công cụ JavaScript thực hiện tra cứu biến như thế nào?

Bây giờ chúng ta đã biết phạm vi, chuỗi phạm vi và môi trường từ vựng là gì, giờ hãy hiểu cách công cụ JavaScript sử dụng môi trường từ vựng để xác định phạm vi và chuỗi phạm vi

Hãy xem đoạn mã dưới đây để hiểu các khái niệm trên

{
  let greeting = 'Hello World!';
  var lang = 'English';
  console.log(greeting); // Prints 'Hello World!'
}// Prints 'English'
console.log(lang);// Uncaught ReferenceError: greeting is not defined
console.log(greeting);

5

Khi đoạn script trên tải, một môi trường từ vựng toàn cầu được tạo, chứa các biến và hàm được xác định bên trong phạm vi toàn cầu. Ví dụ

{
  let greeting = 'Hello World!';
  var lang = 'English';
  console.log(greeting); // Prints 'Hello World!'
}// Prints 'English'
console.log(lang);// Uncaught ReferenceError: greeting is not defined
console.log(greeting);

6

Ở đây môi trường từ vựng bên ngoài được đặt thành null vì không có phạm vi bên ngoài nào sau phạm vi toàn cầu

Sau đó, một cuộc gọi đến chức năng

{
  let greeting = 'Hello World!';
  var lang = 'English';
  console.log(greeting); // Prints 'Hello World!'
}// Prints 'English'
console.log(lang);// Uncaught ReferenceError: greeting is not defined
console.log(greeting);

9 gặp phải. Vì vậy, một môi trường từ vựng mới được tạo cho hàm

{
  let greeting = 'Hello World!';
  var lang = 'English';
  console.log(greeting); // Prints 'Hello World!'
}// Prints 'English'
console.log(lang);// Uncaught ReferenceError: greeting is not defined
console.log(greeting);

9. Ví dụ

function greet() {
  var greeting = 'Hello World!';
  console.log(greeting);
}// Prints 'Hello World!'
greet();// Uncaught ReferenceError: greeting is not defined
console.log(greeting);

0

Ở đây môi trường từ vựng bên ngoài được đặt thành

var name = 'Peter';function greet() {
  var greeting = 'Hello';
  {
    let lang = 'English';
    console.log(`${lang}: ${greeting} ${name}`);
  }
}greet();

1 vì phạm vi bên ngoài của nó là phạm vi toàn cầu

Sau đó, công cụ JavaScript thực thi câu lệnh

var name = 'Peter';function greet() {
  var greeting = 'Hello';
  {
    let lang = 'English';
    console.log(`${lang}: ${greeting} ${name}`);
  }
}greet();

2

Công cụ JavaScript cố gắng tìm các biến

var name = 'Peter';function greet() {
  var greeting = 'Hello';
  {
    let lang = 'English';
    console.log(`${lang}: ${greeting} ${name}`);
  }
}greet();

3 và

var name = 'Peter';function greet() {
  var greeting = 'Hello';
  {
    let lang = 'English';
    console.log(`${lang}: ${greeting} ${name}`);
  }
}greet();

4 bên trong môi trường từ vựng của hàm. Nó tìm thấy biến

var name = 'Peter';function greet() {
  var greeting = 'Hello';
  {
    let lang = 'English';
    console.log(`${lang}: ${greeting} ${name}`);
  }
}greet();

4 bên trong môi trường từ vựng hiện tại nhưng nó sẽ không thể tìm thấy biến

var name = 'Peter';function greet() {
  var greeting = 'Hello';
  {
    let lang = 'English';
    console.log(`${lang}: ${greeting} ${name}`);
  }
}greet();

3 bên trong môi trường từ vựng hiện tại

Vì vậy, nó nhìn vào bên trong môi trường từ vựng bên ngoài (được xác định bởi thuộc tính bên ngoài i. e môi trường từ vựng toàn cầu) và tìm biến

var name = 'Peter';function greet() {
  var greeting = 'Hello';
  {
    let lang = 'English';
    console.log(`${lang}: ${greeting} ${name}`);
  }
}greet();

3

Tiếp theo, công cụ JavaScript thực thi mã bên trong khối. Vì vậy, nó tạo ra một môi trường từ vựng mới cho khối đó. Ví dụ

function greet() {
  var greeting = 'Hello World!';
  console.log(greeting);
}// Prints 'Hello World!'
greet();// Uncaught ReferenceError: greeting is not defined
console.log(greeting);

1

Tiếp theo, câu lệnh

var name = 'Peter';function greet() {
  var greeting = 'Hello';
  {
    let lang = 'English';
    console.log(`${lang}: ${greeting} ${name}`);
  }
}greet();

8 được thực thi, công cụ JavaScript tìm biến trong môi trường từ vựng hiện tại và sử dụng biến đó. Vì vậy, nó không tìm kiếm bên trong môi trường từ vựng bên ngoài (môi trường từ vựng toàn cầu) cho biến

Lưu ý — Môi trường từ vựng mới chỉ được tạo cho khai báo

function greet() {
  var greeting = 'Hello World!';
  console.log(greeting);
}// Prints 'Hello World!'
greet();// Uncaught ReferenceError: greeting is not defined
console.log(greeting);

4 và

let number = 42;function printNumber() {
  console.log(number);
}function log() {
  let number = 54;
  printNumber();
}// Prints 42
log();

0, không phải khai báo

function greet() {
  var greeting = 'Hello World!';
  console.log(greeting);
}// Prints 'Hello World!'
greet();// Uncaught ReferenceError: greeting is not defined
console.log(greeting);

2. Khai báo

function greet() {
  var greeting = 'Hello World!';
  console.log(greeting);
}// Prints 'Hello World!'
greet();// Uncaught ReferenceError: greeting is not defined
console.log(greeting);

2 được thêm vào môi trường từ vựng hiện tại (môi trường từ vựng toàn cục hoặc chức năng)

Vì vậy, khi một biến được sử dụng trong một chương trình, công cụ JavaScript sẽ cố gắng tìm biến đó trong môi trường từ vựng hiện tại và nếu nó không thể tìm thấy biến ở đó, nó sẽ tìm kiếm bên trong môi trường từ vựng bên ngoài để tìm biến đó. Vì vậy, đó là cách công cụ JavaScript thực hiện tra cứu biến

Sự kết luận

Vì vậy, một cách ngắn gọn, phạm vi là một khu vực mà một biến có thể nhìn thấy và truy cập được. Giống như các hàm, các phạm vi trong JavaScript có thể được lồng vào nhau và công cụ JavaScript duyệt qua chuỗi phạm vi để tìm các biến được sử dụng trong chương trình

JavaScript sử dụng phạm vi từ vựng có nghĩa là phạm vi của các biến được xác định tại thời điểm biên dịch. Công cụ JavaScript sử dụng môi trường từ vựng để lưu trữ các biến trong quá trình thực thi chương trình

Phạm vi và chuỗi phạm vi là những khái niệm cơ bản về JavaScript mà mọi nhà phát triển JavaScript nên hiểu. Có kiến ​​thức tốt về các khái niệm này sẽ giúp bạn trở thành một nhà phát triển JavaScript tốt hơn và hiệu quả hơn nhiều

Vậy là xong và nếu bạn thấy bài viết này hữu ích, vui lòng nhấp vào nút vỗ tay 👏 bên dưới, bạn cũng có thể theo dõi tôi trên Medium và Twitter, và nếu bạn có bất kỳ nghi ngờ nào, vui lòng bình luận. Tôi rất sẵn lòng giúp đỡ. )

JavaScript có phạm vi từ vựng không?

Phạm vi được tạo trong JavaScript như thế nào?

JavaScript sử dụng loại phạm vi nào?

Hai loại phạm vi trong JavaScript là gì?