会飞的鱼

2020
Godam
首页 » 学习笔记 » Day 03 JavaScript 变量提升

Day 03 JavaScript 变量提升

前言

    好几天没有写笔记了,说好的每天一更呢......

    不过写起来真的太麻烦了(抓头发)

    目前已经完成了菜鸟教程的HTML+CSS基础课程的学习,现阶段正在学习JavaScript,同时打算同步看一本CSS书,毕竟感觉只在菜鸟教程上学习完,依然是个菜鸟。。。

    JavaScript,就目前的学习情况来看感觉和其他编程语言类似,许多基础语法没必要再学习了,但仍有许多特性,比如今天要跟大家分享的JavaScript变量提升


正文

何为变量提升呢?

    函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部。也就是说,将函数声明以及变量声明放在代码块的最前端。下面我们来看一个例子:

x = 5; // 变量 x 设置为 5

elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x;                     // 在元素中显示 x

var x; // 声明 x

//但其实在执行时是这样的

var x; // 声明 x
x = 5; // 变量 x 设置为 5
elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x;                     // 在元素中显示 x

提升过程详解

    变量的声明和函数的声明提升,提升的时机发生在预解析过程中。预解析过程也就是创建 AO(Activation Object) 的过程。
创建AO过程:

  1.     创建 AO 对象。
  2.     将形参和函数内变量声明作为对象的属性名,属性值统一为 undefined。
  3.     将实参赋值给形参。
  4.     找函数内的函数声明作为对象的属性名,属性值为函数体。

    我们在这里需要说明的是:在函数和变量同时被提升的过程中,函数会首先被提升,然后才是变量。但还需要注意的是,在提升过程中,JavaScript 初始化并不会提升,如:var x = 5;   并不会被提升。

    明白了这一过程之后,我们来看一个简单的示例:


console.log(v1);
var v1 = 100;
function foo() {
    console.log(v1);
    var v1 = 200;
    console.log(v1);
}
foo();
console.log(v1);
     我们来分析一下这段代码,第二行和第五行均对变量进行了初始化,因此,这两处变量并不会被提升,所以,应该被提升的仅有函数的声明,即第三行开始的函数代码块,我们将其实际解释顺序分析如下:

function foo() {
    console.log(v1);
    var v1 = 200;
    console.log(v1);
}
console.log(v1);
var v1 = 100;
foo();
console.log(v1);
因此,函数的执行结果应该如下所示:


//undefined
//undefined
//200
//100


难度提升

    下面我们来看一段代码:

function jsFun6(){  //函数声明和函数表达式的区别
    
    test1();//函数声明提升,在执行代码之前会先读取函数声明,不会报错
    function test1(){//函数声明方式创建函数
        alert("测试1");
    }
    
    //test2();报错,函数还不存在
    console.log(test2)//不会报错,变量提升只是提升变量的声明,并不会把赋值也提升上来,输出undefined
    var test2=function(){
        alert("测试2");
    };//使用函数表达式创建一个匿名函数(实际是以变量test3命名的函数)
    test2();//不会报错,以创建函数
                
    var test3=function(){
        alert("测试3");
    }();//加了括号立即执行
    
    var test4 = 12;// !注意看,一旦变量被赋值后,将会输出变量
    //函数提升优先级高于变量提升,所以函数先提升,然后变量提升覆盖之前的函数声明,表                
    //现为变量
    function test4() {
        alert("测试4");               
    }
    console.log(test4); //12

    var test5="test5_1";
    (function(){
        //js中的变量搜索顺序:找变量时,先找局部变量,如果没有局部变量;再找全局变量。
    alert(test5);//此时的test5为局部变量的提升,undefined
    var test5="test5_2";
    })();
                
}
      这是一段十分复杂的变量以及函数提升示例,我们将进行分部解释

    首先 JS 在执行之前会有一个预编译过程,变量提升和函数提升就是发生在这里。在执行 jsFun6 函数时首先会创建一个 AO 对象。

AO{

}
    然后会将形参和变量声明作为 AO 对象的属性名,属性的值为 undefined。我们可以看到 jsFun6 函数里没有形参,但是有以下变量声明:
第10行的 var test2
第15行的 var test3
第19行的 var test4
第27行的 var test5
所以 AO 对象现在是这样:

AO{
    test2:undefined
    test3:undefined
    test4:undefined
    test5:undefined
}
    然后会将实参的值传递给形参(当前没有形参所以略过)。

    再找到函数声明作为AO的属性名,属性的值为函数声明的函数体(这里就是函数声明提升)。
    我们可以看到 jsFun6 函数里有以下的函数声明:

第4行 function test1(){}
第22行 function test4(){}
    这里的第 10 行和第 15 行是函数表达式不是函数声明。
    所以 AO 对象现在是这样:
AO{
    test2:undefined,
    test3:undefined,
    test4:function test4(){alert("测试4");},
    test5:undefined,
    test1:function test1(){alert("测试1");}
}
    这里需要注意因为之前 AO 对象里已经有 test4 属性了所以 AO 对象里原来由变量声明时得到的 test4 属性会被现在函数声明的 test4 覆盖。
到这里预编译就完成了开始执行。
    执行时会先去查找 AO 对象,如果没找到就会去 GO(Global Object)对象里查找(AO 对象相当于局部变量,GO 对象相当于全局变量)。
    当执行第 3 行时在 AO 里找到 test1 执行,弹出提示框显示提示信息“测试1”。
第 4 行已经提升了所以可以略过,下面其他的类似行与此相同。
    执行第 8 行时, 在 AO 里找到 test2,并作为函数运行,由于 AO 里的 test2 的值是 undefined 所以执行会报错。
    第 9 行输出 test2 所以输出的是 undefined。
    第 10 行将函数体赋值给 test2,当前 AO 变成:
AO{
    test2:function(){alert("测试2");},
    test3:undefined,
    test4:function test4(){alert("测试4");},
    test5:undefined,
    test1:function test1(){alert("测试1");}
}
    所以第 13 行执行时在 AO 里能找到 test2 并作为函数运行,弹出提示框显示提示信息“测试2”。
    第 15 行由于用于赋值的函数体后面加了 () 变成立即执行函数所以函数会立即运行(这里会弹出提示框显示提示信息“测试3”)然后将返回值赋值给 test3,由于函数没有返回值所以是 undefined,也就导致了 AO 里的 test3 的属性值还是 undefined(大家可以在第18行输出一下 test3,会发现还是输出 undefined)。
    第 9 行将 12 赋值给 test4,将原来 test4 的属性值覆盖了,AO 对象变为:
AO{
    test2:function(){alert("测试2");},
    test3:undefined,
    test4:12,
    test5:undefined,
    test1:function test1(){alert("测试1");}
}
    所以在第 25 行会输出 12(如果在这里再把 test4 作为函数去运行就会报错)。
    第 27 行将 test5_1 赋值给 test5。
    第 28 行是立即执行函数,会立即执行。
    在执行之前会进行预编译所以这个函数又会创建一个 属于他自己的 AO 对象,为了区分我们将他标识为 AO2。
    然后将形参和变量声明作为 AO 对象的属性名,属性的值为 undefined。


AO2{
    test5:undefined
}
    然后进行实参形参统一,以及函数声明提升(由于没有所以略过)。
    执行第 30 行时在 AO2 里找到了 test5,属性值为 undefined。
    所以会弹出提示框显示提示信息 “undefined”。
    执行第 31 行是将 test5_2 赋值给 test5。
    所以 AO2 变成了:

AO2{
    test5:test5_2
}
    至此,分析完成


总结

    我们习惯将var a = 2;看做是一个声明,但实际上javascript引擎并不这么认为。它将var a和a = 2看做是两个单独的声明,第一个是编译阶段的任务,而第二个则是执行阶段的任务。因此它并不会得到提升
    总结全文来看,无论作用域中的声明出现在什么地方,都将在代码本身被执行前首先进行处理,可以将这个过程形象地想象成所有的声明(变量和函数)都会被“移动”到各自作用域的最顶端,这个过程被称为提升。

本文参考:https://blog.csdn.net/qq_39712029/article/details/80951958

文章如无特别注明均为原创! 作者: 果果, 转载或复制请以 超链接形式 并注明出处 GODAM|博客|godam
原文地址《 Day 03 JavaScript 变量提升》发布于2020-3-1

分享到:
打赏

评论

游客

  1. #2
    qq_avatar

    嗯?

      11个月前 (2020-03-01)回复
  2. #1
    qq_avatar

    很棒哦~

    无声的雨 11个月前 (2020-03-01)回复
切换注册

登录

您也可以使用第三方帐号快捷登录

切换登录

注册

sitemap