Phạm vi toàn cầu trong javascript là gì?

Phạm vi xác định thời gian tồn tại và khả năng hiển thị của một biến. Các biến không hiển thị bên ngoài phạm vi mà chúng được khai báo

JavaScript có phạm vi mô-đun, phạm vi chức năng, phạm vi khối, phạm vi từ vựng và phạm vi toàn cầu

Phạm vi toàn cầu

Các biến được xác định bên ngoài bất kỳ chức năng, khối hoặc phạm vi mô-đun nào có 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ừ mọi nơi trong ứng dụng

Khi một hệ thống mô-đun được kích hoạt, việc tạo các biến toàn cục sẽ khó hơn, nhưng người ta vẫn có thể làm được. Bằng cách xác định một biến trong HTML, bên ngoài bất kỳ chức năng nào, một biến toàn cục có thể được tạo

  let GLOBAL_DATA = { value : 1};


console.log[GLOBAL_DATA];

Khi không có hệ thống mô-đun, việc tạo các biến toàn cục sẽ dễ dàng hơn rất nhiều. Một biến được khai báo bên ngoài bất kỳ hàm nào, trong bất kỳ tệp nào, là biến toàn cục

Các biến toàn cầu có sẵn trong suốt vòng đời của ứng dụng

Một cách khác để tạo biến toàn cục là sử dụng đối tượng toàn cục

window.GLOBAL_DATA = { value: 1 };

8 ở bất kỳ đâu trong ứng dụng

window.GLOBAL_DATA = { value: 1 };

Tại thời điểm này, biến

window.GLOBAL_DATA = { value: 1 };

9 có thể nhìn thấy ở mọi nơi

console.log[GLOBAL_DATA]

Như bạn có thể tưởng tượng những thực hành này là thực hành xấu

phạm vi mô-đun

Trước các mô-đun, một biến được khai báo bên ngoài bất kỳ chức năng nào là biến toàn cục. Trong các mô-đun, một biến được khai báo bên ngoài bất kỳ chức năng nào sẽ bị ẩn và không khả dụng đối với các mô-đun khác trừ khi nó được xuất rõ ràng

Xuất cung cấp một chức năng hoặc đối tượng cho các mô-đun khác. Trong ví dụ tiếp theo, tôi xuất một hàm từ tệp mô-đun

console.log[GLOBAL_DATA]

0

// in sequence.js
export { sequence, toList, take };

Nhập làm cho một chức năng hoặc đối tượng, từ các mô-đun khác, có sẵn cho mô-đun hiện tại

import { sequence, toList, toList } from "./sequence";

Theo một cách nào đó, chúng ta có thể hình dung một mô-đun như một chức năng tự thực thi lấy dữ liệu nhập làm đầu vào và trả về dữ liệu xuất

Phạm vi chức năng

Phạm vi hàm có nghĩa là các tham số và biến được xác định trong một hàm hiển thị ở mọi nơi trong hàm nhưng không hiển thị bên ngoài hàm

Hãy xem xét chức năng tiếp theo tự động thực thi, được gọi là IIFE

________số 8

IIFE là viết tắt của Biểu thức hàm được gọi ngay lập tức và là hàm chạy ngay sau định nghĩa của nó

Các biến được khai báo với

console.log[GLOBAL_DATA]

1 chỉ có phạm vi chức năng. Hơn nữa, các biến được khai báo bằng

console.log[GLOBAL_DATA]

1 được đưa lên đầu phạm vi của chúng. Bằng cách này, chúng có thể được truy cập trước khi được khai báo. Hãy nhìn vào đoạn mã dưới đây

window.GLOBAL_DATA = { value: 1 };

1

Điều này không xảy ra đối với

console.log[GLOBAL_DATA]

3. Một biến được khai báo bằng

console.log[GLOBAL_DATA]

3 chỉ có thể được truy cập sau khi định nghĩa nó

window.GLOBAL_DATA = { value: 1 };

4

Một biến được khai báo bằng

console.log[GLOBAL_DATA]

1 có thể được khai báo lại nhiều lần trong cùng một phạm vi. Mã sau đây là tốt

window.GLOBAL_DATA = { value: 1 };

6

Các biến được khai báo bằng

console.log[GLOBAL_DATA]

3 hoặc

console.log[GLOBAL_DATA]

7 không thể được khai báo lại trong cùng một phạm vi

window.GLOBAL_DATA = { value: 1 };

9

Có lẽ chúng ta thậm chí không cần quan tâm đến điều này, vì

console.log[GLOBAL_DATA]

1 đã bắt đầu trở nên lỗi thời

Phạm vi khối

Phạm vi khối được xác định bằng dấu ngoặc nhọn. Nó được ngăn cách bởi

console.log[GLOBAL_DATA]

9 và

// in sequence.js
export { sequence, toList, take };

0

Các biến được khai báo bằng

console.log[GLOBAL_DATA]

3 và

console.log[GLOBAL_DATA]

7 có thể có phạm vi khối. Chúng chỉ có thể được truy cập trong khối mà chúng được xác định

Xem xét mã tiếp theo nhấn mạnh phạm vi khối

console.log[GLOBAL_DATA]

3

window.GLOBAL_DATA = { value: 1 };

0

Ngược lại, khai báo

console.log[GLOBAL_DATA]

1 không có phạm vi khối

window.GLOBAL_DATA = { value: 1 };

1

Một vấn đề phổ biến khác khi không có phạm vi khối là việc sử dụng hoạt động không đồng bộ như

// in sequence.js
export { sequence, toList, take };

5 trong một vòng lặp. Mã vòng lặp chảy hiển thị số 5, năm lần

window.GLOBAL_DATA = { value: 1 };

2

Câu lệnh vòng lặp

// in sequence.js
export { sequence, toList, take };

6, với khai báo

console.log[GLOBAL_DATA]

3, tạo một ngôn ngữ biến mới cho phạm vi khối, cho mỗi lần lặp. Mã vòng lặp tiếp theo hiển thị

// in sequence.js
export { sequence, toList, take };

8

window.GLOBAL_DATA = { value: 1 };

3

Phạm vi từ vựng

Phạm vi từ vựng là khả năng của hàm bên trong truy cập vào phạm vi bên ngoài mà nó được định nghĩa

Xem xét mã tiếp theo

window.GLOBAL_DATA = { value: 1 };

4

Hàm

// in sequence.js
export { sequence, toList, take };

9 là một hàm đóng. Nó đề cập đến biến

import { sequence, toList, toList } from "./sequence";

0 từ hàm mẹ của nó

import { sequence, toList, toList } from "./sequence";

1, không phải biến từ hàm

import { sequence, toList, toList } from "./sequence";

2

Hàm đóng có quyền truy cập vào phạm vi mà nó được tạo, không phải phạm vi mà nó được thực thi

Phạm vi chức năng cục bộ của

import { sequence, toList, toList } from "./sequence";

1 là phạm vi từ vựng của chức năng

import { sequence, toList, toList } from "./sequence";

4

Chuỗi phạm vi

Mỗi phạm vi có một liên kết đến phạm vi cha. Khi một biến được sử dụng, JavaScript sẽ xem xét chuỗi phạm vi cho đến khi nó tìm thấy biến được yêu cầu hoặc cho đến khi nó đạt đến phạm vi toàn cầu, đó là phần cuối của chuỗi phạm vi

Nhìn vào ví dụ tiếp theo

window.GLOBAL_DATA = { value: 1 };

5

Hàm bên trong

import { sequence, toList, toList } from "./sequence";

5 có quyền truy cập vào biến

import { sequence, toList, toList } from "./sequence";

6 cục bộ. Nó cũng có quyền truy cập vào các biến

import { sequence, toList, toList } from "./sequence";

7 và

import { sequence, toList, toList } from "./sequence";

8 từ các hàm bên ngoài và biến toàn cục

import { sequence, toList, toList } from "./sequence";

9

Nếu không tìm thấy biến, nó sẽ trả về lỗi ở chế độ nghiêm ngặt

window.GLOBAL_DATA = { value: 1 };

6

Ở chế độ không nghiêm ngặt, được gọi là “chế độ cẩu thả”, nó sẽ làm điều xấu và tạo ra một biến toàn cục

window.GLOBAL_DATA = { value: 1 };

7

Phần kết luận

Các biến được xác định trong phạm vi toàn cầu có sẵn ở mọi nơi trong ứng dụng

Trong một mô-đun, một biến được khai báo bên ngoài bất kỳ chức năng nào sẽ bị ẩn và không khả dụng đối với các mô-đun khác trừ khi nó được xuất rõ ràng

Phạm vi hàm có nghĩa là các tham số và biến được xác định trong hàm hiển thị ở mọi nơi trong hàm

Các biến được khai báo với

console.log[GLOBAL_DATA]

3 và

console.log[GLOBAL_DATA]

7 có phạm vi khối.

console.log[GLOBAL_DATA]

1 không có phạm vi khối

Khám phá JavaScript chức năng được đặt tên là một trong những cuốn sách Lập trình chức năng mới hay nhất bởi BookAuthority

Để biết thêm về cách áp dụng các kỹ thuật lập trình hàm trong React, hãy xem Functional React

Tìm hiểu về React chức năng, theo cách dựa trên dự án, với Kiến trúc chức năng với React và Redux

Theo dõi trên Twitter

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

Cristian Salcescu

Tác giả của Khám phá JavaScript chức năng và Phản ứng chức năng. Nhiệt tình chia sẻ ý tưởng

Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu

Phạm vi toàn cầu và phạm vi cục bộ trong JavaScript là gì?

Ví dụ phạm vi toàn cầu là gì?

Phạm vi của biến toàn cầu trong kịch bản là gì?

Sự khác biệt giữa phạm vi khối và phạm vi toàn cầu trong JavaScript là gì?