Heim > Artikel > Web-Frontend > Einzelnes integriertes Objekt in „JavaScript Breakthrough'
ECMA-262 definiert integrierte Objekte als „von der JavaScript-Implementierung bereitgestellte Objekte, die nicht von der Hostumgebung abhängen. Diese Objekte sind bereits vorhanden, bevor das JavaScript-Programm ausgeführt wird.“ Dies bedeutet, dass Entwickler integrierte Objekte nicht explizit instanziieren müssen, da diese bereits instanziiert sind. Die meisten integrierten Objekte wie Object, Array und String haben wir bereits vorgestellt. ECMA-262 definiert außerdem zwei integrierte Singleton-Objekte: Global und Math.
Globales Objekt
Globales Objekt kann als das speziellste Objekt in JavaScript bezeichnet werden, denn egal aus welchem Blickwinkel man es betrachtet, dieses Objekt existiert nicht. Das globale Objekt wird gewissermaßen als das ultimative „Catch-All-Objekt“ definiert. Mit anderen Worten: Eigenschaften und Methoden, die zu keinem anderen Objekt gehören, sind letztendlich dessen Eigenschaften und Methoden. Alle im globalen Bereich definierten Eigenschaften und Funktionen sind Eigenschaften des globalen Objekts. Die zuvor in diesem Buch vorgestellten Funktionen wie isNaN(), isFinite(), parseInt() und parseFloat() sind eigentlich alle Methoden des Global-Objekts. Darüber hinaus enthält das Global-Objekt noch einige andere Methoden.
URI-Codierungsmethode
Die Methoden encodeURI() und encodeURIComponent() des Global-Objekts können URIs (Uniform Resource Identifiers, Universal Resource Identifiers) zum Senden an den Browser codieren. Bestimmte Zeichen, z. B. Leerzeichen, können nicht in einen gültigen URI enthalten sein. Diese beiden URI-Kodierungsmethoden können den URI kodieren. Sie ersetzen alle ungültigen Zeichen durch eine spezielle UTF-8-Kodierung, damit der Browser sie akzeptieren und verstehen kann.
Unter diesen wird encodeURI() hauptsächlich für den gesamten URI verwendet, während encodeURIComponent() hauptsächlich zum Codieren eines bestimmten Segments des URI verwendet wird. Der Hauptunterschied zwischen ihnen besteht darin, dass encodeURI() keine Sonderzeichen codiert, die selbst URIs sind, wie z. B. Doppelpunkte, Schrägstriche, Fragezeichen und Hash-Zeichen, während encodeURIComponent() alle gefundenen nicht standardmäßigen Zeichen codiert. Betrachten Sie das folgende Beispiel.
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"
Das Ergebnis der Codierung mit encodeURI() ist, dass alle Zeichen außer Leerzeichen intakt bleiben und nur Leerzeichen durch ersetzt werden. Die Methode encodeURIComponent() ersetzt alle nicht alphanumerischen Zeichen durch die entsprechende Kodierung. Aus diesem Grund kann encodeURI() für einen gesamten URI verwendet werden, encodeURIComponent() jedoch nur für Zeichenfolgen, die an einen vorhandenen URI angehängt werden.
Im Allgemeinen verwenden wir die Methode encodeURIComponent() häufiger als die Methode encodeURI(), da es in der Praxis häufiger vorkommt, Abfragezeichenfolgenparameter als den zugrunde liegenden URI zu codieren.
Die beiden Methoden, die den Methoden encodeURI() und encodeURIComponent() entsprechen, sind decodeURI() bzw. decodeURIComponent(). Unter diesen kann decodeURI() nur Zeichen dekodieren, die durch encodeURI() ersetzt wurden. Beispielsweise wird durch ein Leerzeichen ersetzt, mit # jedoch nichts, da # das Nummernzeichen # darstellt, das nicht mit encodeURI() ersetzt wird. Ebenso ist decodeURIComponent() in der Lage, alle mit encodeURIComponent() kodierten Zeichen zu dekodieren, d. h. es kann die Kodierung jedes Sonderzeichens dekodieren. Betrachten Sie das folgende Beispiel:
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
Hier enthält die Variable uri eine von encodeURIComponent() codierte Zeichenfolge. In der Ausgabe des ersten Aufrufs von decodeURI() wird nur durch Leerzeichen ersetzt. Im Ausgabeergebnis des zweiten Aufrufs von decodeURIComponent() wird die Codierung aller Sonderzeichen durch die Originalzeichen ersetzt und eine Zeichenfolge ohne Escapezeichen erhalten (diese Zeichenfolge ist jedoch kein gültiger URI).
eval()-Methode Die
eval()-Methode ist wie ein vollständiger JavaScript-Parser, sie akzeptiert nur einen Parameter, den auszuführenden JavaScript-String. Schauen Sie sich das folgende Beispiel an:
eval("console.log('hi')");
Diese Codezeile entspricht der folgenden Codezeile:
console.log("hi");
Wenn der Parser feststellt, dass die eval()-Methode aufgerufen wird Der Code, es Die eingehenden Parameter werden als tatsächliche JavaScript-Anweisungen analysiert und die Ausführungsergebnisse werden an der ursprünglichen Position eingefügt. Über eval() ausgeführter Code wird als Teil der Ausführungsumgebung betrachtet, die den Aufruf enthält, sodass der ausgeführte Code dieselbe Gültigkeitsbereichskette wie diese Ausführungsumgebung hat. Das bedeutet, dass über eval() ausgeführter Code auf Variablen verweisen kann, die in der enthaltenden Umgebung definiert sind, zum Beispiel:
var msg = "hello world"; Hallo Welt“
Es ist ersichtlich, dass die Variable msg außerhalb der Umgebung definiert ist, in der eval() aufgerufen wird, die dort aufgerufene console.log() jedoch weiterhin „Hallo Welt“ anzeigen kann. Dies liegt daran, dass die zweite Codezeile oben schließlich durch eine echte Codezeile ersetzt wird. Ebenso können wir auch eine Funktion im eval()-Aufruf definieren und dann im externen Code des Aufrufs auf die Funktion verweisen:
eval("function sayHi() { console.log('hi' ); }"); sayHi(); // "hi"
Offensichtlich ist die Funktion sayHi() innerhalb von eval() definiert. Da der Aufruf von eval() jedoch irgendwann durch den eigentlichen Code ersetzt wird, der die Funktion definiert, kann sayHi() in der nächsten Zeile aufgerufen werden. Das Gleiche gilt für Variablen:
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