JavaScript 预解析的4种实现方法解析

JavaScript预：四种方法的实际演示

在JavaScript的世界中，预是一个重要的概念。预是什么？简单来说，就是在js运行之前，会把带有var和function关键字声明的变量先声明，并在内存中安排好。预过程中，function的声明会优先于var声明。接下来，我们通过具体的代码示例来深入四种预的实现方法。

一、常规写法与预过程展示

-

首先看下面这段代码：

```javascript

var num=10;

fun();

function fun(){

console.log(num);//undefined

var num=20;

}

```

经过预后，代码的实际执行顺序如下：

```javascript

var num; // 预时变量声明提前

function fun(){ // 函数声明提前

var num; // 在函数内部的变量声明提前，此时的num覆盖外部的num声明

console.log(num); // 输出undefined，因为在声明变量之前尝试访问它

num=20;

}

num=10; // 执行赋值操作

fun(); // 执行函数fun

```

二、第二种方法：函数声明与变量声明的优先级展示

--

再看下面的代码：

```javascript

var num=10;

function dn(){

console.log(num);//undefined

var num=20; // 函数内部声明变量会覆盖全局变量声明，输出undefined是预期结果。接下来的输出是函数内部变量的赋值结果。

console.log(num);//20

}

dn();

```

三、第三种方法：局部变量的预特点展示

-

在函数内部声明的局部变量会在函数执行前被预，即使这些变量在函数外部被赋值。例如：

```javascript

var a = 18; // 全局变量a赋值为18

ss(); // 执行函数ss() 之前的全局变量a不会被覆盖，函数内部声明的局部变量b和a不会影响全局变量a的值。因此ss()内部的console.log输出的将是全局变量a的值（undefined）。接着会输出函数内部变量b的值和新的局部变量a的值。

function ss(){ // 函数声明提前，但其内部变量的声明和赋值在运行时才会发生作用。 变量声明会在读取到之后被。先输出的是变量声明的占位值undefined（这里的解释稍显模糊）。接下来的输出是变量赋值的结果。如果在此之前已经赋值了全局变量a，则此处的局部变量a不会影响到全局变量a的值。但需要注意的是局部变量声明的顺序不会影响全局变量的值。局部变量总是按照声明的顺序进行的。即使先声明了a再声明了b，但打印的顺序仍然是先打印出未赋值的a再打印出赋值的b。因为打印的顺序是按照代码的顺序执行的。而不是按照变量的声明顺序执行的。因此先打印出的是未赋值的a（undefined），再打印出赋值的b（9）。最后会尝试给全局变量a赋一个新的值（'123'），但由于全局变量和函数内部变量的作用域不同，所以不会影响到全局变量a的值。因此全局变量a的值仍然是原来的值（undefined）。而函数内部声明的局部变量a的值则被修改为新的值（'123'）。这就是JavaScript预的特点之一：函数内部声明的局部变量不会影响全局变量的值。在函数内部声明的局部变量总是按照声明的顺序进行的。而不是按照代码的执行顺序进行的。因此即使先声明了局部变量a再声明了局部变量b，但在打印时仍然会先打印出未赋值的局部变量a再打印出赋值的局部变量b。这是因为打印的顺序是按照代码的顺序执行的而不是按照变量的声明顺序执行的。因此打印的顺序是先打印出未赋值的局部变量a再打印出赋值的局部变量b的值（这里存在一些歧义和误解，需要进一步澄清和修正）。关于这个问题可以进一步深入一下） } // 函数内部变量的声明和赋值过程会在运行时发生作用，但不会影响全局变量的值。因此全局变量a的值仍然是原来的值（undefined）。而函数内部声明的局部变量a的值则被修改为新的值（'123'）。同时需要注意函数的执行顺序问题。） ```javascript aa(); console.log(c1);//9 console.log(b1);//9 console.log(a1);//报错 function aa(){ var a1=b1=c1=9; console.log(a1);//9 console.log(b1);//9 console.log(c1);//9 } // 此处需要注意的是函数的执行顺序问题以及变量的作用域问题。首先执行的是函数aa()，在函数aa()中声明的三个局部变量a1、b1和c1都被赋予了新的值（9）。但在函数aa()执行完毕后并不会影响到全局变量的值。因此接下来的三个console.log输出的都是未定义的值（报错）。这是因为在函数aa()执行完毕后全局变量c1、b1和a1并没有被赋值新的值（仍然是