單體內置對象 · 《JavaScript 闖關記》

# 單體內置對象 ECMA-262 對內置對象的定義是「由 JavaScript 實現提供的、不依賴于宿主環境的對象，這些對象在 JavaScript 程序執行之前就已經存在了」。意思就是說，開發人員不必顯式地實例化內置對象，因為它們已經實例化了。前面我們已經介紹了大多數內置對象，例如?`Object`、`Array`?和?`String`。ECMA-262 還定義了兩個單體內置對象：`Global`?和?`Math`。 ## [](https://github.com/stone0090/javascript-lessons/tree/master/1.12-SingletonBuiltInObjects#global-對象)`Global`?對象 `Global`?對象可以說是 JavaScript 中最特別的一個對象了，因為不管你從什么角度上看，這個對象都是不存在的。`Global`?對象在某種意義上是作為一個終極的「兜底兒對象」來定義的。換句話說，不屬于任何其他對象的屬性和方法，最終都是它的屬性和方法。所有在全局作用域中定義的屬性和函數，都是?`Global`?對象的屬性。本書前面介紹過的那些函數，諸如`isNaN()`、`isFinite()`、`parseInt()`?以及?`parseFloat()`，實際上全都是?`Global`?對象的方法。除此之外，`Global`?對象還包含其他一些方法。 ### [](https://github.com/stone0090/javascript-lessons/tree/master/1.12-SingletonBuiltInObjects#uri-編碼方法)URI 編碼方法 `Global`?對象的?`encodeURI()`?和?`encodeURIComponent()`?方法可以對 URI（Uniform Resource Identifiers，通用資源標識符）進行編碼，以便發送給瀏覽器。有效的 URI 中不能包含某些字符，例如空格。而這兩個 URI 編碼方法就可以對 URI 進行編碼，它們用特殊的 UTF-8 編碼替換所有無效的字符，從而讓瀏覽器能夠接受和理解。其中，`encodeURI()`?主要用于整個 URI，而?`encodeURIComponent()`?主要用于對 URI 中的某一段進行編碼。它們的主要區別在于，`encodeURI()`?不會對本身屬于 URI 的特殊字符進行編碼，例如冒號、正斜杠、問號和井字號；而?`encodeURIComponent()`則會對它發現的任何非標準字符進行編碼。來看下面的例子。 ~~~ var uri = "http://shijiajie.com/illegal value.htm#start"; console.log(encodeURI(uri)); // "http://shijiajie.com/illegal%20value.htm#start" console.log(encodeURIComponent(uri)); // "http%3A%2F%2Fshijiajie.com%2Fillegal%20value.htm%23start" ~~~ 使用?`encodeURI()`?編碼后的結果是除了空格之外的其他字符都原封不動，只有空格被替換成了?`%20`。而`encodeURIComponent()`?方法則會使用對應的編碼替換所有非字母數字字符。這也正是可以對整個 URI 使用?`encodeURI()`，而只能對附加在現有 URI 后面的字符串使用?`encodeURIComponent()`?的原因所在。一般來說，我們使用?`encodeURIComponent()`?方法的時候要比使用?`encodeURI()`?更多，因為在實踐中更常見的是對查詢字符串參數而不是對基礎 URI 進行編碼。與?`encodeURI()`?和?`encodeURIComponent()`?方法對應的兩個方法分別是?`decodeURI()`?和?`decodeURIComponent()`。其中，`decodeURI()`?只能對使用?`encodeURI()`?替換的字符進行解碼。例如，它可將?`%20`?替換成一個空格，但不會對?`%23`?作任何處理，因為?`%23`?表示井字號?`#`，而井字號不是使用?`encodeURI()`?替換的。同樣地，`decodeURIComponent()`?能夠解碼使用?`encodeURIComponent()`?編碼的所有字符，即它可以解碼任何特殊字符的編碼。來看下面的例子： ~~~ var uri = "http%3A%2F%2Fshijiajie.com%2Fillegal%20value.htm%23start"; console.log(decodeURI(uri)); // http%3A%2F%2Fshijiajie.com%2Fillegal value.htm%23start console.log(decodeURIComponent(uri)); // http://shijiajie.com/illegal value.htm#start ~~~ 這里，變量?`uri`?包含著一個由?`encodeURIComponent()`?編碼的字符串。在第一次調用?`decodeURI()`?輸出的結果中，只有`%20`?被替換成了空格。而在第二次調用?`decodeURIComponent()`?輸出的結果中，所有特殊字符的編碼都被替換成了原來的字符，得到了一個未經轉義的字符串（但這個字符串并不是一個有效的 URI）。 ### [](https://github.com/stone0090/javascript-lessons/tree/master/1.12-SingletonBuiltInObjects#eval-方法)`eval()`?方法 `eval()`?方法就像是一個完整的 JavaScript 解析器，它只接受一個參數，即要執行的 JavaScript 字符串。看下面的例子： ~~~ eval("console.log('hi')"); ~~~ 這行代碼的作用等價于下面這行代碼： ~~~ console.log("hi"); ~~~ 當解析器發現代碼中調用?`eval()`?方法時，它會將傳入的參數當作實際的 JavaScript 語句來解析，然后把執行結果插入到原位置。通過?`eval()`?執行的代碼被認為是包含該次調用的執行環境的一部分，因此被執行的代碼具有與該執行環境相同的作用域鏈。這意味著通過?`eval()`?執行的代碼可以引用在包含環境中定義的變量，舉個例子： ~~~ var msg = "hello world"; eval("console.log(msg)"); // "hello world" ~~~ 可見，變量?`msg`?是在?`eval()`?調用的環境之外定義的，但其中調用的?`console.log()`?仍然能夠顯示?`"hello world"`。這是因為上面第二行代碼最終被替換成了一行真正的代碼。同樣地，我們也可以在?`eval()`?調用中定義一個函數，然后再在該調用的外部代碼中引用這個函數： ~~~ eval("function sayHi() { console.log('hi'); }"); sayHi(); // "hi" ~~~ 顯然，函數?`sayHi()`?是在?`eval()`?內部定義的。但由于對?`eval()`?的調用最終會被替換成定義函數的實際代碼，因此可以在下一行調用?`sayHi()`?。對于變量也一樣： ~~~ eval("var msg = 'hello world';"); console.log(msg); // "hello world" ~~~ 在?`eval()`?中創建的任何變量或函數都不會被提升，因為在解析代碼的時候，它們被包含在一個字符串中；它們只在?`eval()`執行的時候創建。嚴格模式下，在外部訪問不到?`eval()`?中創建的任何變量或函數，因此前面兩個例子都會導致錯誤。同樣，在嚴格模式下，為`eval`?賦值也會導致錯誤： ~~~ "use strict"; eval = "hi"; // causes error ~~~ 能夠解釋代碼字符串的能力非常強大，但也非常危險。因此在使用?`eval()`?時必須極為謹慎，特別是在用它執行用戶輸入數據的情況下。否則，可能會有惡意用戶輸入威脅你的站點或應用程序安全的代碼（即所謂的代碼注入）。 ### [](https://github.com/stone0090/javascript-lessons/tree/master/1.12-SingletonBuiltInObjects#global-對象的屬性)`Global`?對象的屬性 `Global`?對象還包含一些屬性，其中一部分屬性已經在本書前面介紹過了。例如，特殊的值?`undefined`、`NaN`?以及`Infinity`?都是?`Global`?對象的屬性。此外，所有原生引用類型的構造函數，像?`Object`?和?`Function`，也都是?`Global`?對象的屬性。下表列出了?`Global`?對象的所有屬性。 | 屬性 | 說明 | 屬性 | 說明 | | --- | --- | --- | --- | | undefined | 特殊值undefined | Date | 構造函數Date | | NaN | 特殊值NaN | RegExp | 構造函數RegExp | | Infinity | 特殊值Infinity | Error | 構造函數Error | | Object | 構造函數Object | EvalError | 構造函數EvalError | | Array | 構造函數Array | RangeError | 構造函數RangeError | | Function | 構造函數Function | ReferenceError | 構造函數ReferenceError | | Boolean | 構造函數Boolean | SyntaxError | 構造函數SyntaxError | | String | 構造函數String | TypeError | 構造函數TypeError | | Number | 構造函數Number | URIError | 構造函數URIError | ECMAScript 5明確禁止給?`undefined`、`NaN`?和?`Infinity`?賦值，這樣做即使在非嚴格模式下也會導致錯誤。 ### [](https://github.com/stone0090/javascript-lessons/tree/master/1.12-SingletonBuiltInObjects#window-對象)`window`?對象 JavaScript 雖然沒有指出如何直接訪問?`Global`?對象，但 Web 瀏覽器都是將這個全局對象作為?`window`?對象的一部分加以實現的。因此，在全局作用域中聲明的所有變量和函數，就都成為了?`window`?對象的屬性。來看下面的例子。 ~~~ var color = "red"; function sayColor(){ console.log(window.color); } window.sayColor(); // "red" ~~~ JavaScript 中的?`window`?對象除了扮演規定的?`Global`?對象的角色外，還承擔了很多別的任務。 ## [](https://github.com/stone0090/javascript-lessons/tree/master/1.12-SingletonBuiltInObjects#math-對象)　`Math`?對象 JavaScript 還為保存數學公式和信息提供了一個公共位置，即?`Math`?對象。與我們在?`JavaScript`?直接編寫的計算功能相比，`Math`?對象提供的計算功能執行起來要快得多。`Math`?對象中還提供了輔助完成這些計算的屬性和方法。 ### [](https://github.com/stone0090/javascript-lessons/tree/master/1.12-SingletonBuiltInObjects#math-對象的屬性)`Math`?對象的屬性 `Math`?對象包含的屬性大都是數學計算中可能會用到的一些特殊值。下表列出了這些屬性。 | 屬性 | 說明 | | --- | --- | | Math.E | 自然對數的底數，即常量e的值 | | Math.LN10 | 10的自然對數 | | Math.LN2 | 2的自然對數 | | Math.LOG2E | 以2為底e的對數 | | Math.LOG10E | 以10為底e的對數 | | Math.PI | π的值 | | Math.SQRT1_2 | 1/2的平方根（即2的平方根的倒數） | | Math.SQRT2 | 2的平方根 | ### [](https://github.com/stone0090/javascript-lessons/tree/master/1.12-SingletonBuiltInObjects#min-和-max-方法)`min()`?和?`max()`?方法 `Math`?對象還包含許多方法，用于輔助完成簡單和復雜的數學計算。其中，`min()`?和?`max()`?方法用于確定一組數值中的最小值和最大值。這兩個方法都可以接收任意多個數值參數，如下面的例子所示。 ~~~ var max = Math.max(3, 54, 32, 16); console.log(max); // 54 var min = Math.min(3, 54, 32, 16); console.log(min); // 3 ~~~ 要找到數組中的最大或最小值，可以像下面這樣使用?`apply()`?方法。 ~~~ var values = [1, 2, 3, 4, 5, 6, 7, 8]; var max = Math.max.apply(Math, values); console.log(max); // 8 ~~~ 這個技巧的關鍵是把?`Math`?對象作為?`apply()`?的第一個參數，從而正確地設置?`this`?值。然后，可以將任何數組作為第二個參數。 ### [](https://github.com/stone0090/javascript-lessons/tree/master/1.12-SingletonBuiltInObjects#舍入方法)舍入方法下面來介紹將小數值舍入為整數的幾個方法：`Math.ceil()`、`Math.floor()`?和?`Math.round()`。這三個方法分別遵循下列舍入規則： * `Math.ceil()`?執行向上舍入，即它總是將數值向上舍入為最接近的整數； * `Math.floor()`?執行向下舍入，即它總是將數值向下舍入為最接近的整數； * `Math.round()`?執行標準舍入，即它總是將數值四舍五入為最接近的整數。下面是使用這些方法的示例： ~~~ console.log(Math.ceil(25.9)); // 26 console.log(Math.ceil(25.5)); // 26 console.log(Math.ceil(25.1)); // 26 console.log(Math.round(25.9)); // 26 console.log(Math.round(25.5)); // 26 console.log(Math.round(25.1)); // 25 console.log(Math.floor(25.9)); // 25 console.log(Math.floor(25.5)); // 25 console.log(Math.floor(25.1)); // 25 ~~~ ### [](https://github.com/stone0090/javascript-lessons/tree/master/1.12-SingletonBuiltInObjects#random-方法)`random()`?方法 `Math.random()`?方法返回介于0和1之間一個隨機數，不包括0和1。對于某些站點來說，這個方法非常實用，因為可以利用它來隨機顯示一些名人名言和新聞事件。套用下面的公式，就可以利用?`Math.random()`?從某個整數范圍內隨機選擇一個值。 ~~~ 值 = Math.floor(Math.random() * 可能值的總數 + 第一個可能的值) ~~~ 公式中用到了?`Math.floor()`?方法，這是因為?`Math.random()`?總返回一個小數值。而用這個小數值乘以一個整數，然后再加上一個整數，最終結果仍然還是一個小數。舉例來說，如果你想選擇一個1到10之間的數值，可以像下面這樣編寫代碼： ~~~ var num = Math.floor(Math.random() * 10 + 1); ~~~ 總共有10個可能的值（1到10），而第一個可能的值是1。而如果想要選擇一個介于2到10之間的值，就應該將上面的代碼改成這樣： ~~~ var num = Math.floor(Math.random() * 9 + 2); ~~~ 從2數到10要數9個數，因此可能值的總數就是9，而第一個可能的值就是2。多數情況下，其實都可以通過一個函數來計算可能值的總數和第一個可能的值，例如： ~~~ function selectFrom(lowerValue, upperValue) { var choices = upperValue - lowerValue + 1; return Math.floor(Math.random() * choices + lowerValue); } var num = selectFrom(2, 10); console.log(num); // 介于2和10之間（包括2和10）的一個數值 ~~~ 函數?`selectFrom()`?接受兩個參數：應該返回的最小值和最大值。而用最大值減最小值再加1得到了可能值的總數，然后它又把這些數值套用到了前面的公式中。這樣，通過調用?`selectFrom(2,10)`?就可以得到一個介于2和10之間（包括2和10）的數值了。利用這個函數，可以方便地從數組中隨機取出一項，例如： ~~~ var colors = ["red", "green", "blue", "yellow", "black", "purple", "brown"]; var color = colors[selectFrom(0, colors.length-1)]; console.log(color); // 可能是數組中包含的任何一個字符串 ~~~ ### [](https://github.com/stone0090/javascript-lessons/tree/master/1.12-SingletonBuiltInObjects#其他方法)其他方法 `Math`?對象中還包含其他一些與完成各種簡單或復雜計算有關的方法，但詳細討論其中每一個方法的細節及適用情形超出了本書的范圍。下面我們就給出一個表格，其中列出了這些沒有介紹到的?`Math`?對象的方法。 | 方法 | 說明 | | --- | --- | | Math.abs(num) | 返回num的絕對值 | | Math.asin(x) | 返回x的反正弦值 | | Math.exp(num) | 返回Math.E的num次冪 | | Math.atan(x) | 返回x的反正切值 | | Math.log(num) | 返回num的自然對數 | | Math.atan2(y,x) | 返回y/x的反正切值 | | Math.pow(num,power) | 返回num的power次冪 | | Math.cos(x) | 返回x的余弦值 | | Math.sqrt(num) | 返回num的平方根 | | Math.sin(x) | 返回x的正弦值 | | Math.acos(x) | 返回x的反余弦值 | | Math.tan(x) | 返回x的正切值 | 雖然 ECMA-262 規定了這些方法，但不同實現可能會對這些方法采用不同的算法。畢竟，計算某個值的正弦、余弦和正切的方式多種多樣。也正因為如此，這些方法在不同的實現中可能會有不同的精度。 ## [](https://github.com/stone0090/javascript-lessons/tree/master/1.12-SingletonBuiltInObjects#關卡)關卡 ~~~ // 如何高效產生m個n范圍內的不重復隨機數（m<=n) var getRandomNumber = function(n, m){ // 待實現方法體 } console.log(getRandomNumber(20, 3)); // 8,4,19 ~~~