第24篇 js小知识和“坑”

前面说了说了js的相关知识，基本上除了语法外，把项目常用的知识做了一个梳理，现在说下js的其它方面的知识，这些知识不成体系，属于不理解对于一般开发没什么太多影响，但如果理解清楚，可以更好去开发。

js解析引擎:

引擎的定义:

什么是js解析引擎？简单的说是就能够读懂javascript代码的的平台，如你写一段代码 var a=1;var b=1;var c=a+b;引擎做的事情就这一段代码执行成我们想要的结果，这就是引擎要做的事情。 上面据说的和C/C中的编译过程很像，但是js和C/C有所不同，他们的编译器是把源代码转成另外一种代码（如机器码）,而js中是直接解析并把代码结果给运算出来。 但是现在也无法完全这样定义，在chrome的V8引擎里面，为了提高js的提高效率，会在执行之前把js编译成机器代码。这个问题大可不用过于纠结。

js语言的标准:

语言都有一个标准，对于js也是这样，如果想深入了解这js可以阅读下ECMASCript，这里面是原汁原味的js的语言标准，不过这个不用太过于着急，只要把基础学会了，至于标准嘛，不过只是拿来参考和提高编码质量而已。当然js的引擎也是程序，也是由程序编写而来（chrome v8的引擎就是由C/C++)，如果你能力很高，可以直接看看引擎的源码。

浏览器与js引擎:

浏览器与js引擎关系，这个很好理解，js引擎是浏览器的一个组成部分，浏览器做的事情很多，执行js也是一个功能。当浏览器从服务器上面请求到页面信息时，就根据自身的特性去解析页面和运行脚本。

js’小坑’注意：

var的使用：

var a=b=1;这个代码看着没有问题，但是这个b却不小心变成了全局变量,使用中请切记，如果想定义多个变量，可以 写成 var a=1,b=1;看代码：

function t(){
var  a=b=1;
console.log(a);
}
t();
console.log(window.a);
console.log(window.b)

从上面的结果可以看出，这个变量b,已经成为了一个全局变量，这样的使用，无论对于什么语言都是一个大忌。

全局变量和隐性全局变量
到这里可能会有一个疑问，代码如下：

var a=1;
b=1;
function t(){
console.log(a);
console.log(b);
}

这里的a和b有什么区别？a是全局变量，那b呢？在这里纠证我原来所说有全局变量，其实b是一个隐性的全局变量，并不是真正的全局变量，用delete 做个测试：

delete window.a;//false
delete window.b;//true

从上面的结果可以看出，真正的声明的变量是无法用delete 删除，而隐性的可以的。

for循环：

for(var i=0;i<arr.length;i++){...}

这段代码估计是很多人经常写，但是这样会导致arr获得长度执行了很多次，优化如下：

for(var i=0,len=arr.length;i<len;i++){....}

这样多命名一个变量把数组的长度’缓存’下来，这样只需要一次获取就行了
同时还可以再优化：1、不要用i++,用i+=1或i=i+1替换，这样会造成解析的难度 2、让数字和0相比，效率会更快
修改如下：

for(var len=arr.length;len>0;len=len-1){....}

for..in的使用：

for..in..这个主要是在遍历对象属性的时候使用，看代码：

function funcA() {
this.name = "A";
this.show = function() {
console.log(this.name);
}
}
function funcB() {
this.age = 50;
this.read = function() {
console.log(this.age);
}
}
funcB.prototype = new funcA();
var b = new funcB();
for (var p in b) {
console.log(p);
}

从上面的运行结果可以看出，这个输出把继承到的属性也输出了，在某些情况下并不是我们想要的，如果继承的属性过多，在遍历的情况下肯定会对性能有很大的影响,可以考虑hasOwnProperty属性，把不需要的属性从原型链上面去掉,so代码可以改成下面的形势：

var b = new funcB();
for (var p in b) {
if (b.hasOwnProperty(p))
console.log(p);
}

下面对于这个再进行下扩展（纯属娱乐，不推荐这样的写法，不过可以帮助我们理解前面所学的知识）

for (var p in b) {
if(Object.prototype.hasOwnProperty.call(b,p))
console.log(p);
}

至于为什么这样可以写，可以参考下前面的文章，这里不多说，如果嫌这样写代码比较长，也可用一个变量把这个函数给‘缓存’下来。

谨慎eval()，setTimeout,setInterval和Function的使用：

好用？误用？隐患？
对于这几个函数来说可能都不陌生，基本上在项目中处处可以见到，对于eval()这个函数来说，他可以接受任意的字符，把他当成js的代码来运行，如：

var obj={};
obj.title="javascript";
var p="title";
eval("alert(obj."+p+")");
//应该使用的替代方法
alert(obj[p]);

可以看出eval的功能是很强大，但是同时也带来了很安全的漏洞，我想很多人都用过Ajax从后台获得数据，然后利用这个函数转成json格式，这个时候最好用浏览器自带的JSON.parse方法，如果浏览器不支持，可以考虑从后台转成json对象后再返回到前台，如果上面的两种方法都不可行，可以使用Json.org相关的库。

用Function的替换：
如果在某些地方不得不使用eval()的话，可以考虑使用new Function()替代。因为在使用的过程中eval()会对全局的作用域会有污染，看代码：

console.log(typeof a);
console.log(typeof b);
var jsstring='var a=1;console.log(a);';
eval(jsstring);
jsstring="var b=2;console.log(b);";
new Function(jsstring)();
console.log(typeof a);
console.log(typeof b);

从上面的图可以看出，虽然结果一样，但eval()运行后的代码的变量a把全局变量污染了，而new Function()把字符作为一个函数的内部的局部变量处理。当然上面使用的eval()也可以修改下，正如前面说的匿名函数，把eval()再次封装下，这里也是娱乐下，不推荐使用，如:

(function(){
eval(jsstring);
}());

setTimeout,setIntervalp这两个函数和eval的函数传递相同，如下：

function funcA(){
console.log("hello");
}
setTimeout("funcA();",1000);
setInterval("funcA();",1000);
//修改成下面的方式
setTimeout(funcA,1000);
setInterval(funcA,1000);

对象都是引用类型：

如题，如果想仅仅使用值，要采用复制属性的办法了

var a={};
var b=a;
a.id=1;
console.log(b.id);//1

说说function 和arguments
- 说说arguments
function是js的函数声明，arguments是参数列表。在函数被调用的时候成生成的一个对象，这个对象保留了当前被调用函数的参数，并生成属性callee（被调用函数）指向自身。先看下面的代码：
首先看下代码:

function funcA(age, name) {
console.log(arguments);
}
function funcB() {
console.log(arguments);
funcA(18, "wells");
}
funcB();

上面的输出结果可以明显看出当前argumets里面的属性和数据，至于为什么，下面会再说到。

说说callee和caller
本来不想说这两个东西，因为写这几个系列的文章是为了对js有一个入门的概念就行了，但是这篇博客的目的就是为了说明其它的一些七七八八的东西。所以对于这个概念，还是说说为好，以免以后再想说，也没有这个心力了。
关于这个概念要想更好的去理解，就要知道下js的工作原理，对于js来说，只是单线程的，代码的运行只是把要运行的代码放到一个队列里面去执行（setTimeout和setInterval，这两个函数是可以把函数的对象插入到队列里面，以获得优先执行的权利），同时每一种代码执行都需要上下文里面的变量和对象。如一个函数的调用，可能会引用到其它的变量，同样它也可以再次调用其它的函数。当一个上下文激活了另一个上下文的时候，调用者称为caller,被调用者称为callee.当然递归调用的时候 caller和callee是一个函数。
当一个caller激活了一个callee，那么这个caller就会暂停自身的执行，把当前的执行权利交给callee,当这个callee运行完之后再控制权交给caller继续向下执行。

caller和callee使用事例
关于这两个的使用很少，下面我就给一个callee的使用事例，用callee写一个递归，计算斐波那次数列，供参考：

function funcA(n) {
if (n == 1 || n == 2) {
return 1;
} else {
//无非是改下名字而已
return arguments.callee(n - 1) + arguments.callee(n - 2);
}
}
console.log(funcA(10));

编程规范：

缩进
在代码中没有缩进的代码看起来非常的糟糕，现在的js的代码编辑器都有一个代码缩进的功能，这个就不多说了

大括号{}

if和for：
关于if和for后面只有一句代码，要不要添加大括号？我的答案是：要的！因为你现在看到括号里面只有一句，如果后面再添加，或者有更新了，所以为了长远的打算，还要要加上;

命名规范
命名规范的事情到不用怎么去说了，网上有一大堆的资料，这里只要注意两点就行：

1、构造函数首字母要大写

2、一般函数对象首字母小写
这样的好处就是能够看到函数的时候我能不能直接用new 去构造新的对。
```js
//构造函数
function Dog(){

}
//普通函数
function show(){

}
```

总结：
到目前为止，js方面的基础知识已经说完了，下篇会整理一些jQuery方面的快速学习的知识，把相关选择器、dom操作、缓存方面的知识快速说下，后面会着重说下jQuery的插件开发（这个才是重点），后面会把平时写的插件做一个分享。

写于 2015.11.21完