JavaScript的变量:变量提升

特别声明:小站已开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

在《JavaScript变量:变量声明》一文中了解了,在JavaScript中可以通过关键词varletconst来声明一个变量。并且提到过,使用letconst声明的变量不存在变量提升;而使用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):所有的作用域默认都会包含thisarguments
  • 函数形参(Formal parameters):函数有名字的形参会进入到函数体的作用域中
  • 函数声明(Function decalrations):通过function foo() {...}方式实现函数声明
  • 变量声明(Variable declarations):通过var foo;形式声明变量,当然在ES6中还增加了letconst声明变量(有关于更详细的介绍可以阅
剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/javascript/javascript-hoisting-in-details.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部