JavaScript - Đối tượng Toàn cục

Giới thiệu về Đối tượng Toàn cục trong JavaScript

Xin chào các pháp sư JavaScript tương lai! Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị vào thế giới của các Đối tượng Toàn cục trong JavaScript. Hãy tưởng tượng những đối tượng này như những người VIP trong vũ trụ JavaScript - họ luôn ở đó, sẵn sàng giúp đỡ, không matter bạn đang ở đâu trong mã của mình. Hãy cùng lặn sâu và解锁 sức mạnh của những thực thể vô khắp nơi!

Đối tượng Toàn cục là gì?

Các đối tượng toàn cục trong JavaScript giống như những cây kéo đa năng của lập trình - chúng là những công cụ linh hoạt luôn sẵn có. Những đối tượng này được tự động tạo ra khi bạn bắt đầu chạy JavaScript và chúng có thể truy cập từ bất kỳ đâu trong mã của bạn. Hãy nghĩ về chúng như những trợ lý hữu ích luôn bên cạnh bạn, sẵn sàng giúp đỡ với nhiều nhiệm vụ khác nhau.

Đối tượng Window: Vua của các Đối tượng Toàn cục

Trong các trình duyệt web, vua của tất cả các đối tượng toàn cục là đối tượng window. Nó giống như sếp của trang web của bạn, giám sát mọi thứ xảy ra. Hãy xem một ví dụ đơn giản:

console.log(window.innerWidth);
console.log(window.innerHeight);

Khi bạn chạy đoạn mã này trong một trình duyệt, nó sẽ hiển thị chiều rộng và chiều cao của cửa sổ trình duyệt của bạn. Đ酷, phải không? Nó giống như có một thước đo tích hợp cho trang web của bạn!

Ví dụ về các Đối tượng Toàn cục và Phương thức của chúng

Bây giờ, hãy cùng khám phá một số đối tượng toàn cục phổ biến và phương thức của chúng. Tôi sẽ chỉ cho bạn cách những đối tượng này có thể làm cho cuộc sống của bạn dễ dàng hơn như thế nào.

1. Đối tượng Math: Người bạn Toán học

Đối tượng Math giống như một máy tính siêu thông minh luôn ở trong tay bạn. Dưới đây là một số ví dụ:

console.log(Math.PI); // Outputs: 3.141592653589793
console.log(Math.round(4.7)); // Outputs: 5
console.log(Math.random()); // Outputs: một số ngẫu nhiên giữa 0 và 1

Trong ví dụ này, chúng ta sử dụng đối tượng Math để truy cập giá trị của PI, làm tròn một số, và tạo một số ngẫu nhiên. Nó giống như có một trợ lý toán học cá nhân!

2. Đối tượng Date: Người bạn Du hành Thời gian

Đối tượng Date giúp bạn làm việc với ngày và giờ. Nó giống như một máy du hành thời gian trong mã của bạn!

let today = new Date();
console.log(today.getFullYear()); // Outputs: năm hiện tại (ví dụ: 2023)
console.log(today.getMonth()); // Outputs: tháng hiện tại (0-11)
console.log(today.getDate()); // Outputs: ngày hiện tại trong tháng

Đoạn mã này tạo một đối tượng Date mới đại diện cho ngày và giờ hiện tại, sau đó trích xuất các phần cụ thể của nó. Nó giống như hỏi bạn đồng hành du hành thời gian của bạn, "Năm nay là năm nào?"

3. Đối tượng String: Trợ lý Chỉnh sửa Văn bản

Đối tượng String là người bạn đồng hành hữu ích cho việc làm việc với văn bản. Hãy xem xét các phương thức hữu ích sau:

let message = "Hello, World!";
console.log(message.length); // Outputs: 13
console.log(message.toUpperCase()); // Outputs: HELLO, WORLD!
console.log(message.split(", ")); // Outputs: ["Hello", "World!"]

Tại đây, chúng ta sử dụng các phương thức của đối tượng String để đếm ký tự, viết thông điệp của mình in hoa, và chia nhỏ nó thành các phần. Nó giống như có một người bạn thành thạo văn bản giúp bạn manipulate từ ngữ theo nhiều cách khác nhau!

Sử dụng Đối tượng Toàn cục JavaScript cho Polyfills

Bây giờ, hãy nói về một khái niệm nâng cao hơn: polyfills. Đừng lo lắng nếu nó听起来 đáng sợ - tôi sẽ giải thích cho bạn!

Một polyfill giống như một cây cầu giữa JavaScript cũ và mới. Nó cho phép bạn sử dụng các tính năng mới của JavaScript trong các trình duyệt cũ hơn mà chưa hỗ trợ chúng. Đối tượng toàn cục đóng vai trò quan trọng trong việc tạo polyfills.

Dưới đây là một ví dụ về polyfill cho phương thức Array.prototype.includes:

if (!Array.prototype.includes) {
Array.prototype.includes = function(searchElement, fromIndex) {
if (this == null) {
throw new TypeError('"this" is null or not defined');
}

var o = Object(this);
var len = o.length >>> 0;

if (len === 0) {
return false;
}

var n = fromIndex | 0;
var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);

while (k < len) {
if (o[k] === searchElement) {
return true;
}
k++;
}
return false;
};
}

Đoạn mã này kiểm tra xem phương thức includes có tồn tại trên Array.prototype hay không. Nếu không, nó thêm phương thức này, cho phép bạn sử dụng includes ngay cả trong các trình duyệt không hỗ trợ nó-native.

Nó giống như dạy một con chó cũ những trick mới - chúng ta đang cho các trình duyệt cũ khả năng hiểu và sử dụng các tính năng JavaScript mới!

Kết luận

Và đó là tất cả, các học sinh yêu quý của tôi! Chúng ta đã cùng nhau tham quan nhanh chóng các Đối tượng Toàn cục trong JavaScript, từ cơ bản đến một số khái niệm nâng cao. Nhớ rằng, các đối tượng toàn cục này là những người bạn đáng tin cậy trong thế giới JavaScript, luôn sẵn sàng giúp đỡ bạn.

Trong khi tiếp tục hành trình lập trình của bạn, bạn sẽ thấy mình sử dụng các đối tượng toàn cục này ngày càng nhiều. Chúng giống như những công cụ trong hộp công cụ của một người thợ mộc thạo - càng sử dụng nhiều, bạn sẽ càng đánh giá cao sức mạnh và tính linh hoạt của chúng.

Tiếp tục thực hành, tiếp tục khám phá, và quan trọng nhất, hãy tiếp tục vui vẻ với JavaScript! Ai biết được, có lẽ một ngày nào đó bạn sẽ tạo ra một đối tượng toàn cục tuyệt vời của riêng mình mà các nhà lập trình tương lai sẽ học về nó. Chúc các bạn lập trình vui vẻ!

Đối tượng Toàn cục	Phương thức Thường gặp	Mô tả
Math	PI, round(), random()	Phép toán và hằng số toán học
Date	getFullYear(), getMonth(), getDate()	Đ điều chỉnh ngày và giờ
String	length, toUpperCase(), split()	Điều chỉnh văn bản
Array	length, push(), pop()	Đ điều chỉnh mảng
Object	keys(), values(), entries()	Điều chỉnh đối tượng
JSON	parse(), stringify()	Xử lý dữ liệu JSON
Number	toFixed(), parseInt(), parseFloat()	Đ điều chỉnh số
Boolean	valueOf()	Phép toán boolean
RegExp	test(), exec()	Đ điều chỉnh biểu thức chính quy
Error	name, message	Xử lý lỗi

Credits: Image by storyset