javascript的一些小知识点
以下是我在学习过程中遇到的一些javascript的小知识点，保存下来以供参考，持续更新中。。
1、eval函数的作用域
eval 函数会在当前作用域中执行一段 JavaScript 代码字符串。但是 eval 只在被直接调用并且调用函数就是 eval 本身时，才在当前作用域中执行。如果执行了类似于 f = eval; f(); 这样的语句，将等价于在全局作用域中调用 eval，例如下面的这段代码：
（原文来自《javascript秘密花园》：http://bonsaiden.github.com/JavaScript-Garden/zh/#core.eval）
1 var a = 0 ; 2 var f1 = function() { 3 var a = 1 ; 4 5 eval("a = 2") ; // 由于是直接调用eval函数，因此此时eval函数的作用域是当前作用域 6 console.log(a) ; // 2，在eval函数中修改了局部变量a 7 }; 8 f1() ; 9 console.log(a) ; // 0，全局变量a没有被修改 10 11 var b = 0 ; 12 var f2 = function() { 13 var b = 1 ; 14 var f3 = eval ; 15 16 f3("b = 2") ; // 由于这里将eval函数的引用赋值给了变量f3，并通过f3调用了eval函数，因此此时该函数的作用域是全局作用域 17 console.log(b) ; // 1，局部变量a没有被修改 18 } 19 f2() ; 20 console.log(b) ; // 2，在eval函数中修改了全局变量a
2、querySelector和getElementById的区别
querySelector和getElementById的区别在于，querySelector的参数须是符合 css selector 的字符串，例如对于下面的这个div，用getElementById可以获取，但是querySelector就获取不到了：
（参考出处：http://www.jb51.net/article/30132.htm）
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 </head> 6 <body> 7 <div id="1"></div> 8 </body> 9 </html>
输出结果如下：
1 var div = document.getElementById("1"); 2 console.log(div); 3 // => <div id="1"></div> 4 5 var target = document.querySelector("#1"); 6 console.log(target); 7 // => Uncaught Error: SYNTAX_ERR: DOM Exception 12
3、querySelectorAll和getElementsByClassName的区别
querySelectorAll和getElementsByClassName的区别在于querySelectorAll返回的是一个叫做StaticNodeList的新类型的实例。
顾名思义，StaticNodeList有NodeList所有的属性和方法，但是它底层的实现是元素集合的一个快照，而非总是要重新的针对文档的动态查询。使用StaticNodeList消除了大部分使用NodeList对象带来的性能问题。
只要调用querySelectorAll()都会返回一个StaticNodeList对象不管匹配的元素有几个；如果没有匹配，那么StaticNodeList为空。querySelectorAll()和querySelector()一样存在与Document和Element类型上。
话不多说，上代码：（原文来自：http://www.poluoluo.com/jzxy/201204/163845.html）
1 <!DOCTYPE> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>querySelectorAll和getElementsByClassName的区别</title> 6 </head> 7 <body> 8 <div class="a"></div> 9 <div class="a"></div> 10 <div class="a"></div> 11 <div class="a"></div> 12 <div class="a"></div> 13 <div class="a"></div> 14 </body> 15 </html>
对于上面的7个div，分别通过querySelectorAll和getElementsByClassName获取它们，然后改变其中一个div的class值，观察两个集合的结果有没有发生变化：
1 var div = document.getElementsByClassName("a"); 2 console.log(div); 3 // => [<div>, <div>, <div>, <div>, <div>, <div>] 4 5 var target = document.querySelectorAll(".a"); 6 console.log(target); 7 // => [<div>, <div>, <div>, <div>, <div>, <div>] 8 9 div[3].className = "b"; //改变第四个div的class值 10 11 console.log(div); 12 // => [<div>, <div>, <div>, <div>, <div>] 13 // 动态NodeList显示出变更后的div集合 14 15 console.log(target); 16 // => [<div>, <div>, <div>, <div>, <div>, <div>] 17 // StaticNodeList显示的还是变更前的div集合
4、使用undefined不为人知的秘密
在jQuery的源码中，其外层沙箱和命名空间大致是这样写的：
（原文来自：http://blog.raphealguo.com/2013/01/17/jquery-src-util/）
1 (function(window, undefined) { 2 ... 3 4 window.jQuery = window.$ = jQuery; 5 6 }(window, undefined));
这里最外层的匿名函数使用undefined作为第二个参数的原因，是因为在jQuery中有一个针对压缩的小小策略，先看以下代码：
1 (function( window, undefined ) { 2 var a = undefined; 3 if (a == undefined){blabla...} 4 5 .... 6 if (c == undefined) return; 7 })( window );
经过压缩后，可以变成：
1 (function(w, u) { 2 var a = u; 3 if (a == u){blabla...} 4 5 .... 6 if (c == u) return; 7 })(w);
因为这个外层函数只传了一个参数，因此沙箱执行时，u自然会undefined，把9个字母缩成1个字母，可以看出压缩后的代码减少一些字节数。
这样做还有另外一个原因：由于在ECMAScript5之前undefined并不是ECMAScript中的关键字，即undefined是可以用作变量名的，也就是undefined是可以赋值的。例如下面所示的这段代码：
1 var undefined = "zhaojian"; 2 3 (function() { 4 console.log(undefined); 5 }());
这段代码在ES5之前是合法的，控制台输出的结果可能会是zhaojian而非undefined。因此将undefined作为参数传入的用处就是防止某些2B程序员对undefined进行赋值，并且即使某个2B程序员真的这么做了，那么这样做的影响也只局限于这一块代码的范围，不会影响到全局范围内其他人的代码。
5、深入理解形参、实参与arguments
arguments对象的值只与实参有关，而与实参无关，arguments与形参的关系是通过实参联系起来的。
先来看看下面的几道面试题：（原文出自：http://hi.baidu.com/flondon/item/544b53b5d4872870254b0999）
1 function tmp(x) { 2 x = 10; 3 console.log(arguments[0]); 4 } 5 tmp(1); 6 7 function tmp(x) { 8 arguments[0] = 10; 9 console.log(arguments[0]); 10 } 11 tmp(1) 12 13 function tmp(x) { 14 arguments[0] = 10; 15 console.log(arguments[0]); 16 } 17 tmp(); 18 19 function tmp(x) { 20 x = 10; 21 console.log(arguments[0]); 22 } 23 tmp(); 24 25 function tmp(x, y) { 26 y = 10; 27 console.log(arguments[1]); 28 } 29 tmp(1);
在上面的五道题中，前两道的答案都为10，后三道的答案都为undefined。关于该答案的要点分析如下：
1、如果函数调用时没有参数传入，那么arguments对象为空（已经声明，但没有元素，并且不指向任何内存单元）。
2、如果函数调用时有参数传入，那么arguments对象和相应的形参同时指向这些传入值的内存单元，此时，对arguments对象中的元素或者函数形参的任何赋值都会直接体现到彼此（因为它们的值存储于同一块内存）。
3、当输入的参数少于形参数目时，其他形参（未传入实参）值的改变不影响arguments的值（如代码段5）。
6、for in 遍历稀疏数组的问题
在使用for in方式遍历数组的时候，它会在遍历过程中跳过没有定义的数组位置。例如下面的代码：
1 var arr = []; 2 arr[1] = 1; // arr = [undefined, 1] 3 console.log(0 in arr); // false 4 console.log(arr.indexOf(undefined)); // -1 5 console.log(arr[0] === undefined); // true
对于上面的数组，js认为它的第一项是不存在的，虽然它有一个undefined的默认值，但是如果用indexOf去寻找值为undefined的数组元素，返回的结果是找不到（-1）。
上面的是正常的情况，但是有正常就有不正常，例如下面的代码：
1 var arr = [undefined, 1]; // arr = [undefined, 1] 2 console.log(0 in arr); // true 3 console.log(arr.indexOf(undefined)); // 0 4 console.log(arr[0] === undefined); // true
对于这里的数组，js认为它的第一项是存在的，虽然它的值也为undefined，而且如果用indexOf去寻找值为undefined的数组元素是能找到的（返回结果为0）。
因此可以得出结论，虽然上面的两个数组从外表上看起来一模一样，但是第二个数组中的undefined值是显式声明的，而第一个数组中的undefined值是隐式声明的，所以for in会忽略隐式声明的undefined数组元素，而把显示声明的数组元素作为正常的数组元素来看待
