作者 混元霹靂手-Ziksang
本文章將是一套系列課程撞蜂，偏進(jìn)階,面向有JAVAscript基礎(chǔ)的讀者，文章以精簡(jiǎn)侥袜、通俗意通為主要講解方式蝌诡，全方位的帶你進(jìn)入JAVAscript集中知識(shí)點(diǎn)學(xué)習(xí)，讓零散的知識(shí)點(diǎn)一步一步的聚攏枫吧，希望大家有所收獲浦旱！
我們先回顧一下js中的數(shù)據(jù)類型有那些？
一.基本數(shù)據(jù)類型
1.number
2.string
3.boolean
4.null
5.undefined
二.引用數(shù)據(jù)類型
1.object ---- {}對(duì)象 ---- []數(shù)組 ---- /^$/正則 ---- Date時(shí)間
2.function
基本數(shù)據(jù)類型和引用數(shù)據(jù)類型區(qū)別在于什么地方九杂？
1.基本數(shù)據(jù)類型：是按照值來操作的
2.引用數(shù)據(jù)類型：是按照引用地址來操作的
看個(gè)demo例子
var name = 'ziksang'
var obj = {name : '混元霹靂手', age : "23" }
function demo () {
console.log('光明頂開課了')
}
1.當(dāng)HTML加載頁(yè)面的時(shí)候颁湖，提供了一個(gè)全局js代碼執(zhí)行的環(huán)境 ---- 全局作用域
在node環(huán)境下（global）
在瀏覽器下 （window）
下圖會(huì)詳細(xì)解釋 以上代碼的在全局作用預(yù)解釋的執(zhí)行流程
如果我們此時(shí)把obj.name = '預(yù)解釋',此時(shí)內(nèi)部是進(jìn)行了一個(gè)如何的操作？
1.因?yàn)?code>obj對(duì)象是一個(gè)引用類型,所以把全局作用域下的obj對(duì)象 通過xxxfff000地址找到所指向的開辟的內(nèi)存空間例隆，然后把內(nèi)空間中的name屬性改成‘預(yù)解釋’
如果我們執(zhí)行console.log(demo),此時(shí)內(nèi)部是進(jìn)行了一個(gè)如何的操作甥捺？
1.因?yàn)?code>demo是一個(gè)function,也是一個(gè)引用類型，此時(shí)會(huì)通過xxxfff111地址找到所指向的開辟的內(nèi)存空間裳擎，里面存儲(chǔ)的是一個(gè)轉(zhuǎn)成字符串的demo函數(shù)體的整體代碼段,此時(shí)就會(huì)把整個(gè)函數(shù)整體代碼段輸出出來 //function demo(){console.log('光明頂開課了')}
如果我們執(zhí)行console.log(demo()),此時(shí)內(nèi)部是進(jìn)行了一個(gè)如何操作涎永？
1.因?yàn)榇藭r(shí)是demo()思币，函數(shù)通過一個(gè)()括號(hào)鹿响，還是會(huì)通過xxxfff111地址找到所指向的開辟的內(nèi)存空間羡微，里面存儲(chǔ)的是一個(gè)demo函數(shù)體的整體代碼段，此時(shí)會(huì)執(zhí)行里面的代碼段惶我，進(jìn)行兩部操作妈倔，第一是執(zhí)行代碼段中的代碼運(yùn)行程序，會(huì)打印出'光明頂開課了',二會(huì)返回一個(gè)值,返回結(jié)果是通過函數(shù)代碼段中return后的結(jié)果绸贡，如果沒有return則默認(rèn)返回undefined
預(yù)解釋
在當(dāng)前的作用域中盯蝴，js代碼執(zhí)行之前瀏覽器首先會(huì)默認(rèn)的把所有帶var,let,const的操作符和function進(jìn)行提前的聲明或者定義
一.理解聲明和定義 【聲明】declare 【定義】defined
先看 var name = 'ziksang'看看瀏覽器引擎給它做了那些預(yù)解釋
在預(yù)解釋中是分為兩大部分完成的，一部分是聲明听怕，一部分是定義
1.聲明 （代表將要在全局環(huán)境下要聲明一些標(biāo)識(shí)符捧挺，這些將通過你的代碼來解析） 告訴瀏覽器在全局環(huán)境下通過操作符聲明一個(gè) name的標(biāo)識(shí)符（變量)
2.定義 （代表就是給全局環(huán)境下聲名出來的標(biāo)識(shí)符(變量)進(jìn)行定義基本類型或引用類型的值） name='ziksang' 把name變量定義了一個(gè)string基本類型的值
預(yù)解釋的定義
是瀏覽器引擎的一種機(jī)制，在當(dāng)前的作用域當(dāng)中尿瞭，代碼執(zhí)行之前闽烙，瀏覽器分默認(rèn)把帶標(biāo)識(shí)符或者function關(guān)鍵字的進(jìn)行提前的聲明和定義。
二.對(duì)于標(biāo)識(shí)符var 和 function關(guān)鍵字在預(yù)解釋時(shí)的區(qū)別之處
此時(shí)我就可以延伸出一個(gè)面試題 請(qǐng)問題1題2分別打印出什么声搁，請(qǐng)說出原理黑竞！
題1
function demo(){
console.log(1)
}
var demo = function(){
console.log(2)
}
demo()
題2
var demo = function(){
console.log(2)
}
function demo(){
console.log(1)
}
demo()
題1打印出的是2，題2打印出的還是2....為什么呢疏旨？
首先我們先看看標(biāo)識(shí)符var 和 function關(guān)鍵字在預(yù)解釋時(shí)的區(qū)別之處
在預(yù)解釋過程中很魂，標(biāo)識(shí)符先聲明再定義，而function關(guān)鍵字是聲明定義一起完成
先看執(zhí)行過程的瀏覽器解析和內(nèi)存空間分配圖
再看看瀏覽器預(yù)解釋過程分析和內(nèi)存空間分配圖
從上面兩個(gè)制圖我們可以找到原理檐涝，函數(shù)表達(dá)式用的是標(biāo)識(shí)符聲明的遏匆，預(yù)解釋層的第一層聲明層只是對(duì)操作符demo變量進(jìn)行聲明，而函數(shù)聲明function demo在聲明層不但聲明而且還進(jìn)行了定義谁榜，導(dǎo)致在定義層的的時(shí)候拉岁，函數(shù)表達(dá)式覆蓋了函數(shù)聲明，所以題1題2都打印出來是2
三.預(yù)解釋導(dǎo)致變量提升
這些問題也很能考成一個(gè)面試題惰爬，還是對(duì)預(yù)解釋的理解
console.log(name)
var name = 'ziksang'
console.log(name)
demo()
function demo(){
console.log('光明頂開課啦')
}
看看執(zhí)行預(yù)解釋流程圖
首先預(yù)解釋喊暖，先不執(zhí)行里面的代碼，提前先解析的是聲明層撕瞧，把用標(biāo)識(shí)符和function關(guān)鍵字聲明的變量或者函數(shù)聲明先提前解析聲明
此時(shí)name先進(jìn)入聲明層陵叽，先聲明一個(gè)var name，再聲明一個(gè)function demo,同時(shí)函數(shù)聲明在聲明層同時(shí)進(jìn)行了定義丛版，那就是把整個(gè)function demo(){console.log(‘光明頂開課了’)}提到了代碼最頂層的解釋層的聲明層里巩掺，此時(shí)從上往下執(zhí)行代碼，第一個(gè)執(zhí)行到console.log(name)页畦，因?yàn)閚ame只是進(jìn)行了變量提升到了解釋層的聲明層并沒有定義胖替，如果沒有定義則就是undefined;代碼再往下走，name進(jìn)行了定義直接進(jìn)入了定義層，name定義為'ziksang'独令，此時(shí)再執(zhí)行到console.log(name),則返回‘ziksang’,代碼往下走端朵，執(zhí)行到demo()的時(shí)候，函數(shù)聲明已經(jīng)提到了解釋層的聲明層并且進(jìn)行了定義燃箭，所以執(zhí)行demo()并不會(huì)報(bào)錯(cuò)冲呢，而且會(huì)返回'光明頂開課啦'
總結(jié)，這里講解了對(duì)瀏覽器預(yù)解釋的認(rèn)識(shí)招狸，并且通過預(yù)解釋認(rèn)識(shí)到變量提升的原因敬拓，對(duì)標(biāo)識(shí)符和function聲明的函數(shù)的區(qū)別有了一定的認(rèn)識(shí)，更加深入的了解了聲明和定義的一個(gè)生命周期
沒有經(jīng)過本人同意不得轉(zhuǎn)載裙戏，如果經(jīng)過本人同意轉(zhuǎn)載后請(qǐng)標(biāo)注出自@混元霹靂手-ziksang
