javascript声明提升

evin2016 发布于2019-08-23 16:15 / 3501人阅读

摘要：但是碰到声明提升，这种想法就会被打破。声明一个函数进行相应的操作，会得到函数声明提升的结果。由此可以发现变量和函数的声明都会被提升在其他代码的前面执行。一个普通块内部的函数声明通常会被提升到所在的作用域的顶部。的创建初始化和赋值均会被提升。

Javascript声明提升

在分析声明提升之前，我认为有必要知道的两点：

一、引擎查询变量的两种方式

引擎查询变量的方式可以分为LHS和RHS两种方式，通过“L”和“R”是可以大致了解意思，分别是赋值操作的左侧和右侧。（不能光是理解为“=”的左右侧可不行，因为赋值操作的形式有多种。）

简单说下我对这两种查询方式的理解：
LHS：赋值操作的目标是谁。 （查询变量）
RHS：谁是赋值操作的源头。 （查询变量的值）

这样说可能有些难以理解，举个栗子：

function foo(a){
    //这里存在一个隐式变量分配，LHS查询变量a，并赋值2.
    //隐式a = 2;
    //左边LHS查询变量b，查询作用域中是否存在b这个变量。
    //右边RHS查询变量a的值，将a赋值给b。
    var b = a;
    //返回a,b是RHS查询变量a的值和变量b的值并使用。
    return a + b;
}
//左边LHS查询变量c，查询作用域中是否存在c这个变量。
//右边RHS引用函数foo，将2作为参数传进去。
var c = foo(2);

二、异常

关于异常要强调一点，必须在严格模式下。因为在非严格模式下，LHS查询若是在最顶层的全局作用域上找不到查询的变量，则会创建一个该名称变量返还给引擎。

ReferenceError：同作用域判别失败相关。（比如：作用域中遍寻不到所需的变量）
TypeError：作用域判别成功了，但是对结果的操作是非法或不合理的。（比如：试图对一个非函数类型的值进行函数调用，或者引用null或undefined类型的值中的属性）

举个栗子：

"strict"
function foo() {
    console.log(a) //undefined
    console.log(b) //ReferenceError
}
var a = 2;

声明提升 一、初步了解

编写javascript代码时，很多时候都会觉得代码会自上而下的执行。但是碰到声明提升，这种想法就会被打破。

举个栗子：

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

运行结果为: 2

如果按照常理的自上而下执行，那么a执行的预期结果应当是undefined，然而为什么会是2？
这就是声明提升的结果。

二、进一步了解

当初步了解声明提升的时候，碰上下面的代码：

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

运行结果为：undefined

初步了解声明提升之后，会自然而然的认为，声明就会被提升，然而声明的时候赋值，却得不到变量的值。

其实，上面代码的运行步骤可以分解为：

var a; //声明提升
console.log(a); //打印a的值
a = 2; //对a进行赋值

原来，声明提升就是字面上的声明提升，其余的操作（如：赋值和其他逻辑）都还在原地踏步。

声明一个函数进行相应的操作，会得到函数声明提升的结果。由此可以发现：变量和函数的声明都会被提升在其他代码的前面执行。

三、逐步了解

通过几次试验可以逐步了解到，其实声明提升就是：变量和函数的声明会被提升在其他代码（当前作用域）的前面执行。

走到这里，有人就会想到，要是函数表达式，也会进行提升吗？

答案是：不会。而且，即使是具名函数表达式，在名称标识符赋值之前也是不能使用的。

举个栗子：

foo(); //TypeError
bar(); //ReferenceError
var foo = function bar(){};

代码分解为：

var foo; //变量声明提升
foo(); //foo对undefined值进行函数调用导致非法操作，故TypeError
bar(); //bar函数并没有声明，故ReferenceError
foo = function bar(){}; //对foo进行赋值

所以：函数表达式在名称标识符赋值之前是不能使用的。

注意：1、每个作用域都会进行提升操作。（所以函数内部形成的作用域也会有提升操作，提升操作仅限当前的函数内部作用域）
2、在函数和变量提升时，函数优先提升。
3、一个普通块内部的函数声明通常会被提升到所在的作用域的顶部。

四、深入了解

在阅读《你不知道的javascript》时，学习let的过程中，会发现有说明提到：使用let进行的声明不会在作用域中进行提升。声明的代码在被运行之前是，声明并不存在。

举个栗子：

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

运行结果是：ReferenceError: Cannot access "a" before initialization. //初始化前无法访问"a"

然后回到之前我运行的代码，将let换为var，返回的结果是undefined。

二者结合，再加上阅读我用了两个月的时间才理解let这篇文章，发现对let是否提升有了一个更新的认识。

作者把js变量分成三部分操作：创建（create）、初始化（initialize）和赋值（assign）。

上面的操作之所以会有不同的响应并不是说let没有创建，而是有一个初始化的过程并没有执行。而在初始化之前使用变量，就会形成一个暂时性死区。

经过var和let和function的测试可以总结到：

var的创建和初始化被提升，赋值不会被提升。

let的创建被提升，初始化和赋值不会被提升。

function的创建、初始化和赋值均会被提升。

GPU云服务器云服务器 js变量声明提升 javascript声明 javascript提升 javascript声明数组

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102824.html

浅析JavaScript中的提升

摘要：代码在执行时并不完全是由上到下一行一行执行的，由此产生了一个提升的问题。第二个赋值声明会被留在原地等待执行阶段。可以得知函数声明提升的优先权大于普通变量声明。 JavaScript代码在执行时并不完全是由上到下一行一行执行的，由此产生了一个提升的问题。什么是提升可以简单理解为：声明(变量和函数)都会被移动到各自作用域的最顶端,这个过程被称为提升。具体例子看提升下面两个例子a会l...

everfly 2019-08-21 17:54 评论0 收藏0
JavaScript 变量声明提升

摘要：输出的结果为输出的结果为提升后输出的结果为重新定义了变量输出的结果为如果定义了相同的函数变量声明，后定义的声明会覆盖掉先前的声明，看如下代码输出练习的值是多少的值是多少第二题的解析请看这里参考资料文章文章中文版链接文章推荐文章变量提升 JavaScript 变量声明提升原文链接一个小例子先来看个例子： console.log(a); // undefined var a =...

fireflow 2019-08-20 10:39 评论0 收藏0
(深究)声明提前(Hoisting)

摘要：有意思的是，这意味着变量在声明之前甚至已经可用。的这个特性被非正式地称为声明提前，即函数里声明的所有变量但不涉及赋值都被提前至函数体的顶部。但实际上会将其看成两个声明和。第二个赋值声明会被留在原地等待执行阶段。简介 JavaScript的函数作用域是指在函数内声明的所有变量在函数体内始终是可见的。有意思的是，这意味着变量在声明之前甚至已经可用。JavaScript的这个特性被非正式地...

陈伟 2019-08-22 18:18 评论0 收藏0
【6】JavaScript 函数高级——执行上下文与执行上下文栈、变量提升（图解+典型实例分析）

摘要：函数和变量相比，会被优先提升。这意味着函数会被提升到更靠前的位置。仅提升声明，而不提升初始化。 JavaScript 函数高级——执行上下文与执行上下文栈（图解+典型实例分析）变量提升与函数提升变量声明提升通过 var 定义（声明）的变量，在定义语句之前就可以访问到值：undefined /* 面试题 : 输出 undefined */ var a = 3 ...

niuxiaowei111 2019-08-23 17:19 评论0 收藏0
JavaScript变量提升

摘要：变量提升需要注意两点提升的部分只是变量声明，赋值语句和可执行的代码逻辑还保持在原地不动提升只是将变量声明提升到变量所在的变量范围的顶端，并不是提升到全局范围，说明如下会输出变量提升之后的效果函数声明会提升，但是函数表达式就不了。问题有些朋友可能会觉得javascript的代码是从上到下，一行一行的解释执行的。如果按照这样的思路，在有些情况下阅读代码会得到错误的结果，考虑以下代码： ...

Zoom 2019-08-21 10:44 评论0 收藏0