浅聊JavaScript中的Hoisting(变量提升)

一直有写博客的想法但因为懒惰等各种情况没有付出实际行动，择日不如撞日，那就今天让我给大家简单归纳总结一下JavaScript中的Hoisting(变量提升)吧！

1.对于变量

//variables

console.log(me);
console.log(job);
console.log(year);


var me='Ascend';
let job='student';
const year=2001;

结果如下:

这里我们看到变量me可以输出出来但是值为undefined，但是job不可以(year也不可以)。

2.对于函数

//functions

console.log(addDecl(2,3));
console.log(addExpr(2,3));
console.log(addArrow(2,3));

function addDecl(a,b){
    return a+b;
}

const addExpr=function (a,b){
    return a+b;
}

const addArrow=(a,b)=>a+b;

结果如下:

当我把从const改为var后,

var addExpr=function (a,b){
    return a+b;
}

var addArrow=(a,b)=>a+b;

结果如下:

告诉我们addExpr不是一个函数,与之前的错误提示不同.奇怪了,这明明就是一个函数为什么不是呢?

于是我直接输出addExpr,

console.log(addExpr);

得到如下结果:

我们发现addExpr实际上的值为undefined,undefined当然不是一个函数了！可是为什么值是undefined呢，参考第一点中的me，输出仍为undefined，所以我们可以感觉好像对于var声明的变量或函数，在hoisting时候值均为undefined。

3.一个例子

// example

if(!numProducts) deleteShoppingCart();

var numProducts=10;

function deleteShoppingCart(){
    console.log(`All products deleted!`);
}

猜一猜输出结果?

跟上面一样，虽然在下面numProducts值为10，但是在hoisting时候初始值为undefined，所以上述结果就不奇怪了。

小小提示一下，在实际开发过程中，尽量不要使用var，用const和let足够了。

附：

类型	变量提升	初始值	作用域
函数声明	Yes	就是实际的函数本身	Block(块)
var变量	Yes	undefined	Function
let和const变量	No(从技术上讲,其实是有的；但实际上并没有，有点迷惑，不用管)	uninitialized,TDZ	Block(块)
函数表达式或者箭头函数	取决于使用let还是var声明函数(同上)	/	/