JS预解析机制

- 日理万妓 2021-07-04 18:01 406阅读 0赞

JS的预解析过程：

1，预解析

2，再逐行解读代码，

实例：

解析：

全局作用域，局部作用域，都是通过以下两个步骤进行预解析的。

1，先读取有`var` 的变量(没有使用var的变量是不会被预解析的)，给赋值为：`undefined`。如果两个变量重名，并不影响预解析的过程，就写一个变量就行，因为都将变量赋值为`undefined`（在逐行读取时，只是不同的赋值而已。），如果有函数名和变量重名，那就直接去掉变量，不进行解析。如果函数中存在参数，那么参数也一样使用`var`进行解析。如：`var argument=undefined;`

2，再读取`function`后面的函数—`fn`，如果有多个函数名重复，那么取最后面一个函数进行声明。

上面实例有两个作用域，一个是`window`变量对象的全局作用域，一个是`fn`变量对象的局部作用域。

预解析过程如下：

1，`window`:

var name = undefined;
    
    var age = undefined;
    
    function fn(argument) { 
        console.log(name);
        var name = "xh";
        var age = 12;
    }

2，`fn`:

var name = undefined;
    var age = undefined;
    var argument = undefined;

预解析就完成了。然后就是逐行解读代码。

通过逐行解读代码进行赋值，改变变量属性值。如果遇到函数，那么就直接跳过，因为预解析时已经声明过。

所以，上面实例：`console.log(name);` 输出为： `undefined`。

实例1：

输出结果：`function fn(){};`

实例2：

输出结果：`undefined` 未定义。

实例3：

输出结果：这里的a没有定义，所以报错，未定义。

--------------------

输出结果：

function a(){console.log(4);}
    
    1
    
    1
    
    3
    
    3
    
    报错（a=3，不能当函数执行）；

预解析：

//var a=undefined; 变量a与函数 a 重名，所以变量不进行预解析。
    //两个函数重名，只对最后一个进行预解析。
    function a(){ 
    　　console.log(4);
    }

--------------------

预解析是一个标签执行完毕并且逐行解读代码完成，才执行第二个标签的预解析和逐行代码解读：  
以下是存在两个`script`的情况，进行预解析：

输出结果为：报错。第一个标签的`a`没有声明。  
预解析是一个标签执行完毕并且逐行解读代码完成，才执行第二个标签的预解析和逐行代码解读：  
以下是存在两个`script`的情况，进行预解析：

输出结果：1。

--------------------

输出为：1 ， 1

预解析：  
`window`变量对象的属性以及方法：

var a=undefined;
    fn(a){ console.log(a); a=2;};

`fn`变量对象的属性以及方法:

var a=undefined //这里的 a 是参数。

--------------------

不要在代码块中声明函数，因为这样有些老的狐火浏览器无法进行正确的预解析。

if(){ 
    　　funct![在这里插入图片描述](https://img-blog.csdnimg.cn/20200125232732660.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1d1TGV4,size_16,color_FFFFFF,t_70)ion fn_name(argument){ .....body......}
    }
    for(){ 
    　　function fn_name(){ .....body......}
    }

## 总结 ##

![在这里插入图片描述][20200125232745723.png]  
上图：

基本变量复制（这里应该是赋值）时，创建一个副本：

var name="xm";
    
    name="xh";//基本类型赋值，跟上面一个值无关。即：两个值，在栈内存中开辟了两个位置存放数据。

引用类型赋值的其实是指针：

var xh={ sex:"female" age:18};
    
    var xm=xh;//把xh的引用赋值给xm。还是指向同一个堆内存空间，所以两个值和类型都想相等（即同一个引用），即相等。

基本数据类型和引用数据类型传递参数。

两种类型都一样：都是按值传递参数，并不是按引用传递参数。直接值代替参数。  
![在这里插入图片描述][20200125232909850.png]

[20200125232745723.png]: /images/20210704/c1c1e094000344a2b147e4ac27263ba7.png
[20200125232909850.png]: /images/20210704/c18b82fd789b442b96da74cdce6dd66c.png