simonallen 技術部落格

Sign in Subscribe

JavaScript

Day06 JS 是同步還是非同步?

今天來看看JS，非同步背後的原理，在課程影片中提到： JavaScript是一個單執行緒、同步的程式，它逐行執行程式碼，並不會非同步的執行程式。等等，同步? JS的特色之一不就是非同步嗎? 繼續看下去：　撇開node.js先不說，JS在瀏覽器執行時依賴引擎來驅動，而瀏覽器不是只有JavaScript引擎的存在，還有其他引擎在處理瀏覽器的其他狀態、程式。有可以呈現東西到瀏覽器畫面上的渲染引擎(Rendering Engine)，也有其他專門處理http請求的東西存在。　 JS引擎可以和瀏覽器的其他引擎、處理器互動，這個互動行為是非同步的，但JS引擎自己在運作JavaScript是同步的。如果有非同步的操作，那會發生什麼事呢? JS引擎內的等待列稱為事件佇列Event Queue，如果有事件發生，如滑鼠點擊事件，JS引擎會先將事件放在事件佇列Event Queue，當執行環境的程式都執行完成後，JS才會開始注意事件佇列，此時檢查是否有函式被事件觸發，當有事件發生如點擊事件，它會創造執行環境給這個對應的函式執行。 JS在瀏覽器的非同步行為，其實是指

Day05 變數與函式環境、外部參照

執行JavaScript時，接收到翻譯的電腦會先創造一個全域執行環境。當程式呼叫函式，就會在全域環境中創造該函式的(區域)執行環境。而每個執行環境不論全域或區域，都有屬於自己的變數作用域存在。來看看以下程式碼： function b() { var myVar; console.log(myVar); } function a() { var myVar = 2; console.log(myVar); b(); } var myVar = 1; console.log(myVar); a(); 這樣會顯示什麼呢? 在創造與執行階段，發生了什麼事?我們按照順序來看： 1. 首先電腦先創造全域執行環境。 2. 函式a、b被設定進記憶體(但還沒被呼叫執行其內容)變數myVar也被創造設定進記憶體，並且它是全域變數，它的全域是瀏覽器(window)。 3. 接著在執行階段，賦值1給myVar。 4.

Day04 undefined 與 not defined

昨天的筆記出現undefined與not defined，今天我們來看看兩者的差異。 undefined和not defined「字面上」來看都是未定義、無定義、沒有定義..之類的。但對JavaScript(以下簡稱JS)而言，兩者的意涵完全不相同。在JS的世界裡，當我們宣告變數時，JS會給變數預設的值，就是undefined。 var a = 100; // 或你要用ES6語法也可以 // let a = 100; 其實JS背後是這樣運作的，執行程式時，電腦先建立全域執行環境，接著創造階段把變數創造進記憶體。 var a; // 建立變數a // 此時a為undefined 創造階段結束後JS才把100賦值給a 那如果直接這樣寫： console.log(b); 沒宣告b就直接用console.log印出來，結果是：這是怎麼一回事呢? 因為我們並沒有宣告b這個變數存在，在電腦或瀏覽器執行JS程式碼時，會先創造全域執行環境，然後創造我們宣告的變數進記憶體。接著執行程式的運算敘述與判斷，因為我們沒宣告b，電腦執行console.l

Day03 執行環境:創造與提升

JavaScript在電腦上要執行時，會經過創造階段，這會對我們的程式碼造成什麼影響? 　來看看以下程式碼： var a = 'Hello World!'; function b() { console.log('Called b!'); } b(); console.log(a); 用瀏覽器Console來看嗯!很正常那這樣呢?下面這種寫法，有些程式語言會報錯，但JS可不會呦 b(); console.log(a); var a = 'Hello World!'; function b() { console.log('Called b!'); } 用瀏覽器Console來看 Called b!

Day02 幾個名詞小觀念

今天的筆記比較偏觀念性質，畢竟是克服JS的奇怪部分這堂課開頭的部分，但對我這個非資訊本科的人來說也很受用了。語法解析器(Syntax Parser) 程式、電腦科學的世界中，電腦並不會直接看懂JavaScript在(以下簡稱JS)寫什麼，而是會將JS轉譯成電腦看得懂的語言，可以這樣想：當我們寫好JS程式時，在執行時，我們宣告的變數、函式，就會呈現在記憶體中，由電腦去運作使用。而中間負責將我們寫的JS轉換給電腦的，就是 "直譯器、轉譯器"。它會逐字閱讀，當讀到var、let、const時，他就會知道我們要宣告個什麼東西，當讀到function，它會知道這是一個函式，只要我們在撰寫時遵守JS語法規則，執行時直譯器、轉譯器就會依照規則將其轉換成電腦認識的語言，而這個中介的引擎被稱為直譯、轉譯器。詞彙環境(Lexical Environment) 代表程式碼在程式中的實際所在位置蛤?什麼意思? Lexical代表的是和程式的語法有關，特定的程式寫在哪裡是很重要的，例如：當我們撰寫出一段宣告變數的JS語法 var food = "

Day01 前言-克服JS的奇怪部分

JavaScript，一種高階程式語言，通過解釋執行，是一門動態型別，物件導向（基於原型）的直譯語言。它經由ECMA（歐洲電腦製造商協會）通過ECMAScript實現語言的標準化。它被世界上的絕大多數網站所使用，也被世界主流瀏覽器（Chrome、IE、FireFox、Safari、Opera）支援。引述自維基百科* 大家好，我是Simon，目前是一位菜鳥F2E。有多菜呢？前端工程師任職不到三個月(第一份正職工作)。開始工作後，有感於(下班後)學習力降低，決定配合鐵人賽30天，有計畫地看一個線上課程影片，每天看一點，30天也是能累積不少知識的，這裡也感謝六角學院的活動推坑。在網頁後端的世界中，程式有很多種可供選擇；而在網頁前端的世界，稱霸這領域的就是JavaScript了。身為一個Junior碼農(笑)，工具怎麼用是一回事，了解這工具的特性又是另一回事，比起特意去摸JS框架，好好摸一摸JS的特性對我還比較有幫助。既然是筆記型式，主要目標課程則是Udemy上，不少前端工程師推薦的克服JS的奇怪部分這堂課，至少要能看完第六、七章節。希望透過鐵人賽這活動