深入了解JavaScript中let/var/function的变量提升

目录
  • 前言
  • 1. let存在提升
  • 2. var/function的变量提升
    • 2.1 var的变量提升
    • 2.2 function的变量提升
  • 3. 总结

前言

在我们的印象中，当提到JavaScript中的变量提升，我们想到的是“变量和函数的声明在物理层面移动到代码的最前面“。当然这么说不大准确，变量和函数声明在代码里的位置是不会变的，而是在编译阶段被放入内存中。

可是如果我问你：let 到底有没有提升？如果有，var / let / function三者的变量提升一致吗？此时你的答案是什么？

接下来让我们来探讨这两个问题，如有错误敬请指正。

1. let存在提升

对于let是否存在提升这个问题，让我们先来看以下这段代码：

a = "global";
(function() {
    console.log(a); // undefined, 而不是打印出global
    var a;
}());

{
    console.log(a); // Uncaught ReferenceError: Cannot access 'a' before initialization
    let a = 1;
}

对于在函数作用域下打印出undefined，我们应该不奇怪。但引起我注意的是在块作用域下，抛出引用错误的原因是在初始化之前找不到a。那有没有可能a在创建过程被提升？而在我发现ES文档中存在[var/let hoisting]，这让我有理由猜测let存在提升，只是由于暂时性死区的原因，我们不能在let a之前使用 a。

为了证明我的猜想，我想先从let声明的创建、初始化和赋值过程入手。

{
  let a = 0;
  a = 1;
}

上述的代码块中发生的过程如下：

  • 找到所有用let声明的变量，在环境创建变量；
  • 执行代码；
  • 执行a=0，将a初始化为1；
  • 执行a=1，对a进行赋值。

由该过程可知，如果我们在创建完变量后和初始化之前执行log()方法，控制台将会报错：

let a = 'global'
{
  console.log(a) // Uncaught ReferenceError: Cannot access 'a' before initialization
  let a = 1
}

由此一来我们就可以知道了let在创建的过程被提升，而在初始化过程没有被提升。

2. var/function的变量提升

接下来我们来看看function/var的创建、初始化和赋值过程，由此看看能否探究出它们的差别。

2.1 var的变量提升

function foo() {
  console.log(a);  // undefined
  var a = 0;
  var b = 1;
}
foo();

当我们执行foo()时，发生以下过程（较为省略）：

  • 为foo创建环境；
  • 找到foo中所有被var声明的变量，在这个环境中创建变量；
  • 将变量初始化为 undefined;
  • 执行代码；
  • 将a赋值为0，b赋值为1。

由此我们可以知道var声明在代码执行前创建变量并初始化，所以当我们在var a = 0之前执行log(a)方法会得到 undefined 的结果。

2.2 function的变量提升

foo('btqf');

function foo(name) {
  console.log("my name is" + name)  // my name is btqf
}

当我们执行foo函数时，发生以下过程：

  • 找到所有function声明的变量，在环境中创建变量；
  • 将这些变量初始化并赋值;
  • 执行代码。

由此可见，function声明在代码执行前就创建、初始化并赋值。

3. 总结

  • let 的「创建」过程被提升了，但是初始化没有提升。
  • var 的「创建」和「初始化」都被提升了。
  • function 的「创建」「初始化」和「赋值」都被提升了。
  • 函数和变量相比，会被优先提升，即函数会被提升到更靠前的位置。

值得一提的是const与let基本类似，唯一的区别在于const只有创建和初始化，没有赋值过程。

到此这篇关于深入了解JavaScript中let/var/function的变量提升的文章就介绍到这了,更多相关let/var/function变量提升内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Javascript var变量隐式声明方法

    诸如此类.这有一个问题,比如说在代码中的某一行,我想使用的一个已声明的变量x,结果由于打字或者拼写错误,这个变量被写成y了,结果相当于"隐式"声明了一个变量y,在实际编程过程中,这种错误有时比较难以发现. 除此之外,今天通过同事介绍,了解到这种"隐式声明"中的别外一个问题. 当你在当前上下文内进行这种"隐式"声明时,JavaScript引擎会先在当前上下文中寻找是否之前有声明此变量,如果没有,再到上一级的上下文中去寻找,如果一直未找到,会最后在w

  • 浅谈JS中var,let和const的区别

    目录 区别1 区别2 区别3 区别4 区别5 区别6 区别7 区别1 let和var用来声明变量,const用来声明常量. 变量就是赋值后可以改变它的值,常量就是赋值后就不能改变它的值. 当声明为对象时,可以直接修改对象内的属性值 const age = 26; age = 36; // TypeError: 给常量赋值 // const声明的作用域也是块 const name = 'Matt'; if (true) { const name = 'Nicholas'; } console.lo

  • 小程序中使用css var变量(使js可以动态设置css样式属性)

    使用sass,stylus可以很方便的使用变量来做样式设计,其实css也同样可以定义变量,在小程序中由于原生不支持动态css语法,so,可以使用css变量来使用开发工作变简单. 基本用法 基础用法 <!--web开发中顶层变量的key名是:root,小程序使用page--> page { --main-bg-color: brown; } .one { color: white; background-color: var(--main-bg-color); margin: 10px; } .

  • javascript的var与let,const之间的区别详解

    javascript的var与let,const之间的区别详解

    目录 作为全局变量时 变量提升 暂时性死区 块级作用域 重复声明 修改声明的变量(常量与变量声明) 总结 说到JavaScript中声明变量的几种方法也就是var.let.const了,let和const是es6中新增的命令.那么它们之间有什么区别呢? 我们先整体说一下三者的区别,在详细介绍,var.let.const的区别主要从以下几点分析: 作为全局变量时的不同 变量提升 暂时性死区 块级作用域 重复声明 修改声明的变量 作为全局变量时 在ES5中,顶层对象的属性和全局变量是等价的,用var

  • Javascript var变量删除原理及实现

    var有三种声明的情形: var声明的全局变量 var在函数范围内声明的局部变量 eval中声明的全局变量. 首先, 1.2种情形var声明的变量是无法删除的. 尽管var声明的全局变量是属于window对象的属性(在浏览器中),但依然是无法删除的,因为这种属性的configurable=false,因此不能delete掉. 局部变量就更不用说了,连var变量依附的对象都不知道在哪里,肯定无法删除. 而eval('vara=1')看似和直接var是一样的效果(当然是在全局作用执行eval),执行

  • JavaScript中var与let的区别

    目录 1.作用域表现形式不同 2.是否变量提升的区别 3.暂时性死区上的区别 4.在同一个上下文中var可以重复声明,let不行 前言: var是JavaScript刚出现时就存在的变量声明关键字,而let作为ES6才出现的变量声明关键字,无疑两者之间存在着很大的区别.那么具体有哪些区别呢? 1.作用域表现形式不同 var是函数作用域,let是块级作用域 { var monkey='熏悟空'; let pig='猪扒盖'; } console.log(monkey); //输出undefined

  • 深入了解JavaScript中let/var/function的变量提升

    目录 前言 1. let存在提升 2. var/function的变量提升 2.1 var的变量提升 2.2 function的变量提升 3. 总结 前言 在我们的印象中,当提到JavaScript中的变量提升,我们想到的是“变量和函数的声明在物理层面移动到代码的最前面“.当然这么说不大准确,变量和函数声明在代码里的位置是不会变的,而是在编译阶段被放入内存中. 可是如果我问你:let 到底有没有提升?如果有,var / let / function三者的变量提升一致吗?此时你的答案是什么? 接下

  • javascript中加var和不加var的区别 你真的懂吗

    Javascript是遵循ECMAScript标准下的一个产物,自然ECMAScript的标准其要遵循. 先来看下var关键字的定义和用法 var 语句用于声明变量. JavaScript 变量的创建也叫作"声明"一变量: 复制代码 代码如下: var carName; 变量声明后,变量为空 (没有值). 为变量复制,操作如下: 复制代码 代码如下: carName = "Volvo"; 声明变量时,你同样可以为变量赋值: 复制代码 代码如下: var carNam

  • 简单了解JavaScript中的new Function

    目录 前言 1.语法 01).无效的 JSON 对象字符串合法化 02).模板字符串作为模板 前言 JavaScript技术一直处于不断发展壮大中,如果你是前端开发人员或者JavaScript开发工程师,那么,今天这个知识点,你有必要认真了解一下,它就是“new Function”. 1.语法 语法如下: let func = new Function ([arg1, arg2, -argN], functionBody); 最后一个参数必须是函数体,其余参数作为传递给函数体的参数. 例如: l

  • javascript中万恶的function实例分析

    javascript中最有特色而又让你困惑的function算一个了 下面看一下常用操作 复制代码 代码如下: function doit(){ ..... } doit(); javascript中的函数我们可以把它当作方法使用 复制代码 代码如下: var obj=new Object(); obj.say=function(){ ..... } obj.say(); 而function实际上就是对象(即Function类型的实例) 复制代码 代码如下: function result(nu

  • JavaScript中Object和Function的关系小结

    Function instanceof Object 和 Object instanceof Function 都是 true 1.我们可以认为 Object 是一个特殊的"类",而这里的"类"即:Function 于是便可以理解为: Object = Function () {} 或 Object = new Function(); 即:Object 是 Function 的一个实例,所以,Object 原型链中便包含 Function.prototype,得出:

  • 浅谈Javascript中Object与Function对象

    1.Object对象 原型对象           原型是对象的一个属性,也就是prototype属性,每个对象都有这个内部属性,而且他本身也是一个对象. <script type="text/javascript"> Object.prototype.num= 10; alert("添加原型对象属性:"+ Object.num); Object.num = 20; alert("添加对象属性:"+Object.num); </

  • JavaScript中函数（Function）的apply与call理解

    JavaScript函数调用分为4中模式: 1. 方法调用模式:即对象包含方法属性,Obj.methodName()或者Obj[methodName](). 2. 函数调用模式:即methodName(). 3. 构造器调用模式:即new MethodName(). 4. apply和call调用模式:即ObjA.apply(ObjB,args[])或者ObjA.call(ObjB,arg1,arg2...). 函数调用时,除了接收形式参数外,还会接收this和arguments.其中this为

  • 验证javascript中Object和Function的关系的三段简单代码

    话说在楼猪理解和实践能力尚欠火候的时候,在这篇里曾经照搬了李战老师不少东西写在自己的博客里作为"知识储备".这一次还是不能免俗.在翻到第5章的时候,被开篇第二段话深深吸引和折服:"函数具有对象的全部特征,你完全可以把函数当对象调用.其实,函数就是对象,只不过比一般的对象多了一个括号"{}"操作符,这个操作符用来执行函数的逻辑,即函数本身还可以被调用,一般对象却不可以被调用,除此之外完全相同".寥寥数语,却深刻阐释了对象和函数的关系.下面楼猪就通过

  • JavaScript中全局变量、函数内变量以及常量表达式的效率测试

    JavaScript中全局变量、函数内变量以及常量表达式的效率测试

    var r, s = "this is a very very looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong string", x = /^\s+|\s+$/g; document.writeln("字符串测试 "); (function(){ document.write("全局->全局:"); var t = new Date(); for(

  • JavaScript中函数声明优先于变量声明的实例分析

    复制代码 代码如下: var a; // 声明一个变量,标识符为a function a() { // 声明一个函数,标示符也为a } alert(typeof a); 显示的是"function",即function的优先级高于var. 有人觉得这是代码顺序执行的原因,即a被后执行的funcion覆盖了.好,将它们调换下. 复制代码 代码如下: function a() { } var a; alert(typeof a); 结果仍然显示的是"function"而

随机推荐