特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)
在《JavaScript变量:变量声明》一文中了解了,在JavaScript中可以通过关键词var
、let
和const
来声明一个变量。并且提到过,使用let
和const
声明的变量不存在变量提升;而使用var
声明的变量存在变量提升。那么什么是变量提升,这篇文章主要来介绍的就是这方面的知识。
JavaScript代码的运行规则
在JavaScript代码运行之前其实是有一个编译阶段的。编译之后才是从上到下,一行一行解释执行。这样一来也给初学者造成很大的误解。初学者会觉得JavaScript的代码是从上到下,一行一行的解释执行的。按这样的思路,在有些情况下就会造成惨案:
name = "W3cplus";
var name;
console.log(name);
按照代码从上到下一行一行解释执行的说法,有些同学可能会觉得console.log(name)
输出的值是undefined
。那是因为name = "W3cplus"
在var name
之前,变量name
被重新定义了,而且没有给其赋值,所以认为此时name
的值是undefined
。输出的也应该是undefined
。但事实上输出的值是"W3cplus"
。下图是Chrome浏览器调试器下的输出结果:
再来看一段代码:
console.log(name);
var name = "W3cplus";
当初我就以为它输出的结果是Uncaught ReferenceError: name is not defined(…)
。因为变量name
在没有声明的情况下就被使用了。而事实上呢,并如如此,它输出的结果是undefined
。如下图所示:
为什么会这样呢?因为JavaScript代码运行时,它把变量和函数的声明提升至作用域的顶端。而这个阶段就发生了变量提升。同时JavaScript在编译阶段的工作之一就是将变量与其作用域进行关联。那么要彻底的理解JavaScript声明提升,需要对JavaScript的变量作用域有一定的了解。
JavaScript变量作用域
对于JavaScript的初学者来说,变量作用域是最令人感到困惑的一部分。有关于JavaScript中变量的作用域,本文不做介绍,因为要说清楚它,需要大幅篇幅,而且对于我这样的新手也道不清说不明。拿张图向大家简单的展示一下:
在JavaScript中,变量有4种基本方式进入作用域:
- 语言自身定义(Language-defined):所有的作用域默认都会包含
this
和arguments
- 函数形参(Formal parameters):函数有名字的形参会进入到函数体的作用域中
- 函数声明(Function decalrations):通过
function foo() {...}
方式实现函数声明 - 变量声明(Variable declarations):通过
var foo;
形式声明变量,当然在ES6中还增加了let
和const
声明变量(有关于更详细的介绍可以阅
如需转载,烦请注明出处:https://www.w3cplus.com/javascript/javascript-hoisting-in-details.html
如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!