作用域的面试题

a）

var a = 1
function f1(){
  f2.call()
  console.log(a) // undefined
  var a=2
  function f2(){
    var a = 3
    console.log(a)
  }
}
f1.call()
console.log(a)

需要打印的那一句代码是在f1作用域范围内，这个作用域内重新声明了a，那么采用这个a，a需要进行变量提升，提升到所有操作语句的前面，所以这时候打印出来的是还没赋值的a。
等同于代码：

var a = 1
function f1(){
  var a
  function f2(){
    var a 
    a=3
    console.log(a)
  }
  f2.call()
  console.log(a) // undefined
  a=2
}
f1.call()
console.log(a)

根据调整后的代码，才是正常的执行顺序，这时的a还没有赋值。

---

b）

var a = 1
function f1(){
  console.log(a)
  var a = 2 //只在f1的作用域中使用
  f4.call()
}
function f4(){
  console.log(a)  //1
}
f1.call()
console.log(a)

这里的a=2只在f1的作用域使用，是不会在f4中使用的。

---

c）

var a = 1
function f4(){
  console.log(a)
}
??? 
f4.call()

问： ？？？处存在一行代码可以使得f4中的a！==1吗？
存在！比如：a=2,这句代码会在f4之前执行，这时候f4中的a就变成了2。

---

d）最容易出错的代码
html代码：

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

JS代码：

var liTags = document.querySelectorAll("li")
for(let i=0;i< liTags.length;i++){
  liTags[i].onclick = function(){
    console.log(i)  //6
  }
}

在页面上不管点击哪个li，都打印出来的是6，因为此时这个循环已经走完了。