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 相关文章推荐
js实现图片旋转的三种方法
Apr 10 Javascript
jQuery将多条数据插入模态框的示例代码
Sep 25 Javascript
jQuery实现的支持IE的html滑动条
Mar 16 Javascript
jQuery基于ajax()使用serialize()提交form数据的方法
Dec 08 Javascript
input框中的name和id的区别
Nov 16 Javascript
jQuery基于Ajax方式提交表单功能示例
Feb 10 Javascript
Angular2库初探
Mar 01 Javascript
Bootstrap实现各种进度条样式详解
Apr 13 Javascript
Vue响应式原理深入解析及注意事项
Dec 11 Javascript
AngularJS对动态增加的DOM实现ng-keyup事件示例
Mar 12 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
Apr 28 Javascript
详解基于element的区间选择组件校验(交易金额)
Jan 07 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字符编码转换之gb2312转为utf8
2013/10/28 PHP
ThinkPHP登录功能的实现方法
2014/08/20 PHP
CI框架验证码CAPTCHA辅助函数用法实例
2014/11/05 PHP
php 中的closure用法详解
2017/06/12 PHP
yii2.0整合阿里云oss上传单个文件的示例
2017/09/19 PHP
PHP数组去重的更快实现方式分析
2018/05/09 PHP
PHP获取MySQL执行sql语句的查询时间方法
2018/08/21 PHP
javascript代码编写需要注意的7个小细节小结
2011/09/21 Javascript
改进版通过Json对象实现深复制的方法
2012/10/24 Javascript
JS创建类和对象的两种不同方式
2014/08/08 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
2015/06/05 Javascript
JS实现图片高亮展示效果实例
2015/11/24 Javascript
JQuery的attr 与 val区别
2016/06/12 Javascript
JavaScript使用readAsDataURL读取图像文件
2017/05/10 Javascript
node.js+captchapng+jsonwebtoken实现登录验证示例
2017/08/17 Javascript
详解vue中使用express+fetch获取本地json文件
2017/10/10 Javascript
JS构造一个html文本内容成文件流形式发送到后台
2018/07/31 Javascript
如何在Vue.js中实现标签页组件详解
2019/01/02 Javascript
详解wepy开发小程序踩过的坑(小结)
2019/05/22 Javascript
js实现随机数小游戏
2019/06/28 Javascript
vue 微信扫码登录(自定义样式)
2020/01/06 Javascript
Vue $emit()不能触发父组件方法的原因及解决
2020/07/28 Javascript
微信小程序实现通讯录列表展开收起
2020/11/18 Javascript
python用ConfigObj读写配置文件的实现代码
2013/03/04 Python
python使用WMI检测windows系统信息、硬盘信息、网卡信息的方法
2015/05/15 Python
Python上传package到Pypi(代码简单)
2016/02/06 Python
python生成二维码的实例详解
2017/10/29 Python
Python设计模式之备忘录模式原理与用法详解
2019/01/15 Python
django 简单实现登录验证给你
2019/11/06 Python
Python Selenium参数配置方法解析
2020/01/19 Python
护理专科自荐书范文
2014/02/18 职场文书
意向协议书范本
2014/04/23 职场文书
“5.12”护士节主持词
2015/07/04 职场文书
古诗之感恩老师
2019/10/24 职场文书
matplotlib画混淆矩阵与正确率曲线的实例代码
2021/06/01 Python
使用GO语言实现Mysql数据库CURD的简单示例
2021/08/07 Golang