iT邦幫忙

0

JS 執行緒與同步 非同步 DAY50

  • 分享至 

  • xImage
  •  

這裡額外補充2個觀念

Not Defined VS undefined

Not Defined

console.log(a); //not defined
//因為尚未配置記憶體空間

undefined

var a;
console.log(a); //undefined
//已配置記憶體空間,但尚未賦予值

另外,在開發上
要避免 undefined 賦予到一個變數上
undefined 是系統自動編配,並非給我們直接使用
若要使用空值在一個變數上,請用 null

// 要避免 undefined 賦予到一個變數上
var a = undefined;
// 若要使用空值在一個變數上,請用 null
var b = null;

回收機制(Garbage collection)

這是有關於記憶體
函式的執行環境中,會創造自己的記憶體
當它離開的時候,也會把記憶體釋放
https://ithelp.ithome.com.tw/upload/images/20201014/20123039Xm3h3qyKlg.png
MDN : https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Memory_Management


執行緒與同步、非同步
JS 屬於一個 單執行緒(Single Thread) 的程式
單執行緒 主要是作業系統運行的概念
那它到底是什麼呢??

// 皮傑先生 有3個任務 吃飯 洗澡 看電視

// 單執行緒
// 皮傑先生同時間只能做一件事情

//多執行緒
// 皮傑先生同時間能做多件事情

這時候應該會有人說
那 JS不是有 非同步
那它又是什麼??

同步(Synchronous)與非同步(Asynchronous)

上述所提到的 單執行緒 是針對於系統的執行
非同步則是針對程式語言本身

同步
依序執行 不會因為還沒吃完早餐就跳到洗碗盤
https://ithelp.ithome.com.tw/upload/images/20201014/20123039Zb7SmlIYYE.jpg

非同步
非同步的任務(setTimeout)會往後放
那為什麼它可以往後放呢???
請往下繼續看囉~~
https://ithelp.ithome.com.tw/upload/images/20201014/201230397LqKbJ9RzE.jpg


JS還是依據同步來執行程式碼
只是非同步的行為會先移動到事件佇列
https://ithelp.ithome.com.tw/upload/images/20201014/20123039lPXZWkxumH.jpg

所以這裡的執行堆疊為

function eatBreakfast(){
    console.log('吃早餐');
}
function callSomeone(name){
    console.log('打給'+ name);
    setTimeout(function(){
        console.log(name + '回電');
    },1000)
    //這裡就算設為 0 秒 ,一樣會放到事件佇列
}
function washingPlate(){
    console.log('洗盤子');
}
function doWork(){
    var name = '小花'
    eatBreakfast();
    callSomeone(name);
    washingPlate();
}
doWork();

// doWork()
// eatBreakfast()
// callSomeone()
// callSomeone()裡的setTimeout先放到事件佇列
// washingPlate()
// 程式碼執行完
// 再執行非同步行為

這裡再舉一個例子

function clickMe (){
    console.log('成功');
}
var el = document.querySelector('p');
el.addEventListener('click',clickMe,false)
//這裡會將 click行為 放到事件佇列
//若有點擊 才會執行

經典例子

for(var i = 0 ; i < 3 ;i++){
    setTimeout(function(){
        console.log(i); // 3 執行3次 
    },0)
}
// 每次執行迴圈 setTimeout被放到事件佇列 但不會先執行裡面的函式
// 等到 i === 3 迴圈不符合 才執行setTimeout
// 這時候 i 為 3 (執行三次 因被放到事件佇列 3次)

上述例子
等我們介紹到 JS ES6 let 將會再次出現
答案會有所不同/images/emoticon/emoticon07.gif

那今天的介紹就到這裡
若有任何問題 或 內容有誤
請跟我說唷/images/emoticon/emoticon08.gif


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言