1.預(yù)編譯

預(yù)編譯是上下文創(chuàng)建之后,?js代碼執(zhí)行前的一段時(shí)期,?在這個(gè)時(shí)期,?會(huì)對(duì)js代碼進(jìn)行預(yù)處理。

2.全局預(yù)編譯

全局上下文創(chuàng)建后，會(huì)生成變量對(duì)象VO：var變量-》函數(shù)-》同名函數(shù)覆蓋變量名

1. VO首先尋找變量聲明，將var聲明的變量作為VO對(duì)象的屬性名，值為undefined。
2. 然后尋找函數(shù)聲明，屬性值為函數(shù)本身
3. 如果函數(shù)名與變量名沖突，函數(shù)聲明會(huì)將變量聲明覆蓋。

function a(b, c) {
  console.log(b);          	
  var b = 0
  console.log(b);		
  var b = function () {
    console.log('bbbb')
  }	
  console.log(c);		
  console.log(b);				
}
a(1)

全局預(yù)編譯分析：

        // 第一步：尋找變量聲明var，將變量名作為屬性名，將值設(shè)置為undefined
        VO {
            a: undefined
        }
        // 第二步：尋找函數(shù)聲明，屬性值為函數(shù)本身
        // 第三步：函數(shù)名和變量名沖突，函數(shù)聲明會(huì)覆蓋變量聲明
        VO {
            a: undefined-> function a() { }
        }
//執(zhí)行結(jié)果： function a() { }, 100

3.函數(shù)預(yù)編譯

函數(shù)上下文創(chuàng)建后，會(huì)生成變量對(duì)象AO：函數(shù)預(yù)編譯：?var變量-》形參-》實(shí)參賦值給形參-》函數(shù)-》同名函數(shù)覆蓋變量聲明

1. 尋找變量聲明,?變量名作為AO對(duì)象的屬性名,?屬性值置為?undefined
2. 尋找形參,?形參名作為AO對(duì)象的屬性名,?屬性值置為?undefined
3. 將實(shí)參的值賦予形參,?即替換?AO對(duì)象中形參的屬性值
4. 尋找函數(shù)聲明,?函數(shù)名作為AO對(duì)象的屬性名,?屬性值為函數(shù)本身
5. 如果函數(shù)名與變量名沖突,?函數(shù)聲明會(huì)將變量聲明覆蓋?

注意：函數(shù)預(yù)編譯時(shí)，如果有判斷條件里面的變量聲明，無論判斷條件真假，都會(huì)進(jìn)行預(yù)編譯。

如下：這里函數(shù)里面的var tmp也會(huì)進(jìn)行預(yù)編譯

function a(b, c) {
  console.log(b);          	
  var b = 0
  console.log(b);		
  var b = function () {
    console.log('bbbb')
  }	
  console.log(c);		
  console.log(b);				
}
a(1)

函數(shù)預(yù)編譯解析：

        // 第一步：尋找函數(shù)中的變量聲明，將變量名作為屬性名，將值設(shè)置為undefined
         AO : {
            b: undefined,
        }
        // 第二步：尋找形參
        AO : {
            b: undefined,
            c: undefined,
        }
        // 第三步：將實(shí)參傳給形參(b變成了1)
        AO : {
            b: undefined -> 1,
            c: undefined,
        }

        // 第四步：尋找函數(shù)聲明（此處沒有）
        // 第五步：如果函數(shù)名與變量名沖突,?函數(shù)聲明會(huì)將變量聲明覆蓋（此處沒有）
        // 執(zhí)行結(jié)果：1 ,0,(將函數(shù)賦值給b),undefined, b的函數(shù)體

4.全局預(yù)編譯和函數(shù)預(yù)編譯整個(gè)流程

1. 全局預(yù)編譯和局部預(yù)編譯都有時(shí)，是先進(jìn)行全局預(yù)編譯，預(yù)編譯完成后會(huì)逐行執(zhí)行，比如一些變量賦值，打??；
2. 函數(shù)預(yù)編譯是在函數(shù)被調(diào)用前才進(jìn)行預(yù)編譯，編譯完成后再開始執(zhí)行；
3. 執(zhí)行是首先在自己作用域里面查找屬性，有屬性沒有賦值直接返回undefined ，沒有定義屬性從全局查找，查找不到返回undefined

5.預(yù)編譯面試題

        // 面試題
        function fn(a, c) {
            console.log(a)
            var a = 123
            console.log(a)
            console.log(c)
            function a() { }
            if (false) {
                var d = 678
            }
            console.log(d)
            console.log(b)
            var b = function () { }
            console.log(b)
            function c() { }
            console.log(c)
        }
        fn(1, 2)

預(yù)編譯解析：?文章來源地址http://www.zghlxwxcb.cn/news/detail-726036.html

        // 函數(shù)預(yù)編譯： var變量-》形參-》實(shí)參賦值給形參-》函數(shù)-》同名函數(shù)覆蓋變量聲明
        AO:{
            a: undefined->1->funA,
            d: undefined,
            b: undefined-》funB,
            c: 2->funC
        }
        // 執(zhí)行結(jié)果：funA，123，funC，undefined，undefined，funB,funC

到了這里，關(guān)于js預(yù)編譯（全局預(yù)編譯/函數(shù)預(yù)編譯）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！