JavaScript中var变量异常行为咨询：if块覆盖外层而函数块不覆盖？

核心原因是var声明的变量遵循函数级作用域规则：只有函数执行时会创建独立的作用域隔离var变量，普通代码块（if/for/while等的花括号包裹区域）不会为var创建独立作用域。

• if块内的fruit覆盖外层变量的原因
  你的代码运行在全局作用域下，if块属于普通代码块，没有隔离var变量的能力。块内var fruit = "mango"的声明本质是重复声明了同一个全局作用域下的fruit变量，赋值操作直接修改了全局变量的值，所以块外打印fruit拿到的是修改后的mango。

• 函数块内的color不覆盖外层变量的原因
  displayColor是函数，内部会创建独立的函数作用域，函数内用var color = "red"声明的是当前函数作用域下的局部变量，和全局作用域下的color是两个毫无关联的独立变量，赋值只会影响函数内部的局部变量，所以函数执行结束后全局的color值还是原来的blue。

补充说明：ES6标准推出的let和const关键字支持块级作用域，如果你把if块内的var fruit替换为let fruit，就不会出现外层变量被覆盖的情况。

内容的提问来源于stack exchange，提问作者Akash Takawale