重学JavaScript第1集|变量提升

Jacquelyn38
• 阅读 1533

变量提升就好比JavaScript引擎用一个很小的代码起重机将所有var声明和function函数声明都举起到所属作用域(所谓作用域,指的是可访问变量和函数的区域)的最高处。这句话的意思是:如果在函数体外定义函数或使用var声明变量。则变量和函数的作用域会提升到整个代码的最高处,此时任何地方访问这个变量和调用这个函数都不会报错;而在函数体内定义函数或使用var声明变量,变量和函数的作用域则会提升到整个函数的最高处,此时在函数体内任何地方访问这个变量和调用所定义的函数都不会报错。

示例如下:

console.log("gv1=" + gv); // 在声明前访问变量  
show();  
var gv = "javascript";  
console.log("gv2=" + gv);  
function(){  
 console.log("lv1= " + lv);  
 vat lv = "js";  
 console.log("lv2=" + lv);  
}  

输出结果:

gv1 = undefined;  
lv1 = undefined;  
lv2 = js;  
gv2 = javasript;  

在上述代码中,第一行迪马以及show函数中的第一行代码分别是在变量声明前访问了gv和lv变量,第二行代码在函数定义前,调用了show函数。从输出结果来看,上述代码在声明之前访问变量以及在定义前调用函数完全没问题,原因是变量提升。

上述代码在代码运行前,经过预解析处理后的代码逻辑如下:

var gv; // 变量声明提升到当前作用域的最高处  
var show = function show (){  
 var lv;  
 console.log("lv1=" + lv);//lv在声明时没有初始化,所以输出undefined  
 lv= "js";  
 console.log("lv2=" + lv); // 变量输出赋予的值: js  
}  
console.log("gv1=" + gv1); // gv在声明时没有初始化,所以输出undefined  
gv = "javascript";  
console.log("gv2=" + gv);//变量输出所赋予的值:javascript  

由上可见,正是因为var支持变量提升,所以可以在声明前使用var声明的变量,而let和const不支持变量提升,所以它们声明的变量必须先声明才可以使用。

一般来说,javascript代码的执行包括两个过程:预解析处理过程和逐行解读过程。在代码逐行解读前,javascript引擎需要进行带的预解析处理。在预解析过程中,当前作用域中var变量声明和函数定义将被提升到作用域的最高处。

下一集:预解析处理

  • 欢迎关注我的公众号前端历劫之路

  • 回复关键词电子书,即可获取12本前端热门电子书。

  • 回复关键词红宝书第4版,即可获取最新《JavaScript高级程序设计》(第四版)电子书。

  • 关注公众号后,点击下方菜单即可加我微信,我拉拢了很多IT大佬,创建了一个技术交流、文章分享群,期待你的加入。

  • 作者:Vam的金豆之路

  • 微信公众号:前端历劫之路

重学JavaScript第1集|变量提升

本文转转自微信公众号前端历劫之路原创https://mp.weixin.qq.com/s/3axoCYoLOC0S5oOSY18mQQ,如有侵权,请联系删除。

点赞
收藏
评论区
推荐文章
Souleigh ✨ Souleigh ✨
3年前
JS - 作用域
一、作用域作用域,即变量(变量作用域又称上下文)和函数生效(能被访问)的区域或集合换句话说,作用域决定了代码区块中变量和其他资源的可见性举个例子function myFunction(){    let inVariable  "函数内部变量";}myFunction();//要先执行这个函数,否则根本不知
Karen110 Karen110
3年前
一篇文章带你了解JavaScript作用域
在JavaScript中,对象和函数也是变量。在JavaScript中,作用域是你可以访问的变量、对象和函数的集合。JavaScript有函数作用域:这个作用域在函数内变化。一、本地JavaScript变量一个变量声明在JavaScript函数内部,成为函数的局部变量。局部变量有局部作用域:它们只能在函数中访问。JS://codeherecann
待兔 待兔
4个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
小嫌 小嫌
3年前
Javascript中的变量提升
定义JavaScript中奇怪的一点是你可以在变量和函数声明之前使用它们。就好像是变量声明和函数声明被提升了代码的顶部一样。sayHi()//Hithere!functionsayHi()console.log('Hithere!')name'JohnDoe'console.log(name)//JohnDoevarn
Jacquelyn38 Jacquelyn38
3年前
你所知道的JS变量作用域
变量的作用域,指的是变量在脚本代码中的可读、可写的有效范围,也就是脚本代码中可以使用这个变量的区域。在ES6之前,变量的作用域主要分为全局作用域、局部作用域(也称函数作用域)两种;在ES6及其之后,变量的作用域主要分为全局作用域、局部作用域、块级作用域这3种。相应作用域变量分别称为全局变量、局部变量、块级变量。全局变量声明在所有函数之外;局部变量是在函数体内
菜园前端 菜园前端
1年前
为你解惑JS作用域和作用域链知识
原文链接:变量作用域一个变量的作用域(scope)是程序源代码中定义这个变量的区域。全局变量拥有全局作用域,在JavaScript代码中的任何地方都是可以访问的。然而在函数内声明的变量只能在函数体内访问,它们是局部变量,作用域是局部性的。函数参数也是局部变
Stella981 Stella981
3年前
Javascript 变量 var与不var的区别
1.在函数作用域内加var定义的变量是局部变量,不加var定义的就成了全局变量。使用var定义var a  'hello World';function bb(){    var a  'hello Bill';    console.log(a);   }bb()   // 'hello Bill'conso
Stella981 Stella981
3年前
JavaScript之函数
    玩js自然要和函数打交到。函数嘛简单来说就是给代码分个块,方便调用、信息隐藏和代码复用,还可以用于指定对象的行为。另外函数还可以玩出很多花样来。。。JavaScript使用关键字function定义函数。定义一个函数://函数声明//这种定义函数的好处是可以在当前作用域内任何位置调用,因为变量的声明和函数的
Wesley13 Wesley13
3年前
ES6 简单整理
1.变量声明let和constlet与const都是块级作用域,letfunctionname(){letage12;//age只在name()函数中存在}constconstname'tom'name'jack'//
Wesley13 Wesley13
3年前
ES6的语法
一,定义变量let(类似var)在js一直有一个bug是var:1、var声明的变量会有变量提升console.log(name);//jhonvarname'jhon';2、var没有块级作用域varname2'jjjon';{varname2'tom';