Các loại phạm vi trong JavaScript

Phạm vi là một khái niệm quan trọng quản lý tính khả dụng của các biến. Phạm vi nằm ở các bao đóng cơ sở, xác định ý tưởng về các biến toàn cục và cục bộ

Nếu bạn muốn viết mã bằng JavaScript, thì việc hiểu phạm vi của các biến là điều bắt buộc

Trong bài đăng này, tôi sẽ giải thích từng bước, chuyên sâu về cách phạm vi hoạt động trong JavaScript

Mục lục

1. Phạm vi

Trước khi đi sâu vào tìm hiểu phạm vi là gì, hãy thử một thí nghiệm chứng minh cách phạm vi tự thể hiện

Giả sử bạn định nghĩa một biến

javascript
if (true) {
  const message = 'Hello';
}
console.log(message); // ReferenceError: message is not defined

6

javascript
const message = 'Hello';
console.log(message); // 'Hello'

Sau đó, bạn có thể dễ dàng ghi biến này vào dòng tiếp theo sau khi khai báo. Không có câu hỏi ở đây

Bây giờ, hãy di chuyển khai báo của

javascript
if (true) {
  const message = 'Hello';
}
console.log(message); // ReferenceError: message is not defined

6 bên trong khối mã

javascript
if (true) {
  const message = 'Hello';
}
console.log(message); // ReferenceError: message is not defined

8

javascript
if (true) {
  const message = 'Hello';
}
console.log(message); // ReferenceError: message is not defined

Lần này, khi cố gắng ghi nhật ký biến, JavaScript ném ra

javascript
if (true) {
  const message = 'Hello';
}
console.log(message); // ReferenceError: message is not defined

9

Tại sao nó xảy ra?

Khối mã

javascript
if (true) {
  const message = 'Hello';
}
console.log(message); // ReferenceError: message is not defined

8 tạo phạm vi cho biến

javascript
if (true) {
  const message = 'Hello';
}
console.log(message); // ReferenceError: message is not defined

6. Và biến

javascript
if (true) {
  const message = 'Hello';
}
console.log(message); // ReferenceError: message is not defined

6 chỉ có thể được truy cập trong phạm vi này

Ở cấp độ cao hơn, khả năng truy cập của các biến bị giới hạn bởi phạm vi nơi chúng được tạo. Bạn được tự do truy cập biến được xác định trong phạm vi của nó. Nhưng bên ngoài phạm vi của nó, biến không thể truy cập được

Bây giờ, hãy đưa ra một định nghĩa chung về phạm vi

Phạm vi là một chính sách quản lý khả năng truy cập của các biến

2. Phạm vi chặn

Một khối mã trong JavaScript xác định phạm vi cho các biến được khai báo bằng cách sử dụng

javascript
if (true) {
  // "if" block scope
  const message = 'Hello';
  console.log(message); // 'Hello'
}
console.log(message); // throws ReferenceError

3 và

javascript
if (true) {
  // "if" block scope
  const message = 'Hello';
  console.log(message); // 'Hello'
}
console.log(message); // throws ReferenceError

4

javascript
if (true) {
  // "if" block scope
  const message = 'Hello';
  console.log(message); // 'Hello'
}
console.log(message); // throws ReferenceError

javascript
if (true) {
  // "if" block scope
  const message = 'Hello';
  console.log(message); // 'Hello'
}
console.log(message); // throws ReferenceError

5 đầu tiên ghi biến chính xác vì

javascript
if (true) {
  const message = 'Hello';
}
console.log(message); // ReferenceError: message is not defined

6 được truy cập từ phạm vi nơi nó được xác định

Nhưng biến

javascript
if (true) {
  // "if" block scope
  const message = 'Hello';
  console.log(message); // 'Hello'
}
console.log(message); // throws ReferenceError

5 thứ hai gây ra lỗi tham chiếu vì biến

javascript
if (true) {
  const message = 'Hello';
}
console.log(message); // ReferenceError: message is not defined

6 được truy cập bên ngoài phạm vi của nó. biến không tồn tại ở đây

Khối mã của các câu lệnh

javascript
if (true) {
  const message = 'Hello';
}
console.log(message); // ReferenceError: message is not defined

8,

javascript
for (const color of ['green', 'red', 'blue']) {
  // "for" block scope
  const message = 'Hi';
  console.log(color);   // 'green', 'red', 'blue'
  console.log(message); // 'Hi', 'Hi', 'Hi'
}
console.log(color);   // throws ReferenceError
console.log(message); // throws ReferenceError

0,

javascript
for (const color of ['green', 'red', 'blue']) {
  // "for" block scope
  const message = 'Hi';
  console.log(color);   // 'green', 'red', 'blue'
  console.log(message); // 'Hi', 'Hi', 'Hi'
}
console.log(color);   // throws ReferenceError
console.log(message); // throws ReferenceError

1 cũng tạo ra một phạm vi

Trong ví dụ sau vòng lặp

javascript
for (const color of ['green', 'red', 'blue']) {
  // "for" block scope
  const message = 'Hi';
  console.log(color);   // 'green', 'red', 'blue'
  console.log(message); // 'Hi', 'Hi', 'Hi'
}
console.log(color);   // throws ReferenceError
console.log(message); // throws ReferenceError

0 định nghĩa một phạm vi

javascript
for (const color of ['green', 'red', 'blue']) {
  // "for" block scope
  const message = 'Hi';
  console.log(color);   // 'green', 'red', 'blue'
  console.log(message); // 'Hi', 'Hi', 'Hi'
}
console.log(color);   // throws ReferenceError
console.log(message); // throws ReferenceError

Các biến

javascript
for (const color of ['green', 'red', 'blue']) {
  // "for" block scope
  const message = 'Hi';
  console.log(color);   // 'green', 'red', 'blue'
  console.log(message); // 'Hi', 'Hi', 'Hi'
}
console.log(color);   // throws ReferenceError
console.log(message); // throws ReferenceError

3 và

javascript
if (true) {
  const message = 'Hello';
}
console.log(message); // ReferenceError: message is not defined

6 tồn tại trong phạm vi của khối mã

javascript
for (const color of ['green', 'red', 'blue']) {
  // "for" block scope
  const message = 'Hi';
  console.log(color);   // 'green', 'red', 'blue'
  console.log(message); // 'Hi', 'Hi', 'Hi'
}
console.log(color);   // throws ReferenceError
console.log(message); // throws ReferenceError

1

Tương tự, khối mã của câu lệnh

javascript
for (const color of ['green', 'red', 'blue']) {
  // "for" block scope
  const message = 'Hi';
  console.log(color);   // 'green', 'red', 'blue'
  console.log(message); // 'Hi', 'Hi', 'Hi'
}
console.log(color);   // throws ReferenceError
console.log(message); // throws ReferenceError

1 tạo phạm vi cho các biến của nó

javascript
while (/* condition */) {
  // "while" block scope
  const message = 'Hi';
  console.log(message); // 'Hi'
}
console.log(message); // => throws ReferenceError

javascript
if (true) {
  const message = 'Hello';
}
console.log(message); // ReferenceError: message is not defined

6 được xác định trong phần thân của

javascript
for (const color of ['green', 'red', 'blue']) {
  // "for" block scope
  const message = 'Hi';
  console.log(color);   // 'green', 'red', 'blue'
  console.log(message); // 'Hi', 'Hi', 'Hi'
}
console.log(color);   // throws ReferenceError
console.log(message); // throws ReferenceError

8, do đó chỉ có thể truy cập

javascript
if (true) {
  const message = 'Hello';
}
console.log(message); // ReferenceError: message is not defined

6 trong phần thân của

javascript
for (const color of ['green', 'red', 'blue']) {
  // "for" block scope
  const message = 'Hi';
  console.log(color);   // 'green', 'red', 'blue'
  console.log(message); // 'Hi', 'Hi', 'Hi'
}
console.log(color);   // throws ReferenceError
console.log(message); // throws ReferenceError

8

Trong JavaScript, bạn có thể xác định các khối mã độc lập. Các khối mã độc lập cũng phân định phạm vi

javascript
{
  // block scope



  const message = 'Hello';
  console.log(message); // 'Hello'
}
console.log(message); // throws ReferenceError

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

Như đã thấy trong phần trước, khối mã tạo phạm vi cho các biến được khai báo bằng cách sử dụng

javascript
if (true) {
  // "if" block scope
  const message = 'Hello';
  console.log(message); // 'Hello'
}
console.log(message); // throws ReferenceError

4 và

javascript
if (true) {
  // "if" block scope
  const message = 'Hello';
  console.log(message); // 'Hello'
}
console.log(message); // throws ReferenceError

3. Tuy nhiên, đó không phải là trường hợp của các biến được khai báo bằng cách sử dụng

javascript
while (/* condition */) {
  // "while" block scope
  const message = 'Hi';
  console.log(message); // 'Hi'
}
console.log(message); // => throws ReferenceError

3

Đoạn mã dưới đây khai báo một biến

javascript
while (/* condition */) {
  // "while" block scope
  const message = 'Hi';
  console.log(message); // 'Hi'
}
console.log(message); // => throws ReferenceError

4 sử dụng câu lệnh

javascript
while (/* condition */) {
  // "while" block scope
  const message = 'Hi';
  console.log(message); // 'Hi'
}
console.log(message); // => throws ReferenceError

3

javascript
if (true) {
  // "if" block scope
  var count = 0;
  console.log(count); // 0
}
console.log(count); // 0

Biến

javascript
while (/* condition */) {
  // "while" block scope
  const message = 'Hi';
  console.log(message); // 'Hi'
}
console.log(message); // => throws ReferenceError

4, như mong đợi, có thể truy cập được trong phạm vi của khối mã

javascript
if (true) {
  const message = 'Hello';
}
console.log(message); // ReferenceError: message is not defined

8. Tuy nhiên, biến

javascript
while (/* condition */) {
  // "while" block scope
  const message = 'Hi';
  console.log(message); // 'Hi'
}
console.log(message); // => throws ReferenceError

4 cũng có thể truy cập được bên ngoài

Một khối mã không tạo phạm vi cho các biến

javascript
while (/* condition */) {
  // "while" block scope
  const message = 'Hi';
  console.log(message); // 'Hi'
}
console.log(message); // => throws ReferenceError

3, nhưng thân hàm thì có. Đọc lại câu trước và cố nhớ nó

Hãy tiếp tục phạm vi chức năng trong phần tiếp theo

3. phạm vi chức năng

Hàm trong JavaScript xác định phạm vi cho các biến được khai báo bằng cách sử dụng

javascript
while (/* condition */) {
  // "while" block scope
  const message = 'Hi';
  console.log(message); // 'Hi'
}
console.log(message); // => throws ReferenceError

3,

javascript
if (true) {
  // "if" block scope
  const message = 'Hello';
  console.log(message); // 'Hello'
}
console.log(message); // throws ReferenceError

3 và

javascript
if (true) {
  // "if" block scope
  const message = 'Hello';
  console.log(message); // 'Hello'
}
console.log(message); // throws ReferenceError

4

Hãy khai báo một biến

javascript
while (/* condition */) {
  // "while" block scope
  const message = 'Hi';
  console.log(message); // 'Hi'
}
console.log(message); // => throws ReferenceError

3 trong thân hàm

javascript
function run() {
  // "run" function scope
  var message = 'Run, Forrest, Run!';
  console.log(message); // 'Run, Forrest, Run!'
}
run();
console.log(message); // throws ReferenceError

javascript
{
  // block scope
  const message = 'Hello';
  console.log(message); // 'Hello'
}
console.log(message); // throws ReferenceError

4 thân hàm tạo phạm vi. Biến

javascript
if (true) {
  const message = 'Hello';
}
console.log(message); // ReferenceError: message is not defined

6 có thể truy cập được bên trong phạm vi chức năng, nhưng không thể truy cập được bên ngoài

Theo cách tương tự, thân hàm tạo phạm vi cho các khai báo hàm

javascript
if (true) {
  // "if" block scope
  const message = 'Hello';
  console.log(message); // 'Hello'
}
console.log(message); // throws ReferenceError

3,

javascript
if (true) {
  // "if" block scope
  const message = 'Hello';
  console.log(message); // 'Hello'
}
console.log(message); // throws ReferenceError

4 và thậm chí

javascript
function run() {
  // "run" function scope
  const two = 2;
  let count = 0;
  function run2() {}
  console.log(two);   // 2
  console.log(count); // 0
  console.log(run2);  // function
}
run();
console.log(two);   // throws ReferenceError
console.log(count); // throws ReferenceError
console.log(run2);  // throws ReferenceError

4. phạm vi mô-đun

Mô-đun ES2015 cũng tạo phạm vi cho các biến, hàm, lớp

Mô-đun

javascript
{
  // block scope
  const message = 'Hello';
  console.log(message); // 'Hello'
}
console.log(message); // throws ReferenceError

8 xác định hằng số

javascript
{
  // block scope
  const message = 'Hello';
  console.log(message); // 'Hello'
}
console.log(message); // throws ReferenceError

9 (đối với một số cách sử dụng nội bộ)

javascript
// "circle" module scope
const pi = 3.14159;
console.log(pi); // 3.14159
// Usage of pi

Biến

javascript
{
  // block scope
  const message = 'Hello';
  console.log(message); // 'Hello'
}
console.log(message); // throws ReferenceError

9 được khai báo trong phạm vi của mô-đun

javascript
{
  // block scope
  const message = 'Hello';
  console.log(message); // 'Hello'
}
console.log(message); // throws ReferenceError

8. Ngoài ra, biến

javascript
{
  // block scope
  const message = 'Hello';
  console.log(message); // 'Hello'
}
console.log(message); // throws ReferenceError

9 không được xuất từ ​​mô-đun

Sau đó, mô-đun

javascript
{
  // block scope
  const message = 'Hello';
  console.log(message); // 'Hello'
}
console.log(message); // throws ReferenceError

8 được nhập

javascript
if (true) {
  const message = 'Hello';
}
console.log(message); // ReferenceError: message is not defined

0

Không thể truy cập biến

javascript
{
  // block scope
  const message = 'Hello';
  console.log(message); // 'Hello'
}
console.log(message); // throws ReferenceError

9 bên ngoài mô-đun

javascript
{
  // block scope
  const message = 'Hello';



  console.log(message); // 'Hello'
}
console.log(message); // throws ReferenceError

8 (trừ khi được xuất rõ ràng bằng cách sử dụng

javascript
if (true) {
  // "if" block scope
  var count = 0;
  console.log(count); // 0
}
console.log(count); // 0

6)

Phạm vi mô-đun làm cho mô-đun được đóng gói. Mọi biến riêng tư (không được xuất) vẫn là một chi tiết nội bộ của mô-đun và phạm vi mô-đun bảo vệ các biến này khỏi bị truy cập bên ngoài

Nhìn từ một góc độ khác, phạm vi là một cơ chế đóng gói cho các khối mã, chức năng và mô-đun

5. Phạm vi có thể được lồng nhau

Một thuộc tính thú vị của phạm vi là chúng có thể được lồng vào nhau

Trong ví dụ sau, hàm

javascript
{
  // block scope
  const message = 'Hello';
  console.log(message); // 'Hello'
}
console.log(message); // throws ReferenceError

4 tạo một phạm vi và bên trong khối mã điều kiện

javascript
if (true) {
  const message = 'Hello';
}
console.log(message); // ReferenceError: message is not defined

8 tạo một phạm vi khác

javascript
if (true) {
  const message = 'Hello';
}
console.log(message); // ReferenceError: message is not defined

1

Phạm vi khối mã

javascript
if (true) {
  const message = 'Hello';
}
console.log(message); // ReferenceError: message is not defined

8 được lồng bên trong phạm vi chức năng

javascript
{
  // block scope
  const message = 'Hello';
  console.log(message); // 'Hello'
}
console.log(message); // throws ReferenceError

4. Phạm vi của bất kỳ loại nào (khối mã, chức năng, mô-đun) có thể được lồng vào nhau

Phạm vi chứa trong một phạm vi khác được đặt tên là phạm vi bên trong. Trong ví dụ, phạm vi khối mã

javascript
if (true) {
  const message = 'Hello';
}
console.log(message); // ReferenceError: message is not defined

8 là phạm vi bên trong của phạm vi chức năng

javascript
{
  // block scope
  const message = 'Hello';
  console.log(message); // 'Hello'
}
console.log(message); // throws ReferenceError

4

Phạm vi bao bọc một phạm vi khác được đặt tên là phạm vi bên ngoài. Trong ví dụ, phạm vi hàm

javascript
{
  // block scope
  const message = 'Hello';
  console.log(message); // 'Hello'
}
console.log(message); // throws ReferenceError

4 là phạm vi bên ngoài của phạm vi khối mã

javascript
if (true) {
  const message = 'Hello';
}
console.log(message); // ReferenceError: message is not defined

8

Còn khả năng truy cập của biến thì sao?

Phạm vi bên trong có thể truy cập các biến của phạm vi bên ngoài của nó

Biến

javascript
if (true) {
  const message = 'Hello';
}
console.log(message); // ReferenceError: message is not defined

6, là một phần của phạm vi chức năng

javascript
{
  // block scope
  const message = 'Hello';
  console.log(message); // 'Hello'
}
console.log(message); // throws ReferenceError

4 (phạm vi bên ngoài), có thể truy cập được bên trong phạm vi khối mã

javascript
if (true) {
  const message = 'Hello';
}
console.log(message); // ReferenceError: message is not defined

8 (phạm vi bên trong)

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

Phạm vi toàn cầu là phạm vi ngoài cùng. Nó có thể truy cập từ bất kỳ phạm vi bên trong (còn gọi là cục bộ)

Trong môi trường trình duyệt, phạm vi trên cùng của tệp JavaScript được tải bằng thẻ

javascript
function run() {
  // "run" function scope
  var message = 'Run, Forrest, Run!';
  console.log(message); // 'Run, Forrest, Run!'
}
run();
console.log(message); // throws ReferenceError

8 là phạm vi toàn cầu

javascript
if (true) {
  const message = 'Hello';
}
console.log(message); // ReferenceError: message is not defined

2

javascript
if (true) {
  const message = 'Hello';
}
console.log(message); // ReferenceError: message is not defined

3

Một biến được khai báo bên trong phạm vi toàn cục được đặt tên là biến toàn cục. Các biến toàn cầu có thể truy cập từ bất kỳ phạm vi nào

Trong đoạn mã trước,

javascript
function run() {
  // "run" function scope
  var message = 'Run, Forrest, Run!';
  console.log(message); // 'Run, Forrest, Run!'
}
run();
console.log(message); // throws ReferenceError

9 là một biến toàn cục. Biến này có thể được truy cập từ bất kỳ vị trí nào trong JavaScript của trang web

Phạm vi toàn cầu là một cơ chế cho phép máy chủ JavaScript (trình duyệt, Nút) cung cấp các ứng dụng có chức năng dành riêng cho máy chủ dưới dạng biến toàn cục

Ví dụ,

javascript
function run() {
  // "run" function scope
  const two = 2;
  let count = 0;
  function run2() {}
  console.log(two);   // 2
  console.log(count); // 0
  console.log(run2);  // function
}
run();
console.log(two);   // throws ReferenceError
console.log(count); // throws ReferenceError
console.log(run2);  // throws ReferenceError

0 và

javascript
function run() {
  // "run" function scope
  const two = 2;
  let count = 0;
  function run2() {}
  console.log(two);   // 2
  console.log(count); // 0
  console.log(run2);  // function
}
run();
console.log(two);   // throws ReferenceError
console.log(count); // throws ReferenceError
console.log(run2);  // throws ReferenceError

1 là các biến toàn cục do trình duyệt cung cấp. Trong môi trường Nút, bạn có thể truy cập đối tượng

javascript
function run() {
  // "run" function scope
  const two = 2;
  let count = 0;
  function run2() {}
  console.log(two);   // 2
  console.log(count); // 0
  console.log(run2);  // function
}
run();
console.log(two);   // throws ReferenceError
console.log(count); // throws ReferenceError
console.log(run2);  // throws ReferenceError

2 dưới dạng biến toàn cục

7. Phạm vi từ vựng

Hãy xác định 2 hàm, có hàm

javascript
function run() {
  // "run" function scope
  const two = 2;
  let count = 0;
  function run2() {}
  console.log(two);   // 2
  console.log(count); // 0
  console.log(run2);  // function
}
run();
console.log(two);   // throws ReferenceError
console.log(count); // throws ReferenceError
console.log(run2);  // throws ReferenceError

3 được lồng bên trong

javascript
function run() {
  // "run" function scope
  const two = 2;
  let count = 0;
  function run2() {}
  console.log(two);   // 2
  console.log(count); // 0
  console.log(run2);  // function
}
run();
console.log(two);   // throws ReferenceError
console.log(count); // throws ReferenceError
console.log(run2);  // throws ReferenceError

4

javascript
if (true) {
  const message = 'Hello';
}
console.log(message); // ReferenceError: message is not defined

4

Nhìn vào dòng cuối cùng của đoạn trích

javascript
function run() {
  // "run" function scope
  const two = 2;
  let count = 0;
  function run2() {}
  console.log(two);   // 2
  console.log(count); // 0
  console.log(run2);  // function
}
run();
console.log(two);   // throws ReferenceError
console.log(count); // throws ReferenceError
console.log(run2);  // throws ReferenceError

5. lời gọi

javascript
function run() {
  // "run" function scope
  const two = 2;
  let count = 0;
  function run2() {}
  console.log(two);   // 2
  console.log(count); // 0
  console.log(run2);  // function
}
run();
console.log(two);   // throws ReferenceError
console.log(count); // throws ReferenceError
console.log(run2);  // throws ReferenceError

3 xảy ra bên ngoài phạm vi của

javascript
function run() {
  // "run" function scope
  const two = 2;
  let count = 0;
  function run2() {}
  console.log(two);   // 2
  console.log(count); // 0
  console.log(run2);  // function
}
run();
console.log(two);   // throws ReferenceError
console.log(count); // throws ReferenceError
console.log(run2);  // throws ReferenceError

4. Tuy nhiên, làm thế nào để JavaScript hiểu rằng

javascript
function run() {
  // "run" function scope
  const two = 2;
  let count = 0;
  function run2() {}
  console.log(two);   // 2
  console.log(count); // 0
  console.log(run2);  // function
}
run();
console.log(two);   // throws ReferenceError
console.log(count); // throws ReferenceError
console.log(run2);  // throws ReferenceError

8 bên trong

javascript
function run() {
  // "run" function scope
  const two = 2;
  let count = 0;
  function run2() {}
  console.log(two);   // 2
  console.log(count); // 0
  console.log(run2);  // function
}
run();
console.log(two);   // throws ReferenceError
console.log(count); // throws ReferenceError
console.log(run2);  // throws ReferenceError

3 tương ứng với biến

javascript
function run() {
  // "run" function scope
  const two = 2;
  let count = 0;
  function run2() {}
  console.log(two);   // 2
  console.log(count); // 0
  console.log(run2);  // function
}
run();
console.log(two);   // throws ReferenceError
console.log(count); // throws ReferenceError
console.log(run2);  // throws ReferenceError

8 của

javascript
function run() {
  // "run" function scope
  const two = 2;
  let count = 0;
  function run2() {}
  console.log(two);   // 2
  console.log(count); // 0
  console.log(run2);  // function
}
run();
console.log(two);   // throws ReferenceError
console.log(count); // throws ReferenceError
console.log(run2);  // throws ReferenceError

4?

Câu trả lời là do phạm vi từ vựng

JavaScript thực hiện một cơ chế phạm vi có tên là phạm vi từ vựng (hoặc phạm vi tĩnh). Phạm vi từ vựng có nghĩa là khả năng truy cập của các biến được xác định tĩnh bởi vị trí của các biến trong phạm vi hàm lồng nhau. phạm vi chức năng bên trong có thể truy cập các biến từ phạm vi chức năng bên ngoài

Một định nghĩa chính thức của phạm vi từ vựng

Phạm vi từ vựng bao gồm các phạm vi bên ngoài được xác định tĩnh

Trong ví dụ, phạm vi từ vựng của

javascript
function run() {
  // "run" function scope
  const two = 2;
  let count = 0;
  function run2() {}
  console.log(two);   // 2
  console.log(count); // 0
  console.log(run2);  // function
}
run();
console.log(two);   // throws ReferenceError
console.log(count); // throws ReferenceError
console.log(run2);  // throws ReferenceError

3 bao gồm phạm vi của

javascript
function run() {
  // "run" function scope
  const two = 2;
  let count = 0;
  function run2() {}
  console.log(two);   // 2
  console.log(count); // 0
  console.log(run2);  // function
}
run();
console.log(two);   // throws ReferenceError
console.log(count); // throws ReferenceError
console.log(run2);  // throws ReferenceError

4

Hơn nữa,

javascript
function run() {
  // "run" function scope
  const two = 2;
  let count = 0;
  function run2() {}
  console.log(two);   // 2
  console.log(count); // 0
  console.log(run2);  // function
}
run();
console.log(two);   // throws ReferenceError
console.log(count); // throws ReferenceError
console.log(run2);  // throws ReferenceError

3 là một bao đóng vì nó nắm bắt biến

javascript
function run() {
  // "run" function scope
  const two = 2;
  let count = 0;
  function run2() {}
  console.log(two);   // 2
  console.log(count); // 0
  console.log(run2);  // function
}
run();
console.log(two);   // throws ReferenceError
console.log(count); // throws ReferenceError
console.log(run2);  // throws ReferenceError

8 từ phạm vi từ vựng

Nếu bạn muốn nắm vững khái niệm đóng cửa, tôi thực sự khuyên bạn nên đọc bài đăng của tôi

8. Biến cách ly

Một thuộc tính trực tiếp của phạm vi phát sinh. phạm vi cô lập các biến. Và điều tốt là các phạm vi khác nhau có thể có các biến có cùng tên

Bạn có thể sử dụng lại các tên biến phổ biến (

javascript
while (/* condition */) {
  // "while" block scope
  const message = 'Hi';
  console.log(message); // 'Hi'
}
console.log(message); // => throws ReferenceError

4,

javascript
// "circle" module scope
const pi = 3.14159;
console.log(pi); // 3.14159
// Usage of pi

7,

javascript
// "circle" module scope
const pi = 3.14159;
console.log(pi); // 3.14159
// Usage of pi

8,

javascript
// "circle" module scope
const pi = 3.14159;
console.log(pi); // 3.14159
// Usage of pi

9, v.v.) trong các phạm vi khác nhau mà không có xung đột

Phạm vi hàm

javascript
if (true) {
  const message = 'Hello';
}
console.log(message); // ReferenceError: message is not defined

00 và

javascript
if (true) {
  const message = 'Hello';
}
console.log(message); // ReferenceError: message is not defined

01 có các biến riêng, nhưng cùng tên, biến

javascript
while (/* condition */) {
  // "while" block scope
  const message = 'Hi';
  console.log(message); // 'Hi'
}
console.log(message); // => throws ReferenceError

4

javascript
if (true) {
  const message = 'Hello';
}
console.log(message); // ReferenceError: message is not defined

5

9. Phần kết luận

Phạm vi là một chính sách quản lý tính khả dụng của các biến. Một biến được xác định bên trong một phạm vi chỉ có thể truy cập được trong phạm vi đó, nhưng không thể truy cập được bên ngoài

Trong JavaScript, phạm vi được tạo bởi các khối mã, hàm, mô-đun

Trong khi các biến

javascript
if (true) {
  // "if" block scope
  const message = 'Hello';
  console.log(message); // 'Hello'
}
console.log(message); // throws ReferenceError

4 và

javascript
if (true) {
  // "if" block scope
  const message = 'Hello';
  console.log(message); // 'Hello'
}
console.log(message); // throws ReferenceError

3 được xác định phạm vi bởi các khối mã, chức năng hoặc mô-đun, các biến

javascript
while (/* condition */) {
  // "while" block scope
  const message = 'Hi';
  console.log(message); // 'Hi'
}
console.log(message); // => throws ReferenceError

3 chỉ được xác định phạm vi bởi các hàm hoặc mô-đun

Phạm vi có thể được lồng nhau. Bên trong phạm vi bên trong, bạn có thể truy cập các biến của phạm vi bên ngoài

Phạm vi từ vựng bao gồm các phạm vi chức năng bên ngoài được xác định tĩnh. Bất kỳ hàm nào, bất kể được thực thi ở đâu, đều có thể truy cập các biến thuộc phạm vi từ vựng của nó (đây là khái niệm đóng)

Hy vọng, bài viết của tôi đã giúp bạn hiểu rõ hơn về phạm vi

Thích bài viết?

đề xuất cải tiến

Bài đăng chất lượng vào hộp thư đến của bạn

Tôi thường xuyên xuất bản bài viết có chứa

• Các khái niệm JavaScript quan trọng được giải thích bằng các từ đơn giản
• Tổng quan về các tính năng JavaScript mới
• Cách sử dụng TypeScript và cách gõ
• Thiết kế phần mềm và thực hành mã hóa tốt

Đăng ký nhận bản tin của tôi để nhận chúng ngay trong hộp thư đến của bạn

Đặt mua

Tham gia cùng 6915 người đăng ký khác

Giới thiệu về Dmitri Pavlutin

Nhà văn và huấn luyện viên công nghệ. Thói quen hàng ngày của tôi bao gồm (nhưng không giới hạn) uống cà phê, viết mã, viết, huấn luyện, vượt qua sự nhàm chán 😉

Hiện đang làm việc với tư cách là nhà phát triển nguồn mở toàn thời gian trong dự án Readapt - nhằm mục đích làm cho mọi người đều có thể truy cập web

Có bao nhiêu loại phạm vi trong JavaScript?

Phạm vi và các loại phạm vi trong JavaScript là gì?

Có bao nhiêu loại phạm vi?

Bốn phạm vi của các loại là gì?