ES6 块级作用域

声明字面量

var obj = {
  name: 'why'
}

代码块

{
  var foo = 'foo'
}

ES5中只有两个东西会形成块级作用域

在es5中没有块级作用域

1. 全局作用域
2. 函数作用域

函数作用域中通过函数链，可以访问外部的变量

当有函数嵌套时，也是同样的道理，内部的函数可以通过函数链访问到外部的变量，而外部的不能够访问内部的变量

ES6 块级作用域

代码块对var不起作用,其他起作用

{
  var foo = 'foo'
  let bar = 'bar'
  const bar1 = 'bar1'
  
  class Person {}
}
console.log(foo) //foo

console.log(bar) //error
console.log(bar1) //error
var p = new Person() //error

函数在代码块中的特殊表现

{
  function demo () {
    console.log('demo function')
  }
}
demo() //demo function

为什么会这样，不是说代码块中外部无法访问吗❓ 答：不同的浏览器有不同的实行，大部分浏览器为了兼容以前的代码，让function是没有块级作用域的

常见的块级作用域

1. if语句

if (true) {
  var foo = 'foo'
  let bar = 'bar'
  const bar1 = 'bar1'
}

console.log(foo) //foo ✔️
console.log(bar) //error
console.log(bar1) //error

2. switch语句

var color = 'red'

switch(color) {
  case 'red':
    var foo = 'foo'
    let bar = 'bar'
    const bar1 = 'bar1'
}

console.log(foo) //foo 
console.log(bar) //error
console.log(bar1) //error

3. for循环语句

var 在for语句中

for (var i = 0; i < 1; i++) {
  console.log(`hello ${i}`)
}

console.log(i)

//hello 0
//1

let （const）在for语句中

for (let  i = 0; i < 1; i++) {
  console.log(`hello ${i}`)
}

console.log(i) //error

//hello 0