变量提升 Hoisting

好家伙，今天突然想到var和let的区别又忘了，上网一搜发现一道非常简单的作用域的问题。

var a = 99;            // 全局变量a
f();                   // f是函数，虽然定义在调用的后面，但是函数声明会提升到作用域的顶部。 
console.log(a);        // a=>99,  此时是全局变量的a
function f() {
  console.log(a);      // 当前的a变量是下面变量a声明提升后，默认值undefined
  var a = 10;
  console.log(a);      // a => 10
}

答案是

undefined

10

99

属实是没整明白一开始undefined是怎么来的。便速速去看了下关于变量提升的知识。

变量提升（Hoisting）是在JS执行上下文阶段的产生的一个概念。从物理层面理解，便是在编译阶段，会将未声明但却被调用的变量事先声明存储在内存当中。举个例子：

/**
* 不推荐的方式：先调用函数，再声明函数
*/

catName("Chloe");

function catName(name) {
    console.log("我的猫名叫 " + name);
}

/*
代码执行的结果是: "我的猫名叫 Chloe"
*/

console.log(num); // Returns undefined
var num;
num = 6;

num = 6;
console.log(num); // returns 6
var num;

注意看以上几种例子，可以分为三种：函数声明提升、变量声明提升、变量赋值后声明提升。

最后一个例子之所以能够输出6，是因为在编译时，事先存储变量num，而后执行赋值操作，到console.log前num变量已经存放了6。

 

然后，关于var和let的操作，就是let是es6里所更新的用于块级作用域下能够声明局部变量。而var是es6之前来声明所有变量的。补充一点，es6新增了const，它和let类似都是用于定义局部变量的。但是它不能被更改，是常量的定义方式。

 

 

源地址：

https://developer.mozilla.org/zh-CN/docs/Glossary/Hoisting

https://www.freecodecamp.org/news/var-let-and-const-whats-the-difference/