🔥CHỌN LỌC TOP NHỮNG KHOÁ HỌC LẬP TRÌNH ONLINE NHIỀU NGƯỜI THEO HOC TẠI ĐÂY🔥

Cafedev chia sẻ cho ace về Object toàn cục. Đối tượng toàn cục cung cấp các biến và hàm có sẵn ở mọi nơi. Theo mặc định, những thứ được tích hợp sẵn vào ngôn ngữ hoặc môi trường.

Trong một trình duyệt, nó được đặt tên window, đối với Node.js thì có global, đối với các môi trường khác, nó có thể có tên khác.

Gần đây, globalThis đã được thêm vào ngôn ngữ, như một tên tiêu chuẩn cho một đối tượng toàn cục, sẽ được hỗ trợ trên tất cả các môi trường. Trong một số trình duyệt, cụ thể là không phải Chromium Edge, globalThis chưa được hỗ trợ.

Chúng tôi sẽ sử dụng window ở đây, giả sử rằng môi trường của chúng tôi là một trình duyệt. Nếu tập lệnh của bạn có thể chạy trong các môi trường khác, tốt hơn nên thay thế globalThis.

Tất cả các thuộc tính của đối tượng toàn cục có thể được truy cập trực tiếp:

alert("Hello Cafedev");
// is the same as
window.alert("Hello Cafedev");

Trong trình duyệt, các hàm và biến toàn cục được khai báo bằng var(not let/const!) Trở thành thuộc tính của đối tượng toàn cục:

var gVar = 6;

alert(window.gVar); // 6 (became a property of the global object)

Hành vi này tồn tại vì lý do tương thích. Các tập lệnh hiện đại sử dụng các mô-đun JavaScript trong trường hợp điều đó không xảy ra.

Nếu chúng tôi sử dụng let thay thế, điều đó sẽ không xảy ra:

let gVar = 6;

alert(window.gVar); // 6 (became a property of the global object)

Nếu một giá trị quan trọng đến mức bạn muốn cung cấp nó trên toàn cầu, hãy viết trực tiếp nó dưới dạng thuộc tính:

/*
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: cafedevn@gmail.com
Fanpage: https://www.facebook.com/cafedevn
Group: https://www.facebook.com/groups/cafedev.vn/
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
Pinterest: https://www.pinterest.com/cafedevvn/
YouTube: https://www.youtube.com/channel/UCE7zpY_SlHGEgo67pHxqIoA/
*/

// make current user information global, to let all scripts access it
window.currentUser = {
  name: "David"
};

// somewhere else in code
alert(currentUser.name);  // David

// or, if we have a local variable with the name "currentUser"
// get it from window explicitly (safe!)
alert(window.currentUser.name); // David

Điều đó nói rằng, việc sử dụng các biến toàn cục thường không được khuyến khích. Nên có càng ít biến toàn cục càng tốt. Thiết kế code trong đó một hàm nhận được các biến “đầu vào” và tạo ra “kết quả” nhất định rõ ràng hơn, ít bị lỗi hơn và dễ kiểm tra hơn so với việc sử dụng các biến bên ngoài hoặc toàn cục.

1. Sử dụng cho polyfills

Chúng tôi sử dụng đối tượng toàn cầu để kiểm tra sự hỗ trợ của các tính năng ngôn ngữ hiện đại.

Ví dụ: kiểm tra xem một đối tượng tích hợp Promise có tồn tại hay không (nó không có trong các trình duyệt thực sự cũ):

if (!window.Promise) {
  alert("Your browser is really old!");
}

Nếu không có (giả sử chúng ta đang ở trong một trình duyệt cũ), chúng ta có thể tạo “polyfills”: thêm các chức năng không được môi trường hỗ trợ, nhưng tồn tại trong tiêu chuẩn hiện đại.

if (!window.Promise) {
  window.Promise = ... // custom implementation of the modern language feature
}

2. Tóm lược

  • Đối tượng toàn cục chứa các biến có sẵn ở mọi nơi.

    Điều đó bao gồm nhiều biến được tích hợp sẵn trong JavaScript, chẳng hạn như Array và các giá trị dành riêng cho môi trường, chẳng hạn như window.innerHeight- chiều cao cửa sổ trong trình duyệt.

  • Đối tượng toàn cục có một tên phổ quát globalThis.

    … Nhưng thường được gọi bằng các tên dành riêng cho môi trường “kiểu cũ”, chẳng hạn như window(trình duyệt) và global(Node.js). Như globalThis đề xuất gần đây, nó không được hỗ trợ trong không phải Chromium Edge (nhưng có thể được c).

  • Chúng ta chỉ nên lưu trữ các giá trị trong đối tượng toàn cục nếu chúng thực sự toàn cầu cho dự án của chúng ta. Và giữ số lượng của chúng ở mức tối thiểu.

  • Trong trình duyệt, trừ khi chúng ta đang sử dụng các mô-đun , các hàm toàn cục và các biến được khai báo var trở thành thuộc tính của đối tượng toàn cục.

  • Để làm cho mã của chúng ta dễ hiểu và dễ hiểu hơn trong tương lai, chúng ta nên truy cập trực tiếp vào các thuộc tính của đối tượng toàn cục, như window.x. đọc và hiểu nó dùng làm gì..

Nguồn và tài liệu tiếng anh tham khảo:

Full series tự học Javascript từ cơ bản tới nâng cao tại đây nha.

Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của cafedev để nhận được nhiều hơn nữa:

Chào thân ái và quyết thắng!

Đăng ký kênh youtube để ủng hộ Cafedev nha các bạn, Thanks you!

BÀI VIẾT LIÊN QUANXEM THÊM