NỘI DUNG BÀI VIẾT
Trong bài viết này, chúng ta sẽ tìm hiểu về Đối tượng toàn cục trong JavaScript.
Global Object là gì?
Global Object – Đố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 cái đó được tích hợp vào ngôn ngữ hoặc môi trường.
Trong một trình duyệt, nó được đặt tên là window. Đối với Node.js, nó lại tên là 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 hóa 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. Nó được hỗ trợ trong tất cả các trình duyệt chính.
Mình sẽ sử dụng window ở đây, giả sử rằng môi trường của chúng ta 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 sử dụng globalThis thay thế.
Đối tượng toàn cục trong JavaScript
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");
// is the same as
window.alert("Hello");Code language: JavaScript (javascript)Trong trình duyệt, các hàm và biến toàn cục được khai báo với var để trở thành thuộc tính của đối tượng toàn cục:
var gVar = 5;
alert(window.gVar); // 5 (became a property of the global object)Code language: JavaScript (javascript)
Nếu chúng ta sử dụng let thay vào đó, điều như vậy sẽ không xảy ra:
let gLet = 5;
alert(window.gLet); // undefined (doesn't become a property of the global object)Code language: JavaScript (javascript)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ục, hãy viết trực tiếp nó dưới dạng một thuộc tính:
// make current user information global, to let all scripts access it
window.currentUser = {
name: "John"
};
// somewhere else in code
alert(currentUser.name); // John
// or, if we have a local variable with the name "currentUser"
// get it from window explicitly (safe!)
alert(window.currentUser.name); // JohnCode language: JavaScript (javascript)Đ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ế mã 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 nếu nó sử dụng các biến bên ngoài hoặc toàn cục.
Sử dụng polyfills
Chúng ta sẽ sử dụng đối tượng toàn cục để 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 đối tượng Promise được tích hợp sẵn có tồn tại hay không (đối tượng này không có trong các trình duyệt thực sự cũ):
if (!window.Promise) {
alert("Your browser is really old!");
}Code language: JavaScript (javascript)Nếu không có (giả sử chúng ta đang sử dụng 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
}Code language: JavaScript (javascript)Kết luận
Đối tượng toàn cục chứa các biến nên có sẵn ở mọi nơi. Điều đó bao gồm JavaScript được tích hợp sẵn, chẳng hạn như Mảng 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ó tên chung là 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).
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ự mang tính toàn cục 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 mô-đun, các hàm và biến toàn cục được khai báo bằng var sẽ 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ảm ơn bạn đã theo dõi bài viết!
Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.
Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.
TỔNG HỢP TÀI LIỆU HỌC LẬP TRÌNH CƠ BẢN CHO NGƯỜI MỚI BẮT ĐẦU
KHOÁ HỌC BOOTCAMP JAVA/JAVASCRIPT/PHP TRỞ THÀNH LẬP TRÌNH VIÊN TRONG 5-6 THÁNG
