前端面试必会题（二）--- js运行机制

刷题的开始和大家分享一下我比较喜欢的古诗，”长风破浪会有时，直挂云帆济沧海。——《行路难 其一》李白“，祝你成功！

js运行机制

        首先我们知道js一个核心特点或者说是一个高逼格，就是js为单线程，单线程通俗点来说，一段时间只能做一件事情，而其他事情只能放在任务执行队列里等待执行，为什么js是单线程的呢，这要在浏览器的发展史说起，在早期js就是与浏览器操作交互的脚本语言，只是处理一些简单的点击等操作，也就是操作dom，这里只能使用单线程，多线程的话，如果同时操作同一个dom，其中一个方法去删除这个dom，另一个方法添加这个dom，必然会造成dom执行冲突。
        接下来我们讲一下这个任务队列而任务队列中的任务又分为两种，一种为同步任务，像for，代码从上到下执行等；另一个为异步任务；事件，定时器，ajax、es6中的Promise等；当然会优先处理同步任务，
        当一段代码从上到下执行，同步则立即执行，遇到异步任务，就放在异步任务里，直到所有同步任务执行完成，才会执行异步任务。
        给大家看一个例子同步和异步任务,现有一个ul里面有四个li想要点击li分别显示li的索引
dom代码如下和js代码如下

<ul>
	 <li>1</li>
	 <li>2</li>
	 <li>3</li>
	 <li>4</li>
</ul>

    var eleLi = document.getElementsByTagName('li');
    for(var i = 0; i < eleLi.length; i++){
       eleLi[i].onclick=function(){
        alert(i);
    }
 }

以上代码只会弹出依次弹出4，4，4，4
简单解释一下， 上面for循环是同步任务，onclick点击事件是异步任务，因为等同步任务执行完成才能执行异步任务，所以等for循环执行完了，i变成4了，注意这里i为全局变量
解决办法
解决办法我知道的有三种（闭包、立即执行函数和用到es6里的let）在此给大家介绍其中一种
将var改成es6里let关键字去声明即可，因为let声明的变量只在所在的代码块内有效，也就是说声明的是局部变量。

    var eleLi = document.getElementsByTagName('li');
    for(let i = 0; i < eleLi.length; i++){
       eleLi[i].onclick=function(){
        alert(i);
    }
 }

到此问题解决