javascript变量提升详解

js变量提升

对于大多数js开发者来说,变量提升可以说是一个非常常见的问题,但是可能很多人对其不是特别的了解。所以在此,我想来讲一讲。

先从一个简单的例子来入门:

a = 2;
var a;

console.log(a);

你觉得以上的代码会输出什么?是输出undefined吗?如果是按照程序的自上而下执行的话,那么这一段代码确实是输出undefined。然而,javascript并不是严格的自上而下执行的语言

这一段代码的输出结果是2,是不是感到很意外?为什么会这样呢?这个问题的关键就在于变量提升(hoisting)。它会将当前作用域的所有变量的声明提升到程序的顶部,因此上面的代码其实等价于以下代码。这样是不是就很简单明了了。

var a;
a = 2;

console.log(a);

那么接下来,我们再来看这个例子。

console.log(a);

var a = 2;

你觉得以上的代码会输出什么?是直接报ReferenceError吗?还是输出2呢?

其实以上代码会输出undefined。为什么呢?我们之前说过,js会将变量的声明提升到顶部,可是赋值语句并不会提升。对于js来说,其实var a = 2是分为两步的:

  1. var a;
  2. a = 2;

而js只会将第一步提升到顶部,所以上面的语句等价于:

var a;

console.log(a);

a = 2;

为什么有变量提升

那么为什么会出现变量提升这个现象呢?

js和其他语言一样,都要经历编译和执行阶段。而js在编译阶段的时候,会搜集所有的变量声明并且提前声明变量,而其他的语句都不会改变他们的顺序,因此,在编译阶段的时候,第一步就已经执行了,而第二步则是在执行阶段执行到该语句的时候才执行。

变量声明

js的变量声明其实大体上可以分为三种:var声明、let与const声明和函数声明。

函数声明与其他声明一起出现的时候,就可能会引起一些困扰。我们来看下面的例子。

foo();

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

你觉得上面会输出什么?TypeError吗?其实输出的结果是foo。这就引出了我们的问题了,当函数声明与其他声明一起出现的时候,是以谁为准呢?答案就是,函数声明高于一切,毕竟函数是js的第一公民。

那么,下面的例子呢?

foo();

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

function foo() {
    console.log('2');
}

当出现多个函数声明,那怎么办呢?以上代码输出结果为2。因为有多个函数声明的时候,是由最后面的函数声明来替代前面的。

想必经历了以上的例子,你应该已经对变量声明已经有一定的了解了。那么我再来出一道题目来测试下。

foo();

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

这道题目是不是非常简单啊?这道题和上面的第二道例子其实是一样的。var foo = function() {}这种格式我们叫做函数表达式。

它其实也是分为两部分,一部分是var foo,而一部分是foo = function() {},参照例2,我们可以知道,这道题的结果应该是报了TypeError(因为foo声明但未赋值,因此foo是undefined)。

上面我们提到了var声明,函数声明,那么接下来我们来讲讲let和const声明呢。这个我之前写过一边文章,大家可以点击这里去查看下。

总结

那么接下来我们来总结一下。

  1. js会将变量的声明提升到js顶部执行,因此对于这种语句:var a = 2;其实上js会将其分为var a;和a = 2;两部分,并且将var a这一步提升到顶部执行。
  2. 变量提升的本质其实是由于js引擎在编译的时候,就将所有的变量声明了,因此在执行的时候,所有的变量都已经完成声明。
  3. 当有多个同名变量声明的时候,函数声明会覆盖其他的声明。如果有多个函数声明,则是由最后的一个函数声明覆盖之前所有的声明。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏一名合格java开发的自我修养

java或判断优化小技巧

写业务代码的时候,我们经常要做条件判断,有的时候条件判断的或判断长达20多个。reg.equals("1") || reg.equals("2") || reg...

611
来自专栏小詹同学

Leetcode打卡 | No.014 最长公共前缀

欢迎和小詹一起定期刷leetcode,每周一和周五更新一题,每一题都吃透,欢迎一题多解,寻找最优解!这个记录帖哪怕只有一个读者,小詹也会坚持刷下去的!

952
来自专栏take time, save time

初级程序员面试不靠谱指南(二)

3.read-only的const。如果你突然冒出一句看似很高深的话但又不解释一般都是装逼,就像前面提到过const准确的应该理解为一个read-only的变量...

2887
来自专栏大数据和云计算技术

由快速排序到分治思想

算法是基础,小蓝同学准备些总结一系列算法分享给大家,这是第一篇《由快速排序到分治思想》,非常赞!希望对大家有帮助,大家会喜欢! 快速排序是一种基于分治思想...

3466
来自专栏思考的代码世界

Python编程从入门到实践之使用字典|第6天

一个Python字典可能只包含几个键—值对,也可能包含数百万个键—值对。鉴于字典可能包含 大量的数据,Python支持对字典遍历。字典可用于以各种方式存储信息,...

3587
来自专栏python学习之旅

Python笔记(七):字典、类、属性、对象实例、继承

(一)  简单说明    字典是Python的内置数据结构,将数据与键关联(例如:姓名:张三,姓名是键,张三就是数据)。例如:下面这个就是一个字典 {'姓名':...

3825
来自专栏程序员的知识天地

Python里面这些点,据说80%的新手都会一脸懵逼

Python虽然语法简单,通俗易懂,但是再简单它也是一门语言,就像一棵大树,总有一些树枝是弯弯绕绕的,让新手看完之后一脸懵逼,今天我们就来说说这几个点,反正我学...

753
来自专栏coding for love

JS入门难点解析9-闭包的深入解析

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

642
来自专栏chenjx85的技术专栏

leetcode-91-解码方法(动态规划和递归两种解法)

1、这道题给定一个字符串,字符串中只含有数字,数字1可以解码为A,数字2可以解码为B……数字26可以解码为Z。

2974
来自专栏企鹅号快讯

Python入门基础连载(1)数据类型

Python入门很简单,应该说语法还是很简单明了,有一定C或者java或者别的语言基础的亲们都能明白。大数据,机器学习大势所趋,乘着这风,大家一起学习Pytho...

1996

扫码关注云+社区

领取腾讯云代金券