Javascript 基础篇一：javascript 声明提升

桃扇骨 2022-02-21 10:05 243阅读 0赞

# 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]这篇文章，发现对let是否提升有了一个更新的认识。

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

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

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

1.  **var的创建和初始化被提升，赋值不会被提升。**
2.  **let的创建被提升，初始化和赋值不会被提升。**
3.  **function的创建、初始化和赋值均会被提升。**

[let]: https://zhuanlan.zhihu.com/p/28140450

Javascript 基础篇一：javascript 声明提升

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 javascript 变量的声明与提升

相关 JavaScript变量声明提升

相关 javascript变量声明提升(hoisting)

相关 JavaScript 中的 Hoisting (变量提升和函数声明提升)

相关 JS面试题：变量声明的提升，javascript的变量声明提升

相关 JavaScript之声明提升

相关 Javascript 基础篇一：javascript 声明提升

相关 JavaScript中的声明提升

相关新旅程JavaScript基础篇一

相关 JavaScript学习笔记（基础篇一）——字符串