JavaScript - 全域物件

JavaScript 全域物件的介紹

你好，未來的 JavaScript 巫師們！今天，我們將踏上一段令人興奮的旅程，探索 JavaScript 全域物件的世界。想像這些物件是 JavaScript 宇宙中的 VIP——無論你在程式碼中的哪裡，他們總是隨時準備提供幫助。讓我們一起潛入水中，解鎖這些無所不在實體的力量！

JavaScript - Global Object

什麼是全域物件？

JavaScript 中的全域物件就像是編程中的瑞士軍刀——他們是多功能的工具，隨時為您所用。這些物件在您開始執行 JavaScript 時自動創建，並且在您的程式碼中的任何地方都可以訪問。把他們當作總是陪伴在您身邊，隨時準備協助各種任務的有用的助手。

Window 物件：全域物件之王

在網頁瀏覽器中，所有全域物件中的王者是 window 物件。它就像是您網頁的老闆，監督著發生的每一件事。讓我們看一個簡單的例子：

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

當您在瀏覽器中運行這段代碼時，它將顯示瀏覽器窗口的寬度和高度。酷炫吧？這就像是有了一個為您的網頁內置的測量帶！

全域物件及其方法的例子

現在，讓我們探索一些最常見的全域物件及其方法。我會告訴您這些如何讓您作為程序員的生活變得更加輕鬆。

1. Math 物件：您的數學助手

Math 物件就像是有了一個超級聰明的計算器總是在您手邊。以下是一些例子：

console.log(Math.PI); // 輸出：3.141592653589793
console.log(Math.round(4.7)); // 輸出：5
console.log(Math.random()); // 輸出：0 到 1 之間的隨機數

在這個例子中，我們使用 Math 物件來訪問 PI 的值、將數字四捨五入以及生成隨機數。這就像是有了一個數學天才作為您的個人助手！

2. Date 物件：您的时间旅行伙伴

Date 物件幫助您處理日期和时间。這就像是在您的代碼中擁有一台時間機器！

let today = new Date();
console.log(today.getFullYear()); // 輸出：當前年份（例如，2023）
console.log(today.getMonth()); // 輸出：當前月份（0-11）
console.log(today.getDate()); // 輸出：當前月份中的日期

這段代碼創建了一個新的 Date 物件，表示當前的日期和时间，然後提取其中的特定部分。這就像是在問您的时间旅行伙伴，“嘿，現在是什麼年份？”

3. String 物件：文本操縱者

String 物件是您處理文本的首選助手。查看以下這些方便的方法：

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

在這裡，我們使用 String 物件的方法來計算字符數、將我們的消息大寫以及將其拆分成部分。這就像是有了一個擅長文本操作的朋友，能夠幫助您以各種方式操縱文字！

使用 JavaScript 全域物件進行 Polyfill

現在，讓我們來討論一個更先進的概念：polyfill。別擔心，如果聽起來讓人害怕——我會為您一一解釋！

Polyfill 就像是一個橋樑，連接著舊的 JavaScript 和新的 JavaScript。它讓您能在還不支持它們的舊版瀏覽器中使用 JavaScript 的新特性。全域物件在創建 polyfill 時扮演著關鍵的角色。

以下是一個為 Array.prototype.includes 方法的 polyfill 的例子：

if (!Array.prototype.includes) {
Array.prototype.includes = function(searchElement, fromIndex) {
if (this == null) {
throw new TypeError('"this" 是 null 或未定義');
}

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;
};
}

這段代碼檢查 includes 方法是否不存在於 Array.prototype 上。如果不存在，它會添加這個方法，讓您即使在原生不支持 includes 的瀏覽器中也能使用它。

這就像是在教一個老狗學新把戲——我們正在給舊版瀏覽器提供理解和使用新 JavaScript 特性的能力！

結論

好了，我親愛的學生們！我們已經對 JavaScript 全域物件進行了一次狂風暴雨的旅行，從基礎到一些較為先進的概念。記住，這些全域物件是您在 JavaScript 世界的可靠助手，總是準備幫助您。

隨著您繼續您的編程旅程，您會發現自己越來越多地使用這些全域物件。他們就像是一個熟练木匠工具箱中的工具——您使用得越多，就越會欣賞他們的力量和多功能性。

繼續練習，繼續探索，最重要的是，繼續在 JavaScript 中找到樂趣！誰知道呢？也許有一天您會創造出自己的驚人全域物件，讓未來的程序员學習。快樂編程！



| 全域物件 | 常見方法 | 描述 |
|----------|----------|------|
| Math | PI, round(), random() | 數學運算和常數 |
| Date | getFullYear(), getMonth(), getDate() | 日期和时间操作 |
| String | length, toUpperCase(), split() | 文本操作 |
| Array | length, push(), pop() | 数组操作 |
| Object | keys(), values(), entries() | 对象操作 |
| JSON | parse(), stringify() | JSON 数据处理 |
| Number | toFixed(), parseInt(), parseFloat() | 数字操作 |
| Boolean | valueOf() | 布尔操作 |
| RegExp | test(), exec() | 正则表达式操作 |
| Error | name, message | 错误处理 |

Credits: Image by storyset