JavaScript中变量提升机制示例详解


Posted in Javascript onDecember 27, 2019

变量提升

JavaScript的变量提升有两种,用var声明的变量以及用function声明的变量。

用var声明的变量

我们先来看下面这段代码,a的值是多少

代码1

console.log(a);

var a;

按照以往编程语言的思路来看,代码自上而下运行,按这种思路,会报错,因为执行到第2行时,变量a还没有定义,所以会报错a is not defined

然而事实上答案是undefined

好,抱着疑惑,我们看下面的代码

var a;
console.log(a);

我们发现,这两段代码是一样的,那么又有一个新的问题,是不是有没有var a都无所谓,它的答案始终是undefined,才造成了以为变量会提升的错觉,于是我写了代码3

代码3

console.log(a);

好,它终于报错了,所以这证明了javaScript代码并不是自上而下执行的,至少从表面看上面是这样的。

于是我们再看代码4

代码4

console.log(a);
var a = 2;

因为变量提升嘛,所以答案是2,然而事实上,它依然是undefined,why?

这时候我们有请编译器这位负责语法分析及代码生成等脏活累活的大佬。

编译器在看到var a = 2;,它会将其看做两个声明,var a;和a = 2,第一个声明在编译阶段进行,第二个声明会被原地等待执行阶段。

也就是说上面代码,会变成下面的这段代码

var a;
console.log(a);
a = 2;

所以最终会是undefined

好,我在??乱幌拢?凑舛未??

代码5

a = 2;
var a;
console.log(a);

我想大家应该已经知道这段代码执行时的真正顺序及其答案了,没错,答案是2,但我想说的是把第2行给注释掉,答案依然是2,但这个和变量提升没啥关系了,是严格模式与非严格模式的锅,在非严格模式下允许开发者可以不使用声明变量的关键字,但在严格模式下是不可以的,它会报错的。

用function声明的变量

与var一样,function声明的变量依然会提升。

log(5);

function log(mes){
  console.log(mes)
}

按照之前的变量提升的理解,这段代码的真正顺序是这样的,

function log(mes){
  console.log(mes)
}

log(5);

很好,很正确,那么再看下一段代码

log(5);

var log = function(mes){
  console.log(mes)
}

它报错了,log is not a function,从这里我们可以看出,这种函数表达式是不会被提升的,只有函数声明才会被提升,试着在最前面新增一行代码console.log(log),会先输出undefined。

所以这里的真正顺序是

var log;
log(); //这时候只是声明了log这个变量,并不是函数,却用函数的方法调用它,所以会报错,说这不是一个函数。
log = function(mes){
  console.log(mes)
}

在function里用var声明变量

我们虽然知道,var声明的变量会提升,但并不知道会提升到哪个程度。

在此之前来看一段代码

var a = 4;

function foo(){
  var a = 5;
  console.log(a);

}
foo();

console.log(a)

答案是5,4,先输出5,再输出4。

用var声明的变量是有函数作用域的,所以foo里的a和foo外面的a没有任何关系,这种情况正是我想要的。

再改下代码

function foo(){
  a = 5
  console.log(a);
  var a;
}
foo();

console.log(a)

答案是5,a is not defined

第4行代码输出5,第9行报错。

这种情况就是变量提升只会提升到变量所在的 作用域的顶部,不会提升到父级作用域。

因此可以得出一个结论:变量提升只会将变量提升到自己所在的作用域的顶部

函数优先

既然用var和function的变量都有提升的功能,那如果同一个变量用这两种都声明会怎样,好吧,看标题就知道了,函数优先。

具体看下代码

foo();

var foo;

function foo(){
  console.log(1)
}

foo = function(){
  console.log(2)
}

答案是1

这段代码其实这样子的

function foo(){
  console.log(1)
}

foo();// 1

foo = function(){
  console.log(2)
}

仔细一看,var foo;没了,没错,它被引擎忽略了,认为重复声明所以把它抛弃了。

好,既然var声明的变量比不了函数声明,那就用函数声明,多次声明同个变量。

foo()
function foo(){
  console.log(1);
}
foo()
function foo(){
  console.log(2);
}
foo()
function foo(){
  console.log(3);
}

foo()

foo声明了三次,调用了四次,每次调用的结果都是3,所以最后的函数声明会覆盖之前的函数声明

但是var还想挣扎一下,觉得还是有必要证明自己的存在感的。

foo()
function foo(){
  console.log(1);
}
var foo;
foo()
foo = function(){
  console.log(2);
}
foo()
function foo(){
  console.log(3);
}

foo()

仔细看,中间那部分代码改了,依次输出3,3,2,2

虽然var foo被忽略了,但下面的函数还是有用的,这段代码可以看成是这样的

function foo(){
  console.log(3);
}

foo();//3
foo();//3
foo = function(){
  console.log(2);
}
foo();//2
foo();//2

在普通块内部声明函数

之前是在作用域声明函数,现在来块里面声明函数

function foo(){

  console.log(b); // undefined
  b(); //TypeError: b is not a function

  var a = true;

  if(a){
    function b(){
      console.log(2)
    }
    //下面这段代码和上面的结果一样
    // var b = function(){
 //      console.log(2)
 //    }
  }
  //b() --> 这里会被执行

}

foo()

从上面看上去,b是undefined,证明这个变量还是有的,只不过它并不是一个函数,这情况和用函数表达式差不多。

总结

  • 提升分为函数声明提升和变量声明提升
  • 声明变量用var,声明函数用function
  • 变量提升会将变量提升到自己所在作用域的顶部
  • 函数表达式不存在提升的机制。
  • 函数声明和变量声明同时声明同一个标识符时,函数声明优先
  • 多个函数声明同一个标识符时,最后一个声明覆盖先前的声明

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
Apr 24 Javascript
JavaScript实现图片轮播的方法
Jul 31 Javascript
JavaScript 最佳实践:帮你提升代码质量
Dec 03 Javascript
详解闭包解决jQuery中AJAX的外部变量问题
Feb 22 Javascript
详解webpack打包vue时提取css
May 26 Javascript
JS实现的走迷宫小游戏完整实例
Jul 19 Javascript
小程序ios音频播放没声音问题的解决
Jul 11 Javascript
iconfont的三种使用方式详解
Aug 05 Javascript
微信小程序实现笑脸评分功能
Nov 03 Javascript
12 种使用Vue 的最佳做法
Mar 30 Javascript
OpenLayers3实现测量功能
Sep 25 Javascript
Vue实现简单的留言板
Oct 23 Javascript
vue 中 elment-ui table合并上下两行相同数据单元格
Dec 26 #Javascript
Vue使用虚拟dom进行渲染view的方法
Dec 26 #Javascript
node.js Promise对象的使用方法实例分析
Dec 26 #Javascript
js回调函数仿360开机
Dec 26 #Javascript
js仿360开机效果
Dec 26 #Javascript
element-ui中按需引入的实现
Dec 25 #Javascript
原生JS实现顶部导航栏显示按钮+搜索框功能
Dec 25 #Javascript
You might like
php 归并排序 数组交集
2011/05/10 PHP
php实现的常见排序算法汇总
2014/09/08 PHP
php一个解析字符串排列数组的方法
2015/05/12 PHP
thinkphp微信开发(消息加密解密)
2015/12/02 PHP
不错的新闻标题颜色效果
2006/12/10 Javascript
JQuery 风格的HTML文本转义
2009/07/01 Javascript
Whatever:hover 无需javascript让IE支持丰富伪类
2010/06/29 Javascript
使用 JScript 创建 .exe 或 .dll 文件的方法
2011/07/13 Javascript
jquery sortable的拖动方法示例详解
2014/01/16 Javascript
php is_numberic函数造成的SQL注入漏洞
2014/03/10 Javascript
JavaScript模拟数组合并concat
2016/03/06 Javascript
全面介绍javascript实用技巧及单竖杠
2016/07/18 Javascript
jQuery焦点图轮播效果实现方法
2016/12/19 Javascript
用move.js库实现百叶窗特效
2017/02/08 Javascript
BootStrap Datepicker 插件修改为默认中文的实现方法
2017/02/10 Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/06 Javascript
js循环map 获取所有的key和value的实现代码(json)
2018/05/09 Javascript
Mac下通过brew安装指定版本的nodejs教程
2018/05/17 NodeJs
深入剖析JavaScript instanceof 运算符
2019/06/14 Javascript
jquery实现聊天机器人
2020/02/08 jQuery
用vue写一个日历
2020/11/02 Javascript
[02:38]2018DOTA2亚洲邀请赛赛前采访-VGJ.T
2018/04/03 DOTA
[48:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 VG vs KG
2018/03/31 DOTA
[47:36]Optic vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
在cmder下安装ipython以及环境的搭建
2018/10/19 Python
python-序列解包(对可迭代元素的快速取值方法)
2019/08/24 Python
Python 实现自动登录+点击+滑动验证功能
2020/06/10 Python
html5 更新图片颜色示例代码
2014/07/29 HTML / CSS
澳大利亚领先的在线美容商城:Adore Beauty
2017/04/14 全球购物
如何利用cmp命令比较文件
2016/04/11 面试题
小区门卫工作职责
2013/12/14 职场文书
大学生创业计划书的范文
2014/01/07 职场文书
财务经理岗位职责
2015/01/31 职场文书
幼儿园六一儿童节活动总结
2015/02/10 职场文书
中学生自我评价2015
2015/03/03 职场文书
2015年度环卫处工作总结
2015/07/24 职场文书