JavaScript的单线程特性

1.为什么JavaScript是单线程？

JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事，而为什么是单线程呢？这里引用一下阮一峰老师的博客，原文地址：http://www.ruanyifeng.com/blog/2014/10/event-loop.html                                                                 

简单来说JavaScript的单线程，与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？

 

2.JavaScript中单线程实例

这里以慕课JavaScript进阶篇的编程练习(9-22小节)为例：制作一个表格，显示班级的学生信息。要求鼠标鼠标移到不同行上时背景色改为色值为 #f2f2f2，移开鼠标时则恢复为原背景色 #fff  下图为表格的样式：

                        

 
    
     
  
  
	   

	   

		
学号
		
姓名
		
操作
	   
  
	   

		
xh001
		
王小明
		
删除
   
	   
	   

		
xh002
		
刘小芳
		
删除
   
	   
  
	   
 

面对这个问题我是怎么解决的呢？首先我想到的是获取每一行，并为每行添加事件以及背景颜色，核心代码如下：

 // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
    var x = document.getElementsByTagName('tr');
        for(var i = 0;i

看上去很正确是不是，可是这就出问题了，运行后浏览器就显示x[i]对象未定义??？ 一脸懵啊。。。

我在查找了相关资料后，才发现JS具有单线程的特性。那么我们再来解释一下上一段代码：在执行过程中，先遇到for循环，for循环先进入线程。当i=0时，循环走到另一个函数x[i].onmouseover = function(){...}后，此时的for循环还没有执行完成，这个新函数就会被放入一个地方（线程池）等待执行。此时for循环继续执行，当i=1时，for循环仍没有执行完，这时的这个新函数仍会被放在线程池中等待执行……依次类推，直到for循环转完2遍后，for循环执行完了，此时线程空闲了，在线程池中等待执行的onmouseover和onmouseout事件函数就可以拿出来执行了，而for循环执行完成后，i变成了2。同又时由于事件函数中x[i]未定义，根据JavaScript作用域链的知识，x[i]将会由父级for循环中的x[i]所定义，所以就会出现浏览器中提示的x[i]对象未定义问题。

那么问题如何解决呢？我想了两种方法：

1. 将for循环中var x = 0 改为 let x = 0(区分let和var也是很重要的知识点！！！)
2. 将两个function中x[i].style.backgroundColor改为this.style.backgroundColor（这里的this就是触发事件的对象）

这里解决方案写得比较简单，一是因为这篇博文主要是想记录下什么是JavaScript中的单线程特性，其次是因为这两个方法又使用到了其他知识点，我还是想放在另外的博文中进行详细的总结，最后也欢迎大家都交流指正。