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

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

1.对于变量

//variablesconsole.log(me);
console.log(job);
console.log(year);var me='Ascend';
let job='student';
const year=2001;

结果如下:

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

2.对于函数

//functionsconsole.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.一个例子

// exampleif(!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声明函数(同上)	/	/

浅聊JavaScript中的Hoisting(变量提升)相关推荐

JavaScript 中的 Hoisting (变量提升和函数声明提升)
如何将函数声明 / 变量 "移动" 到作用域的顶部. 术语 Hoisting(提升) 在很多 JavaScript 博文中被用来解释标识符的解析.其实 Hoisting(提升) ...
浅聊JavaScript中的回调函数
Time will tell. 一.JavaScript中的函数在 JavaScript 中,函数也是一种 data,一种数据,只不过这种数据比较特殊,它里面存的是代码,而且这种data可以被调用执 ...
JavaScript中函数的变量提升问题
函数的大体分三种,一种是函数的声明,一种是函数表达式(又称为函数的字面量) 1.函数的声明 => function myFn(){}; 2.函数的表达式 => var myFn = fun ...
JavaScript 中的 hoisting 到底是甚麼 ?
JavaScript 中的 hoisting 到底是甚麼 ? 前言正文到底什麼是 hoisting? let const 與 hoisting 為什麼要有 hoisting? hoisting 到 ...
浅谈javascript中原型（prototype）、构造函数、对象实例及三者之间的关系
转自:http://www.cnblogs.com/zhangwei412827/archive/2012/12/14/2816263.html 浅谈javascript中原型(prototype). ...
html 滚动条 scrolltop scrollheight,浅谈JavaScript中scrollTop、scrollHeight、offsetTop、offsetHeight...
浅谈JavaScript中scrollTop.scrollHeight.offsetTop.offsetHeight 发布时间:2020-07-17 09:27:20 来源:亿速云阅读:223 作者 ...
浅聊EEG中的跨频率耦合CFC
浅聊EEG中的跨频率耦合CFC 我们知道,EEG信号可以分为delta.theta.alpha.beta.gamma等频带,而所谓的跨频率耦合(cross-frequency coupling, CF ...
浅谈JavaScript中的NaN
浅谈JavaScript中的NaN NaN概念以及简单案例追寻的纯粹该拥有自己的本质.-JC.F 什么是NaN? NaN:NaN(Not a Number),它表示不是数字,但是仍是数值类型. Na ...
JavaScript hoisting(变量提升)学习总结
定义:函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部. JavaScript 中,变量可以在使用后声明,也就是变量可以先使用再声明. 例如一下两个例子: 例1: ...

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

1.对于变量

2.对于函数

3.一个例子

浅聊JavaScript中的Hoisting(变量提升)相关推荐

最新文章

热门文章