页面中多个script块之间的关系

蔚落 2021-06-26 16:06 288阅读 0赞

## 一：函数声明与函数定义表达式在函数调用间的区别 ##

结果：  
![在这里插入图片描述][20190103113009459.png]

结果：执行了

结论：函数声明在编译期处理了函数声明，但是函数定义表达式并没有初始化与赋值。类似声明了一个变量，但是变量没有赋值。

## 二：多个`script`之间对于变量的关系 ##

**JS是按照代码块来进行编译和执行的，代码块间相互独立，但变量和方法共享。**

结果：执行了

\*\*如果两个函数块之间更换位置，那就会报错。

结果：0

\*\*如果两个函数块之间更换位置，那就会报错。

## 三：这样就造成了一个问题，当我们一个页面中引入多个js的时候，可能会造成全局变量的污染。 ##

我们可以这么做来避免：

结果：1  
0

或者我们直接用函数来做：

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

`javaScript`解释器在执行脚本时，是按块来执行的。通俗地说，就是浏览器在解析HTML文档流时，如果遇到一个`<script>`标签，则`JavaScript`解释器会等到这个代码块都加载完后，先对代码块进行预编译，然后再执行。执行完毕后，浏览器会继续解析下面的HTML文档流，同时`JavaScript`解释器也准备好处理下一个代码块。

虽然说，`JavaScript`是按块执行的，但是不同块都属于同一个全局作用域，也就是说，块之间的变量和函数是可以共享的。 这也是第二段代码为什么可以访问前一个块里的`a`的原因。

step 1. 读入第一个代码块。
    
    step 2. 做语法分析，有错则报语法错误（比如括号不匹配等），并跳转到step5。
    
    step 3. 对var变量和function定义做“预编译处理”（永远不会报错的，因为只解析正确的声明）。
    
    step 4. 执行代码段，有错则报错（比如变量未定义）。
    
    step 5. 如果还有下一个代码段，则读入下一个代码段，重复step2。
    
    step6. 结束。

[20190103113009459.png]: /images/20210626/c5a0b8a1672c4398a563bbafa24da0f1.png