首页 > 编程语言 >Javascript的预解析机制

Javascript的预解析机制

时间:2022-12-11 16:33:27浏览次数:57  
标签:function 函数 Javascript AO 机制 解析 声明 变量 undefined

JS的预解析机制

想要理解js的解析机制,不妨先了解两个概念:变量声明提升函数声明提升

声明提升:函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部。

变量声明提升

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

但是要注意JavaScript 只有声明的变量会提升,初始化的不会

实例1:

var x = 8; // 初始化 x
var y = 9; // 初始化 y

elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x + " " + y;           // 显示 x 和 

实例2:

var x = 5; // 初始化 x

elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x + " " + y;           // 显示 x 和 y

var y = 7; // 初始化 y

image-20221211155033649

我们可以看到实例 2 的 y 输出了 undefined,这是因为变量声明 (var y) 提升了,但是初始化(y = 7) 并不会提升,所以 y 变量是一个未定义的变量。

函数声明提升

需要注意都是函数声明提升直接把整个函数提到执行环境的最顶端。

a=5;
show();
var a;
function show(){};

预解析

function show(){};
var a;
a=5;
show();

除了以上的函数声明方式外,还可以使用匿名函数的方式。

声明:

var 变量名称=function(形参列表){
  //函数体
}

调用:

变量名称(实参列表)

注意:使用匿名函数的方式不存在函数提升,因为函数名称使用变量表示的,只存在变量提升。例:

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

function getName(){
  console.log(1);
}

getName();
//结果为2

getName 是一个变量,因此这个变量的声明也将提升到顶部,而变量的赋值依然保留在原来的位置。需要注意的是,函数优先,虽然函数声明和变量声明都会被提升,但是函数会首先被提升,然后才是变量

//函数、变量声明提升后
function getName(){    //函数声明提升到顶部
  console.log(1);
}

var getName;    //变量声明提升
getName = function(){    //变量赋值依然保留在原来的位置
  console.log(2);
}

getName();    // 最终输出:2

预解析过程

预解析过程也就是创建 AO(Activation Object) 的过程。

创建AO过程:

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

接下来以一个例子来解释一下这样一个过程:

1    function jsFun6(){  //函数声明和函数表达式的区别
2        
3        test1();//函数声明提升,在执行代码之前会先读取函数声明,不会报错
4        function test1(){//函数声明方式创建函数
5            alert("测试1");
6        }
7        
8        //test2();报错,函数还不存在
9        console.log(test2)//不会报错,变量提升只是提升变量的声明,并不会把赋值也提升上来,输出undefined
10        var test2=function(){
11            alert("测试2");
12        };//使用函数表达式创建一个匿名函数(实际是以变量test3命名的函数)
13        test2();//不会报错,以创建函数
14                    
15        var test3=function(){
16            alert("测试3");
17        }();//加了括号立即执行
18        
19        var test4 = 12;// !注意看,一旦变量被赋值后,将会输出变量
20        //函数提升优先级高于变量提升,所以函数先提升,然后变量提升覆盖之前的函数声明,表                
21        //现为变量
22        function test4() {
23            alert("测试4");               
24        }
25        console.log(test4); //12
26    
27        var test5="test5_1";
28        (function(){
29            //js中的变量搜索顺序:找变量时,先找局部变量,如果没有局部变量;再找全局变量。
30        alert(test5);//此时的test5为局部变量的提升,undefined
31        var test5="test5_2";
32        })();
33                    
34    }
35    jsFun6();

首先 JS 在执行之前会有一个预编译过程,变量提升和函数提升就是发生在这里,我们按照步骤来分析一下以上代码:

step1

在执行 jsFun6 函数时首先会创建一个 AO 对象(Activetion Object 执行期上下文)。

AO{

}

step2

然后会将形参和变量声明作为 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
}

step3

然后会将实参的值传递给形参(当前没有形参所以略过)。

step4

再找到函数声明作为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 覆盖。

到这里预编译就完成了开始执行。

step5:执行

执行时会先去查找 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)。

第 19 行将 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。

AO2{

}

然后将形参和变量声明作为 AO 对象的属性名,属性的值为 undefined。

AO2{
    test5:undefined
}

然后进行实参形参统一,以及函数声明提升(由于没有所以略过)。

执行第 30 行时在 AO2 里找到了 test5,属性值为 undefined。

所以会弹出提示框显示提示信息 “undefined”。

执行第 31 行是将 test5_2 赋值给 test5。

所以 AO2 变成了:

AO2{
    test5:test5_2
}

标签:function,函数,Javascript,AO,机制,解析,声明,变量,undefined
From: https://www.cnblogs.com/epochal/p/16973855.html

相关文章