光明頂開課了 JAVAscript 第一課（預解釋）

做者 混元霹靂手-Ziksang

本文章將是一套系列課程，偏進階,面向有JAVAscript基礎的讀者，文章以精簡、通俗意通爲主要講解方式，全方位的帶你進入JAVAscript集中知識點學習，讓零散的知識點一步一步的聚攏，但願你們有所收穫！

咱們先回顧一下js中的數據類型有那些？

一.基本數據類型
1.number
2.string
3.boolean
4.null
5.undefined
二.引用數據類型
1.object ---- {}對象 ---- []數組 ---- /^$/正則 ---- Date時間
2.function

基本數據類型和引用數據類型區別在於什麼地方？

1.基本數據類型：是按照值來操做的
2.引用數據類型：是按照引用地址來操做的

看個demo例子

var name = 'ziksang'
var obj = {name : '混元霹靂手', age : "23" }
function demo () {
    console.log('光明頂開課了')
}複製代碼

1.當HTML加載頁面的時候，提供了一個全局js代碼執行的環境 ---- 全局做用域
在node環境下（global）
在瀏覽器下 （window）

下圖會詳細解釋 以上代碼的在全局做用預解釋的執行流程

若是咱們此時把obj.name = '預解釋',此時內部是進行了一個如何的操做？
1.由於obj對象是一個引用類型,因此把全局做用域下的obj對象 經過xxxfff000地址找到所指向的開闢的內存空間，而後把內空間中的name屬性改爲‘預解釋’

若是咱們執行console.log(demo),此時內部是進行了一個如何的操做？
1.由於demo是一個function,也是一個引用類型，此時會經過xxxfff111地址找到所指向的開闢的內存空間，裏面存儲的是一個轉成字符串的demo函數體的總體代碼段,此時就會把整個函數總體代碼段輸出出來 //function demo(){console.log('光明頂開課了')}

若是咱們執行console.log(demo()),此時內部是進行了一個如何操做？
1.由於此時是demo()，函數經過一個()括號，仍是會經過xxxfff111地址找到所指向的開闢的內存空間，裏面存儲的是一個demo函數體的總體代碼段，此時會執行裏面的代碼段，進行兩部操做，第一是執行代碼段中的代碼運行程序，會打印出'光明頂開課了',二會返回一個值,返回結果是經過函數代碼段中return後的結果，若是沒有return則默認返回undefined

預解釋

在當前的做用域中，js代碼執行以前瀏覽器首先會默認的把全部帶var,let,const的操做符和function進行提早的聲明或者定義

一.理解聲明和定義 【聲明】declare 【定義】defined

先看 var name = 'ziksang'看看瀏覽器引擎給它作了那些預解釋

在預解釋中是分爲兩大部分完成的，一部分是聲明，一部分是定義
1.聲明 （表明將要在全局環境下要聲明一些標識符，這些將經過你的代碼來解析） 告訴瀏覽器在全局環境下經過操做符聲明一個 name的標識符（變量)
2.定義 （表明就是給全局環境下聲名出來的標識符(變量)進行定義基本類型或引用類型的值） name='ziksang' 把name變量定義了一個string基本類型的值

預解釋的定義

是瀏覽器引擎的一種機制，在當前的做用域當中，代碼執行以前，瀏覽器分默認把帶標識符或者function關鍵字的進行提早的聲明和定義。

二.對於標識符var 和 function關鍵字在預解釋時的區別之處

此時我就能夠延伸出一個面試題 請問題1題2分別打印出什麼，請說出原理！

題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....爲何呢？
首先咱們先看看標識符var 和 function關鍵字在預解釋時的區別之處
在預解釋過程當中，標識符先聲明再定義，而function關鍵字是聲明定義一塊兒完成

先看執行過程的瀏覽器解析和內存空間分配圖

再看看瀏覽器預解釋過程分析和內存空間分配圖

從上面兩個製圖咱們能夠找到原理，函數表達式用的是標識符聲明的，預解釋層的第一層聲明層只是對操做符demo變量進行聲明，而函數聲明function demo在聲明層不但聲明並且還進行了定義，致使在定義層的的時候，函數表達式覆蓋了函數聲明，因此題1題2都打印出來是2

三.預解釋致使變量提高

這些問題也很能考成一個面試題，仍是對預解釋的理解

console.log(name)
var name = 'ziksang'
console.log(name)
demo()
function demo(){
   console.log('光明頂開課啦')
}複製代碼

看看執行預解釋流程圖

首先預解釋，先不執行裏面的代碼，提早先解析的是聲明層，把用標識符和function關鍵字聲明的變量或者函數聲明先提早解析聲明

此時name先進入聲明層，先聲明一個var name，再聲明一個function demo,同時函數聲明在聲明層同時進行了定義，那就是把整個function demo(){console.log(‘光明頂開課了’)}提到了代碼最頂層的解釋層的聲明層裏，此時從上往下執行代碼，第一個執行到console.log(name)，由於name只是進行了變量提高到了解釋層的聲明層並無定義，若是沒有定義則就是undefined;代碼再往下走，name進行了定義直接進入了定義層，name定義爲'ziksang'，此時再執行到console.log(name),則返回‘ziksang’,代碼往下走，執行到demo()的時候，函數聲明已經提到了解釋層的聲明層而且進行了定義，因此執行demo()並不會報錯，並且會返回'光明頂開課啦'

總結，這裏講解了對瀏覽器預解釋的認識，而且經過預解釋認識到變量提高的緣由，對標識符和function聲明的函數的區別有了必定的認識，更加深刻的瞭解了聲明和定義的一個生命週期

沒有通過本人贊成不得轉載，若是通過本人贊成轉載後請標註出自@混元霹靂手-ziksang