今天不廢話，工作量爆表，我們直接來開始正篇吧!!

part1

js的執行環境

一般來說我們工程師的執行環境有兩種

1. 這個函數與變數的執行環境
   • 一個變數的生命週期
   • 一個全域Global的執行所在環境...
     • 這部份我們會在三天後的 "物件宣告與函式宣告" 一起來討論
2. 這個語言的執行環境
   • 例如java需要JVM，tomcat需要catalina，js當然也有他的引擎以下對引擎做介紹

     1. 各家瀏覽器都有他自己的js引擎，所以才會發生有些語法在這個瀏覽器可以跑，另一個又不行這邊簡單介紹最強與最廢

        • Chakra 用於Internet Explorer
        • V8 用於Google Chrome
          • ps:以上都可以點連結去看看，在2012時微軟就已經快對IE放棄治療了

     2. 一般來說一個瀏覽器引擎有兩個，一個接口

        1. Javascript Engine

           • 每個JS引擎都實現了一個版本的 ECMAScript，例如IE11就是實現ES5，所以完全不能使用ES6的語法

           • 每個JS引擎自帶一個優化虛擬機，會自動幫你的JS文檔 建構模塊 其中包括分析、解釋、優化、垃圾回收你所寫出來的東西

           • 運作模式如下

             1. 載入http所得到的.js文檔(源代碼)
             2. 將整篇文件轉成字符串送入引擎翻譯，再來把這些字符串轉換，變成編譯器可以理解的程式碼，最後執行這些程式碼
             3. 其中還包括JS的執行堆疊，執行堆疊（called stack）會記錄目前執行到程式的哪個部分，如果進入了某一個函式（step into），便把這個函式添加到堆疊（stack）當中的最上方；如果在函式中執行了 return ，則會將此函式從堆疊（stack）的最上方中抽離（pop off）。
             • 所以這就是為甚麼有時候js處理字串很麻煩，不是輸出不換行，就是忘記加括號直接把方法函式當字串吐出去
        2. Rendering Engine
           • 會把html與CSS整理資訊後在頁面上顯示，中文一般叫樣版引擎
           • 一般來說中文技術文檔又會叫他渲染引擎，有許多框架，例如VUE、jquery等等都有自備函數自動去更新畫面上的文字或著CSS狀態，因此引擎間互相是可以溝通的....
             (算嗎?其實是js改變html或css進而觸發渲染引擎改變頁面)
        • HTTP Request
          • 瀏覽器與外界溝通的接口

好的，那麼來開始說說AJAX是怎麼一回事吧
今天不管是寫VUE 用Axios
或著是寫一般網頁用jQuery
(但請尊重時代的進步，不要導了整個Jquery然後只用ajax)

以jquery舉例

function(){
    dothing.....
    $.ajax({
            type: "method",
            url: "url",
            data: "data",
            dataType: "dataType",
            //async: false
            success: function (response) {
                
            }
        });
    dothing2.....
}

如果今天執行了這個方法那麼最有可能的執行順序是甚麼呢?

1. dothing->ajax.success function()->dothing2
2. dothing->dothing2->ajax.success function()

如果今天瀏覽器引擎、接口、通通都是單一執行緒的話就是1
言下之意就是，一般來說會是工程師非預期的2

哪尼?!
JS不是單執行緒為何會跳著執行?
其實這個方法的執行步驟如下

1. 方法執行->dothing開始動作
2. 進行ajax開始向指定url傳送資料與回傳資料
   • 由HTTP Request接口送出
3. 繼續執行dothing2
4. 取得url回傳資料，開始進行success function()

沒錯在第二步時，js仍然是單一執行緒
只是有些事情被瀏覽器別的部分( HTTP Request)拿去運行
而一般網路沒有光速快到還沒執行dothing2而就接到url的回傳
因此造成了工程師的非預期結果
所以有時候我們會加上下面這東西來避免這種情況發生
或著乾脆一個方法就直接指運行ajax

async: false

part2

js的專有詞彙

1. 語法解析器(Syntax Parser)

   • 在讓電腦看得懂我們這群程序猿們到底在叫他們做些甚麼換香蕉

   • 剛剛稍微提到過就是把文檔變字符串，然後變程式碼，也就是說可以理解成當語法解析讀到var、let、const時就明白，現在要切一塊地方宣告變數、當讀到function時就會知道這個東西會被提升(hoisting)，

   • hoisting這個js中很神奇的步驟會在後面的文章提到

2. 詞彙環境(Lexical Environment)

   • 程式碼與皆切割出來的變數、方法等等等實際所存放的地方
   • 這個地方的存放順序比起java等強類型語言來說顯得比較不直觀，他會先通通放在記憶體裡並不會執行，然後等待事件觸發後運行指向對應的記憶體位址與其他函數或變數做運算與執行

3. 名稱/值(Name/Value)

   • 不同於key/value，就只是一般的變數宣告，而js的function也可以是變數，這部分在學過js後去理解java的lamda表達示就會比較輕鬆

4. 全域環境與全域物件

   • 先來說說物件是甚麼

var obj={
        person:{
            gender: '男',
            position: 'coder',
            info: {
                weight: 90,
                height : 200
            },
            dothing: function(time){
                if(time==1700){
                    下班();
                }
            }
        }
}

好的這就是一個物件的基本型態
一個變數之中有許多的key/value
在js中function也可以是value在一般情況下與字符串沒有差別
只是加上()圓括號就可以執行裡面的程式碼

• 我們繼續說明全域環境與全域物件

  • 全域物件與全域環境會在這個頁面一開啟，JS引擎變會產生一個叫做(window)的物件，其中放置了這個頁面的所有訊息

  • 當然如果我們有變數宣告在"方法體之外"這個變數也會變成全域變數

  • 更詳盡的東西我們也會在四天後進行說明