作用域和預(yù)編譯

一剔猿、作用域初探

function test() {
    var a = 123;
}
function demo() {
    var b = 234;
    document.write(a);
}

兩個相鄰的作用域
互相不可以訪問變量
demo里不可以訪問test里的a

function test() {
    var a = 123;
    document.write(b);
    function demo() {
        var b = 234;
        document.write(a);
    }
}

兩個嵌套的作用域
外層的不可以訪問里層的變量
里層的可以訪問外層的變量

二脑慧、JS運行三部曲

1.語法分析 即通篇掃描一遍看有沒有語法錯誤
2.預(yù)編譯
3.解釋執(zhí)行

三、預(yù)編譯

1.預(yù)編譯中的提前規(guī)則

(1)舉例

function test() {
    console.log('a');
}
test();
test();
function test() {
    console.log('a');
}

均可打印a

var a = 123;
console.log(a);

輸出123

console.log(a);
var a = 123;

輸出undefined

console.log(a);

報錯 變量未聲明

(2)規(guī)則

a. 函數(shù)聲明 整體提升

函數(shù)不管聲明在哪系統(tǒng)都會把他提升到邏輯的最前面

b. 變量 聲明提升

var a = 123;??????????????變量聲明并賦值
系統(tǒng)把語句拆成????????var a; 聲明變量
?????????????????????????????????a =123; 變量賦值
然后把聲明語句放在邏輯最前面
賦值語句不動
所以輸出undefined未賦值而不報錯

2.預(yù)編譯前奏

(1)inply global 暗示全局變量
即任何變量绰垂,如果變量未經(jīng)聲明就賦值他巨,此變量就為全局對象window所有符相。


eg:a = 123; 不報錯
a = 123; ===> window.a = 123;


(2)一切聲明的全局變量,全是window的屬性


eg:var b = 123; ===> window.b = 123;


(3)window就是全局的域
var a = 123;=====>window { a : 123 ; }
在全局上訪問 a 就是訪問 window.a

function test() {
    var a  =  b = 123;
    // 連續(xù)賦值
    // 1.b = 123     先把123賦值給未聲明的b
    // 2.var a;      再聲明a
    // 3.a = b;      把b賦給a
}
test();

訪問 window.a 打印undefined
訪問 window.b 打印123

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

1111111.預(yù)編譯發(fā)生在函數(shù)執(zhí)行的前一刻

eg

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 () {}
}
fn(1);

過程分析及總結(jié)
(1)創(chuàng)建AO對象 Activation Object(作用域 執(zhí)行期上下文)

AO{}

(2)找形參和變量聲明褒链,將變量和形參名作為AO屬性名唁情,值為undefined

AO{
    a : undefined,
    b : undefined,
}

(3)將實參值和形參統(tǒng)一

AO{
    a : 1,
    b : undefined,
}

(4)在函數(shù)體里面找函數(shù)聲明,值賦予函數(shù)體

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

2222222.從AO域里取東西執(zhí)行函數(shù)及過程

        function fn(a) {
            console.log(a);             打印 function a () {}

            var a = 123;                var a;預(yù)編譯時被提升不用再看
                                        執(zhí)行 a = 123;
                                        AO{
                                            a : 123甸鸟,
                                            b : undefined,
                                            d : function d () {}
                                        }

            console.log(a);             打印 123

            function a () {}            預(yù)編譯時已經(jīng)提升不用再看

            console.log(a);             打印 123

            var b = function () {}      var b;預(yù)編譯時被提升不用再看
                                        執(zhí)行 b = function () {};
                                        AO{
                                            a : 123,
                                            b : function () {},
                                            d : function d () {}
                                        }

            console.log(b)              打印 function () {}

            function d () {}            預(yù)編譯時已經(jīng)提升不用再看
        }
        fn(1);

打印結(jié)果:
function a () {}
123
123
function () {}

4.全局預(yù)編譯

全局預(yù)編譯發(fā)生在全局執(zhí)行的前一刻
所以先生成GO再生成AO

console.log(a)

var a = 123;
function a() {}

全局預(yù)編譯 打印function a() {}


GO {
a : undefined,
}


var a = 123;
funcation a () {}

GO {
a : funcation () {},
}


GO 就是 window
即為任何全局變量都是window上的屬性

eg1:題 + 執(zhí)行順序

(1) 生成GO對象 GO{}(global object) 這個GO就是window

GO{}

(2)將全局的變量聲明(的名)儲存一GO對象中兵迅,value為undefinde

GO{
    test : undefined
}

(3) 將全局的函數(shù)聲明的函數(shù)名作為GO對象中的key,函數(shù)整體內(nèi)容為value儲存到go對象中

GO{
    test : function () {
        ...
    }
}
console.log(test);
function test(test) {
    console.log(test);
    var test = 234;
    console.log(test);
    function test() {}
}

(4)執(zhí)行函數(shù)前創(chuàng)建AO

AO變化過程
AO{
    test : undefined,
}
AO{
    test : 1,
}
AO{
    test : function () {},
}
AO{
    test : 234,
}

(5)執(zhí)行函數(shù)

test(1);
var test = 123;

eg2:題 + 執(zhí)行順序

(1)GO{
    a : 10,
    c : 234
 }
(2)function test () {
    console.log(b); // 輸出結(jié)果undefined
    if(a) {
        var b = 100;
    }
    console.log(b); // 輸出結(jié)果undefined
    c = 234;
    console.log(c); // 輸出結(jié)果234
}
var a;
AO{
    b : undefined,
}
a = 10;
test();
console.log(c); // 輸出結(jié)果234

最終輸出:
undefined
undefined
234
234

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末抢韭,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子恍箭,更是在濱河造成了極大的恐慌刻恭,老刑警劉巖,帶你破解...
    沈念sama閱讀 219,270評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件扯夭,死亡現(xiàn)場離奇詭異吠各,居然都是意外死亡臀突,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,489評論 3 395
  • 文/潘曉璐 我一進店門贾漏,熙熙樓的掌柜王于貴愁眉苦臉地迎上來候学,“玉大人,你說我怎么就攤上這事纵散∈崧耄” “怎么了?”我有些...
    開封第一講書人閱讀 165,630評論 0 356
  • 文/不壞的土叔 我叫張陵伍掀,是天一觀的道長掰茶。 經(jīng)常有香客問我,道長蜜笤,這世上最難降的妖魔是什么濒蒋? 我笑而不...
    開封第一講書人閱讀 58,906評論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮把兔,結(jié)果婚禮上沪伙,老公的妹妹穿的比我還像新娘。我一直安慰自己县好,他們只是感情好围橡,可當(dāng)我...
    茶點故事閱讀 67,928評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著缕贡,像睡著了一般翁授。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上晾咪,一...
    開封第一講書人閱讀 51,718評論 1 305
  • 那天收擦,我揣著相機與錄音,去河邊找鬼谍倦。 笑死塞赂,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的剂跟。 我是一名探鬼主播减途,決...
    沈念sama閱讀 40,442評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼曹洽!你這毒婦竟也來了鳍置?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,345評論 0 276
  • 序言:老撾萬榮一對情侶失蹤送淆,失蹤者是張志新(化名)和其女友劉穎税产,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,802評論 1 317
  • 正文 獨居荒郊野嶺守林人離奇死亡辟拷,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,984評論 3 337
  • 正文 我和宋清朗相戀三年撞羽,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片衫冻。...
    茶點故事閱讀 40,117評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡诀紊,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出隅俘,到底是詐尸還是另有隱情邻奠,我是刑警寧澤,帶...
    沈念sama閱讀 35,810評論 5 346
  • 正文 年R本政府宣布为居,位于F島的核電站碌宴,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏蒙畴。R本人自食惡果不足惜贰镣,卻給世界環(huán)境...
    茶點故事閱讀 41,462評論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望膳凝。 院中可真熱鬧碑隆,春花似錦、人聲如沸鸠项。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,011評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽祟绊。三九已至,卻和暖如春哥捕,著一層夾襖步出監(jiān)牢的瞬間牧抽,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,139評論 1 272
  • 我被黑心中介騙來泰國打工遥赚, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留扬舒,地道東北人。 一個月前我還...
    沈念sama閱讀 48,377評論 3 373
  • 正文 我出身青樓凫佛,卻偏偏與公主長得像讲坎,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子愧薛,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,060評論 2 355

推薦閱讀更多精彩內(nèi)容