那些年，变量和作用域犯下的错

ES5的全局作用域和函数作用域

• 外层变量被内层变量覆盖

  var name = 'adiu'
  while (true) {
    console.log(name)   // 'adiu'
    var name = 'xiaoming'
    console.log(name)  // 'xiaoming'
    break
  }
  console.log(name)  // 'xiaoming'
  

  var name = 'adiu'
  function getName () {
    console.log(name)
    var name = '小明'
  }
  getName()  // undefined
  console.log(name)  // 'adiu'
  

• 用来计数的循环变量泄露为全局变量

  var name = 'adiu'
  for (var i = 0; i < name.length; i++) {
    console.log(name[i])
  }
  console.log(i)  // 4
  

  总结：在全局作用域或函数作用域中通过 var 声明的变量，会被提到当前作用域的最顶部（不进行初始化）

ES6块级作用域

• 外层变量不受内层变量的影响

  let name = 'adiu'
  while (true) {
    console.log(name)   // name is not defined
    let name = 'xiaoming'
    break
  }
  

• let 声明的变量仅在块级作用域内有效

  let name = 'adiu'
  for (let i = 0; i < name.length; i++) {
    console.log(name[i])
  }
  console.log(i)  // i is not defined
  

如果你是一个前端小白或是一个初入职场的前端开发工程师，觉得对你有所帮助，请关注以下公众号，查看更加精彩知识文章！

重修前端.jpg