JS知识点梳理

最近写了一些简单的前台JS代码，觉得有必要写一下JS的知识点梳理；今天正好在无聊的空闲时间里，翻到了知乎上的一个答案，里面写了些问题，就尝试回答一下，当然，重要的是借用他的脉络，自己也就省得动脑了~

1  基础

1，什么是命名空间，变量污染，变量声明提升，预编译？如何检查一段代码执行后是否声明了全局变量？

JS本身没有命名空间机制，当引入大量外界的js框架的时候，可以自己定义，类似com.company.test或者根据url参数赋值什么的；

局部不使用var定义时，全局变量可以发挥作用，使用了var，则全局变量彻底消失，全局变量的使用很危险，而且，很难在多个function当中多次重复使用，其实使用return就能满足需求；

变量提升机制是很多undefined错误的根源，不同于C语言，JS只有在一个function当中才会重新划分出一个作用域，而if、while语句不会再划分作用域，如果需要临时作用域，可以使用闭环：

if (1) { 
(function () { 
var x = 2; 
}());

而实际上，JS会把一个作用域里所有的声明都提到作用域的开始，即紧挨着function的左括号{后面，因此，想使用全局变量x=value，然后再声明var x=another value，实际上是不行的；

所谓的预编译其实同上，JS会先把所有的function和变量的声明提前，先告知浏览器以一个概况，然后再赋值啊什么的；

检查全局变量：

 for (var w in window) { alert(window[w]); }

实际上全局变量是window的属性。

2，隐式转换的种种规则

+ JS会将两个参数转换成字符串并做连接，同理 a+' '能够简单地将int转换成string；

- * / 运算符会尝试将参数转换成数值类型；

if语句会将括号内参数尝试转换成Boolean型；

for in会将参数转成string 两个参数都是；

alert会尝试读取Object中的数值或字符串，

Number.prototype.fn = function(){return this};
var a = 1;
alert(typeof a.fn());//-->Object
alert(a.fn());// --> 1 

3，关于对象，对象的属性可能有哪些特性(attribute)？什么是原型链？如何检测某一属性是在对象中还是原型链中？如何检测是否是普通对象或空对象？写一个工厂模式？(工厂模式也有很多细节，具体可以参考《javascript模式》一书，不是《javascript设计模式》)

for i in Object 能够显示Object的所有属性，一般会有length等等；

var Object=function(x,y){

    this.x=x;

    this.y=y;

}

Object.prototype={

    setx: function(x){

this.x = x;

return 0;

    },

    return {setx;}

}

所谓的原型链是指，新的Object可以包含已有的Objectold，而调用函数的时候会从最下层的Objectold开始，按链式向顶层查找，同时有hasOwnProperty函数，查看Object是否含有没在原型链上的属性。

简单总结，工厂模式是指，一个专门的可扩展的新建对象函数，通过传入参数，创建不同的对象，当新增对象类型的时候，只需要增加工厂类的代码即可，不需要旧式的构造函数。

4，变量类型检测、特性检测以及异常避免

通常用typeof()足够用，有的时候用Object.prototype.toString.call()，可以避免Array啊什么的返回undefined；

浏览器特性一般用useragent做检测，或者用document.all判断是否是IE；

JS异常也支持try、catch组合，还是能够解决很多问题的。

5，setTimeout的特性

setTimeout是在全局调用括号里的function的，所以不能用this，一般是通过嵌套的递归调用实现定时刷新的，个人不喜欢这种写法。这是一种异步的方法，想要实现数据的同步刷新或者说是数据的推送，还是需要别的方法。

还有一点，setTimeout是利用当前页面的线程进行计时的，该线程可能需要执行很多操作，可能有某些操作会占用线程的大量资源，因此这种计时时间并不可靠。

6，数组几个API的手工实现

不太懂，数组需要new Array()才能用，然后length和prototype等都是已经实现了的，分隔可以用split，数组也不是很复杂的数据结构。

7，事件

指onclick或者onabort等等，一定情况下可以触发指定的函数，还是挺常用的。

一般各个js框架还会再次重新实现这些东西。

8，正则表达式，至少要明白$1和\1的意思和几个API的用法。

1.\ 转义符

2.(), (?:), (?=), [] 圆括号和方括号

3.*, +, ?, {n}, {n,}, {n,m} 限定符

4.^, $, \anymetacharacter 位置和顺序

5.| “或”操作

9，javascript如何获得随机unicode字符？

字符集是个数组，利用Math.random作为随机数产生器，产生下标，再读取字符。

10，JSON.parse的参数传一个什么对象的时候不能处理？(可以试试JSON.parse(window))

格式不对会抛出异常：属性名和值都需要用引号引好，除非是数值；

Object类型有时候会出现undefined。

11，fn.apply的第一个参数是context(函数运行的上下文)，那么这个参数传一个数组会怎么处理？

通过do while控制处理数组的时间，每50ms处理一个元素，使得界面不会卡死？还是说用json串，避免数组的繁琐？

2  DOM操作

1，实现一些API如getElementsByClass（有很多细节，参见司徒正美的博客）

通常先使用getElementsByTagName("*")取出文档中所有元素，然后进行遍历，使用正则表达式找出匹配的元素放入一个数组返回。由于IE5不支持document.getElementsByTagName("*")，要使用分支document.all以防错误。

byclass不如byid简洁明了，但是也可用，个人观点。

2，各种宽度高度(clientHeight之类)的含义及各浏览器之间的差异性

写到这，写不动了，第二天开始重新写：

document.documentElement.clientWidth  这个是网页可见宽度，IE和Firefox相同，Opera是body+margin，chrome貌似也是可以用这个，没有特别的地方；

像图片设置可以先根据宽度写onload函数，再写src源，类似ajax。

3，实现一个带回调函数的插入DOM节点API（须考虑script标签、documentFragment）

table.map(2).add(-2,'<tr><td></td><td></td><td></td></tr>') 类似这样可以向table特定位置里添加一行；documentFragment可以先将td等内容添加进这个文档碎片，然后再加入文档中；script标签没有想到是什么作用。

3  CSS操作

1，如何操作CSS的伪类和伪元素？

伪类：

<script>
var obj=document.getElementById("item2");
obj.style.color="#ff0000";
</script>

伪元素：

<style type="text/css"> 

li.classname：link{color：#ffffff}

</style>

类似这样，写在head里即可。

2，如何检测改浏览器是否支持某个CSS3的特性？ 

创建一个div，在style属性里的CSSStyleDeclaration里检测是否有想用的属性。

4  ajax操作

1，get和post的区别及使用要点

get应该只抓取信息，url中包含少量信息，需要缓存状态，比如cookie的支持；

post是将信息放入body并发送给服务器端，用来发送信息；

在客户端使用get请求时，服务器端使用Request.QueryString来获取参数，而客户端使用post请求时，服务器端使用Request.Form来获取参数。

2，http协议，包括格式、状态码，cookie操作

cookie可手动添加，现在一般都会用到类似Jsessionid之类的。格式和状态码是网络课学过的，但是忘了，大概200是成功，500是数据格式错误，404是地址没有找到，等待。

3，跨域

JQuery对于Ajax的跨域请求有两类解决方案，不过都是只支持get方式。分别是JQuery的 jquery.ajax jsonp格式和jquery.getScript方式；

详见这里。

4，转换JSON的几种方式，JSON.stringfy有什么使用限制？

转换Json有3种方式，首先是eval方式：

var json = eval('(' + str + ')'); 

然后是new function方式：

var json = (new Function("return " + str))(); 

最后是常用的Json.parse方式：

var json=JSON.parse(str);

stringify是将Json对象转换成字符串，IE67会出错，属性名现在都需要用引号引上，编码默认Unicode，中文有的时候会乱码，现在服务器会再自动转回中文的编码，所以很多时候不会出错。

5  性能

1，javascript有哪些性能优化的措施？可看《高性能javascript》 

这个挺多挺杂的，比如js结尾写分号，js脚本集中写在</body>之前紧挨着</body>，等等，还是挺有用的技巧。