如何理解javascript变量提升

记住以下两点会对了解javascript有帮助：

1. javascirpt是编译语言

2. 它会在代码运行前编译

变量提升

javascript引擎在编译js代码的时候会先将变量和函数申明放入内存中，执行代码时就会被认为是变量提升。

我们来解析如以下代码：

showAnimal() // This animal is undefined
console.log(animal) // undefined
var animal = 'cat'
function showAnimal() {
    console.log('This animal is ' + animal);
}

javascript引擎会在编译过程中将变量animial与函数showAnimal放到变量环境中，方便调取。在执行代码的时候查看作用域中是否有该变量或函数。
上边这段代码在执行阶段就可以做如下解析：
  第一步：判断showAnimal是否有申明，这时候js引擎已经将该函数放到变量环境中，那么执行函数。
  第二步：执行showAnimal函数时查看该函数变量环境中是否有animal变量申明，发现没有，则到上一级变量环境中查看，发现有这个变量，但值为undefined。所以打印结果为This animal is undefined。
  第三步：执行console.log(animal)，查找变量环境发现有这个变量，但值是undefined。所以打印结果是undefined。
  第四步：给变量赋值为cat。
总结： 所谓的变量提升，是指在 JavaScript 代码执行过程中，JavaScript 引擎把变量的声明部分和函数的声明部分提升到代码开头的“行为”。变量被提升后，会给变量设置默认值，这个默认值就是我们熟悉的 undefined。（引用自极客时间《浏览器工作原理与实践》）

附：同名变量和函数的处理原则（引用自极客时间《浏览器工作原理与实践》）
1.同名函数在javascript编译阶段中会选择最后声明的函数；
2.变量和函数同名，javascript编译时变量声明会被忽略。