博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JavaScript之变量提升
阅读量:7004 次
发布时间:2019-06-27

本文共 1404 字,大约阅读时间需要 4 分钟。

场景

开始读es6的时候,一开始介绍的是let和const指令,文章中就提到一个概念 => 变量提升。原文是这样说的:let不像var那样会发生“变量提升”现象。对我这个菜鸟来说,what?什么是变量提升。经过一番度娘以后,有了个大概的概念和自己的理解。

理解

比较官方一点的解释这样的:JavaScript在工作时会先获取所有变量,然后再一行一行地执行代码。这就导致了所有变量声明的语句都会被提升到代码的最前面。这就是变量提升。

栗子

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

图片描述

很简单的一段代码,最终输出的是3。函数内的a覆盖了外面的变量a,var a;并没有刷新a的值,因为真正在运行时的顺序应该是这样的

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

我们可以看到,写在下面的声明a的语句被提前到了函数的最上面,所以最后输出的是函数内部的变量a而不是外面的a = 5

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

在这里又会发生什么呢?我们看一下运行结果:

图片描述

可能有人会说为什么打印的不是5呢?这就是变量提升的神奇之处,使用var声明的变量在运行时该声明语句会被放在当前当前作用域的最上面。这里又涉及到一个作用域的概念,暂时可以简单理解为一对大括号就是一个作用域。

所以上面的代码在运行时的顺序应该是这样的:

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

变量提升只是把声明语句提升上去,而赋值语句是不会被提升的。明显可以看到在函数内部还是新创建了一个变量a,但是在打印前都没有给a赋值,所以最后打印出来的值是‘undefined’

函数

除了变量提升意外,函数也是存在这样的现象,我们来看一段代码

// 代码一    fn()    function fn(){        console.log(0)    }        //代码二    fn()    var fn = function() {        console.log(0)    }

直接看结果:

图片描述图片描述

代码一运行正常,代码二就报错了。因为代码二的实际运行顺序其实这样的

var fn;    fn();    fn = function() {        console.log(0)    }

很显然,执行fn();之前fn只是一个变量,以函数的方式调用变量肯定是错误的用法。

注意:es6提出的新指令let和const是不会发生变量提升现象的,所以在使用es6语法时,一定要先声明再调用。

到此,本人知道的有关JavaScript的变量提升方面的知识就只有这么多,如果有幸这篇文章被你看到了,相信你看完以后也会对这个知识点有个大概的了解了。如果觉得有什么地方说得不对的,欢迎指正。

转载地址:http://zpytl.baihongyu.com/

你可能感兴趣的文章
leetcode - Merge Intervals
查看>>
Freertos之系统配置
查看>>
四年前从这里开始,四年后从这里继续-回归博客园
查看>>
node.js的作用、回调、同步异步代码、事件循环
查看>>
深入学习虚拟机类加载过程
查看>>
WPF笔记(2.6 ViewBox)——Layout
查看>>
Linux命令--删除软连接
查看>>
Nginx 错误汇总
查看>>
Maven将jar包放入本地库
查看>>
SnowNLP:一个处理中文文本的 Python 类库
查看>>
linux系统性能监视命令
查看>>
iOS: 悬浮的条件筛选下拉框的使用
查看>>
2016 SDCC会后总结
查看>>
学习ASP.NET Core, 怎能不了解请求处理管道[6]: 管道是如何随着WebHost的开启被构建出来的?...
查看>>
Chrome浏览器插件推荐大全
查看>>
在现有的图像处理软件中融合dxf格式输出
查看>>
2016-2017-1 《信息安全系统设计基础》第十一周课程总结
查看>>
ChartControl 折线图 柱状图
查看>>
拖动滚动条时某一处相对另一处固定不动(position:fixed)
查看>>
线性模型
查看>>