JS執行過程

1、首先是預解析：預解析過程最重要的是提升，在JavaScript代碼在預解析階段，會對以var聲明的變量名，和function開頭的語句塊，進行提升操作

2、執行操作

全局中解析和執行過程

<script>console.log(a);//undefined===>window.a console.log(b);//b is not defined console.log(fn1);//會打印函數===>window.fn1 console.log(fn2);//undefined===>window.fn2var a = 1;b = 2;function fn1() {console.log('函數1');}var fn2 = function () {console.log('函數2');} </script> <script>var a;console.log(window); </script>

<script>var a = 1;console.log(window); </script>

上述例子有變量有函數（在全局作用域下）：

1、對于有var聲明的函數，就等同于window.a，相當于在js第一次掃描代碼時候（預解析），給window添加了一個a的屬性，但是沒有賦值，所以打印結果是undefined

2、對于沒有var聲明的函數，在js第一次掃描代碼時候（預解析）不會給windouw添加任何屬性，所有會直接報錯

3、對于以function開頭的函數，就等同于window.fn1，相當于在js第一次掃描代碼時候（預解析），給window添加了一個fn1的屬性，而且是直接賦值的（函數的引用），所以打印結果是一個函數

4、對于沒有以function開頭的函數（也就是函數表達式），其過程相當于var?a的過程，在js第一次掃描時（預解析），給window添加了一個fn2的屬性，但是沒有賦值，所以打印結果是undefined

命名沖突

<script>console.log(f);//打印函數var f = 1;function f(){console.log('foodoir');} </script> <script>console.log(f);//打印函數function f(){console.log('foodoir');}var f = 1; </script> <script>console.log(f);//undefinedvar f = 1;var f = 2; </script> <script>console.log(f);//打印第二個函數function f(){console.log('foodoir');}function f(){console.log('hello world');} </script>

1、函數與變量命名沖突時，變量會被直接忽略，保留的永遠的都是函數

2、函數與函數命名沖突時，最后的函數會替換之前的函數

3、變量與變量命名沖突時，永遠都是undefined

?函數中的解析與執行過程

<script>function f(a, b) {alert(a);alert(b);var b = 100;function a() {}}f(1, 2);//依次彈出function a(){}以及2 </script> <script>function f(a, b) {alert(a);alert(b);var b = 100;function a() {}}f(1);//依次彈出function a(){}以及undefined </script>

函數中的解析過程與全局類似

1、在第一次掃描js代碼時，首先會將a變量提升，但是掃描到最后發現有函數a，這里有命名沖突，那么就會直接將變量忽略

2、b變量沒有命名沖突，但是第一次掃描后，b只是提升并沒有賦值，所以上面代碼段一中，正式執行代碼的時候就會彈出2

?

轉載于:https://www.cnblogs.com/wuqiuxue/p/8341183.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的JS高级——变量提升的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。