JavaScript預(yù)編譯和執(zhí)行過(guò)程實(shí)例分析

本篇內(nèi)容介紹了“JavaScript預(yù)編譯和執(zhí)行過(guò)程實(shí)例分析”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

javascript相對(duì)于其它語(yǔ)言來(lái)說(shuō)是一種弱類(lèi)型的語(yǔ)言，在其它如java語(yǔ)言中，程序的執(zhí)行需要有編譯的階段，而在javascript中也有類(lèi)似的“預(yù)編譯階段”（javascript的預(yù)編譯是以代碼塊為范圍<script></script>，即每遇到一個(gè)代碼塊都會(huì)進(jìn)行預(yù)編譯>執(zhí)行），了解javascript引擎的執(zhí)行機(jī)理，將有助于在寫(xiě)js代碼過(guò)程中的思路總結(jié)。

首先javascript是解釋型語(yǔ)言，自然就是編譯一行，執(zhí)行一行。

js運(yùn)行過(guò)程分為三步：
1、語(yǔ)法分析 
2、預(yù)編譯  
3、解釋執(zhí)行

語(yǔ)法分析就是指js引擎去判斷檢查你的代碼是否存在語(yǔ)法錯(cuò)誤，解釋執(zhí)行更不用多說(shuō)，自然就是執(zhí)行你的代碼，然而重中之重的是預(yù)編譯，預(yù)編譯簡(jiǎn)單理解就是在內(nèi)存中開(kāi)辟一些空間，存放一些變量與函數(shù) 。

理解預(yù)編譯首先要明白函數(shù)聲明和變量賦值：

javascript中的兩種聲明方式，var和function，前者聲明的是變量，后者聲明的是方法。

在預(yù)編譯中，javascript對(duì)這兩種聲明做出了兩種處理方案:

<script>
   var a = "1";　　　　//聲明變量a
   function b() {　　　　//聲明方法b
     alert();
   }
   var c = function () { //聲明變量c
     alert();
   }
 </script>

以上代碼塊中，a、c為變量賦值，b為函數(shù)聲明，當(dāng)執(zhí)行以上的代碼時(shí)，首先會(huì)進(jìn)入預(yù)編譯階段，對(duì)與變量賦值a、c會(huì)在內(nèi)存中開(kāi)辟一塊內(nèi)存空間并指向變量名，且賦值為undefined

預(yù)編譯(函數(shù)執(zhí)行前)

1. 創(chuàng)建AO對(duì)象（Active Object）
2. 查找函數(shù)形參及函數(shù)內(nèi)變量聲明，形參名及變量名作為AO對(duì)象的屬性，值為undefined
3. 實(shí)參形參相統(tǒng)一，實(shí)參值賦給形參
4. 查找函數(shù)聲明，函數(shù)名作為AO對(duì)象的屬性，值為函數(shù)引用

題目1:

<script>
  function fn(a) {
    console.log(a)
    var a = 123
    console.log(a)
    function a() {
    }
 
    console.log(a)
    var b = function () {
    }
    console.log(b)
    function d() {
    }
 
    console.log(d)
  }
  fn(1)
</script>

分析:

1)、創(chuàng)建AO對(duì)象

AO{
 
}

2)、查找函數(shù)形參及函數(shù)內(nèi)變量聲明，形參名及變量名作為AO對(duì)象的屬性，值為undefined

AO{
      a:undefined,
      b:undefined,
    }

3)、實(shí)參形參相統(tǒng)一，實(shí)參值賦給形參

AO{
     a:1,
     b:undefined,
   }

4)、查找函數(shù)聲明，函數(shù)名作為AO對(duì)象的屬性，值為函數(shù)引用

AO{
      a:function a() {
      },
      b:undefined,
      d:function d() {
      }
    }

變量、函數(shù)聲明后代碼順序

  function fn(a) {
    var a
    var b
 
    function a() {
    }
 
    function d() {
    }
 
    console.log(a)
    a = 123
    console.log(a)
 
    console.log(a)
    b = function () {
    }
    console.log(b)
 
    console.log(d)
  }

解釋執(zhí)行

當(dāng)執(zhí)行到a=123之前時(shí): 此時(shí) console.log(a)打印的值為: function a() {}

AO{
    a:function a() {
    },
    b:undefined,
      d:function d() {
    }
  }

當(dāng)執(zhí)行到a=123時(shí): 此時(shí) console.log(a)打印的值為: 123 123

AO{
      a:123,
      b:undefined,
      d:function d() {
      }
    }

當(dāng)執(zhí)行到b = function () {}時(shí)：

此時(shí) console.log(b)打印的值為:function () {}

console.log(d)打印的值為:function d() {}

AO{
     a:123,
     b:function () {
     },
     d:function d() {
     }
   }

瀏覽器執(zhí)行結(jié)果:

題目2:

<script>
    function test(a, b) {
      console.log(a);
      c = 0;
      var c;
      a = 3;
      b = 2;
      console.log(b);
      function b() {
      }
 
      function d() {
      }
 
      console.log(b)
    }
    test(1)
  </script>

分析:

1)、創(chuàng)建AO對(duì)象

AO{
  
}

2)、查找函數(shù)形參及函數(shù)內(nèi)變量聲明，形參名及變量名作為AO對(duì)象的屬性，值為undefined

AO{
      a:undefined,
      b:undefined,
      c:undefined
    }

3)、實(shí)參形參相統(tǒng)一，實(shí)參值賦給形參　

AO{
      a:1,
      b:undefined,
      c:undefined
    }

4)、查找函數(shù)聲明，函數(shù)名作為AO對(duì)象的屬性，值為函數(shù)引用　

AO{
    a:1,
    b:function b() {
    },
    c:undefined,
    d:function d() {
    }
  }

變量、函數(shù)聲明后代碼順序

function test(a, b) {
  var a
  var b
  var c
 
  function b() {
  }
 
  function d() {
  }
 
  console.log(a);
  c = 0;
  a = 3;
  b = 2;
  console.log(b);
  console.log(b)
}

解釋執(zhí)行

當(dāng)執(zhí)行到function d() {}之前時(shí): 此時(shí) console.log(a)打印的值為: 1

AO{
      a:1,
      b:function b() {
      },
      c:undefined,
      d:function d() {
      }
    }

當(dāng)執(zhí)行到b=2之前時(shí): 此時(shí) console.log(b)打印的值為: 2 2

AO{
      a:1,
      b:2,
      c:0,
      d:function d() {
      }
}

瀏覽器執(zhí)行結(jié)果:

題目3:

<script>
    function test(a, b) {
      console.log(a);
      console.log(b);
      var b = 234;
      console.log(b);
      a = 123;
      console.log(a);
      function a() {
      }
 
      var a;
      b = 456;
      var b = function () {
      }
      console.log(a);
      console.log(b);
    }
    test(1)
  </script>

分析:

1)、創(chuàng)建AO對(duì)象

AO{
   
}

2)、查找函數(shù)形參及函數(shù)內(nèi)變量聲明，形參名及變量名作為AO對(duì)象的屬性，值為undefined　

AO{
    a:undefined,
    b:undefined
  }

3)、實(shí)參形參相統(tǒng)一，實(shí)參值賦給形參　

AO{
     a:1,
     b:undefined
   }

4)、查找函數(shù)聲明，函數(shù)名作為AO對(duì)象的屬性，值為函數(shù)引用

AO{
    a:function a() {
    },
   b:undefined
  }

變量、函數(shù)聲明后代碼順序

function test(a, b) {
   var a;
   var b;
 
   function a() {
   }
 
   console.log(a);
   console.log(b);
   b = 234;
   console.log(b);
   a = 123;
   console.log(a);
   b = 456;
   b = function () {
   }
   console.log(a);
   console.log(b);
 }

解釋執(zhí)行

當(dāng)執(zhí)行到function a() {}時(shí):
此時(shí) console.log(a)打印的值為: function a() {}

console.log(b)打印的值為: undefined

AO{
    a:function a() {
    },
    b:undefined
  }

當(dāng)執(zhí)行到 b=234時(shí): 此時(shí) console.log(b)打印的值為: 234

AO{
      a:function a() {
      },
      b:234
    }

當(dāng)執(zhí)行到 a=123時(shí): 此時(shí) console.log(a)打印的值為: 123

AO{
     a:123,
     b:234
   }

當(dāng)執(zhí)行到 b=456 時(shí)

AO{
     a:123,
     b:456
   }

當(dāng)執(zhí)行到 b = function () {}時(shí):
此時(shí) console.log(a)打印的值為: 123

console.log(b)打印的值為: function () {}

AO{
     a:123,
     b:function () {
     }
   }

瀏覽器執(zhí)行結(jié)果:

“JavaScript預(yù)編譯和執(zhí)行過(guò)程實(shí)例分析”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！