'JavaScript Breakthrough'의 단일 내장 개체

ECMA-262에서는 내장 객체를 "호스트 환경에 의존하지 않고 JavaScript 구현에 의해 제공되는 객체입니다. 이러한 객체는 JavaScript 프로그램이 실행되기 전에 이미 존재합니다."라고 정의합니다. 이것이 의미하는 바는 내장 객체가 이미 인스턴스화되었기 때문에 개발자가 명시적으로 인스턴스화할 필요가 없다는 것입니다. 우리는 이미 Object, Array, String과 같은 대부분의 내장 객체를 소개했습니다. ECMA-262는 또한 두 개의 싱글톤 내장 객체(Global 및 Math)를 정의합니다.

전역 객체

전역 객체는 JavaScript에서 가장 특별한 객체라고 할 수 있습니다. 어느 각도에서 보더라도 이 객체는 존재하지 않기 때문입니다. Global 개체는 어떤 의미에서는 궁극적인 "포괄 개체"로 정의됩니다. 즉, 다른 개체에 속하지 않는 속성과 메서드는 궁극적으로 해당 개체의 속성과 메서드입니다. 전역 범위에 정의된 모든 속성과 함수는 전역 개체의 속성입니다. 이 책의 앞부분에서 소개한 isNaN(), isFinite(),parseInt(),parseFloat() 등의 함수는 실제로 모두 Global 개체의 메서드입니다. 이 외에도 Global 개체에는 몇 가지 다른 메서드도 포함되어 있습니다.

URI 인코딩 방법

Global 객체의 encodeURI() 및 encodeURIComponent() 메서드는 브라우저에 보내기 위한 URI(Uniform Resource Identifiers, Universal Resource Identifiers)를 인코딩할 수 있습니다. 공백과 같은 특정 문자는 유효한 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()를 사용하는 이유입니다.

일반적으로 encodeURI()보다 encodeURIComponent() 메서드를 더 자주 사용합니다. 실제로는 기본 URI보다 쿼리 문자열 매개 변수를 인코딩하는 것이 더 일반적이기 때문입니다.

encodeURI() 및 encodeURIComponent() 메서드에 해당하는 두 가지 메서드는 각각 decodeURI() 및 decodeURIComponent()입니다. 그 중 decodeURI()는 encodeURI()로 대체된 문자만 디코딩할 수 있습니다. 예를 들어, %20은 공백으로 대체되지만 %23은 encodeURI()를 사용하여 대체되지 않는 파운드 기호 #를 나타내기 때문에 %23에는 아무 작업도 수행하지 않습니다. 마찬가지로, 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가 아닙니다).

eval() 메소드

eval() 메소드는 완전한 JavaScript 파서와 유사하며 실행할 JavaScript 문자열이라는 하나의 매개변수만 허용합니다. 다음 예를 살펴보십시오.

eval("console.log('hi')");

이 코드 줄은 다음 코드 줄과 동일합니다.

console.log("hi");

파서가 eval() 메서드가 호출된 것을 발견한 경우 코드, it 들어오는 매개변수는 실제 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() 时必须极为谨慎，特别是在用它执行用户输入数据的情况下。否则，可能会有恶意用户输入威胁你的站点或应用程序安全的代码(即所谓的代码注入)。

Global 对象的属性

Global 对象还包含一些属性，其中一部分属性已经在本书前面介绍过了。例如，特殊的值 undefined、NaN 以及 Infinity 都是Global 对象的属性。此外，所有原生引用类型的构造函数，像 Object 和 Function，也都是 Global 对象的属性。下表列出了Global 对象的所有属性。

ECMAScript 5 明确禁止给 undefined、NaN 和 Infinity 赋值，这样做即使在非严格模式下也会导致错误。

window 对象

JavaScript 虽然没有指出如何直接访问 Global 对象，但 Web 浏览器都是将这个全局对象作为 window 对象的一部分加以实现的。因此，在全局作用域中声明的所有变量和函数，就都成为了 window 对象的属性。来看下面的例子。

var color = "red"; 
 
function sayColor(){ 
    console.log(window.color); 
} 
 
window.sayColor();  // "red"

JavaScript 中的 window 对象除了扮演规定的 Global 对象的角色外，还承担了很多别的任务。

Math 对象

JavaScript 还为保存数学公式和信息提供了一个公共位置，即 Math 对象。与我们在 JavaScript 直接编写的计算功能相比，Math对象提供的计算功能执行起来要快得多。Math 对象中还提供了辅助完成这些计算的属性和方法。

Math 对象的属性

Math 对象包含的属性大都是数学计算中可能会用到的一些特殊值。下表列出了这些属性。

属性说明

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 值。然后，可以将任何数组作为第二个参数。

舍入方法

下面来介绍将小数值舍入为整数的几个方法：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

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); // 可能是数组中包含的任何一个字符串

其他方法

Math 对象中还包含其他一些与完成各种简单或复杂计算有关的方法，但详细讨论其中每一个方法的细节及适用情形超出了本书的范围。下面我们就给出一个表格，其中列出了这些没有介绍到的 Math 对象的方法。

虽然 ECMA-262 规定了这些方法，但不同实现可能会对这些方法采用不同的算法。毕竟，计算某个值的正弦、余弦和正切的方式多种多样。也正因为如此，这些方法在不同的实现中可能会有不同的精度。

关卡

// 如何高效产生m个n范围内的不重复随机数(m<=n) 
var getRandomNumber = function(n, m){ 
  // 待实现方法体 
} 
console.log(getRandomNumber(20, 3)); // 8,4,19