KrisChang

 嗨，大家今天開心嗎? 我是Kris，持續發筆記來到了第六篇，有慢慢習慣這個方式來幫助自己釐清觀念 可以在上課以後再進行複習一次，加深印象，有感受到自己在慢慢進步。 持之以恆，加油！ 今天要來講執行環境&執行堆疊，這也是面試考題裡很常出的觀念題目哦！ 執行環境（Execution context） 函式的作用域是限制在function內 （變數可以使用的範圍） 但是如果沒有執行函式的話是不會有任何變數產生的！ 執行以後會產生一個執行環境以及限制作用域的功能。 函式撰寫時就確定作用域，執行它才能產生執行環境，這個執行環境才有屬於它的變數跟this。 this會隨著不同的執行環境改變（後面課程會再詳細介紹this） ＊函式呼叫以後才會產生執行環境，反覆呼叫就會一直產生新的執行環境＊ ＊ 函式宣告的變數，只在函式內能被讀取，包括宣告在函式內的函式！！＊ global全域也有自己的全域執行環境 網頁一開啟 or 後端Node.js 一開啟，就會建立全域執行環境 同時會產生全域變數→ 瀏覽器：window；Node.js：global 也會有全域執行環境的this，內容會等於window或是global。 執行堆疊 Execution stack 用執行的順序來堆疊，跟函式宣告的順序沒有關係。 就是JS執行以後，哪個函式先運行，後運行的就一層一層向上堆疊，可以更加瞭解JS是如何運行的。 以下程式碼來當範例   網頁一開起就會建立全域執行環境 然後這段codec會先執行doSomething() → sayHi() 所以執行堆疊的順序如下方影片所示 3.sayHi()執行環境  A 2.doSomething()執行環境  B 1.全域執行環境 照數字123順序執行堆疊，照英文字母ABC離開執行環境，最後回到全域執行環境。 補充說明 如何用chrome開發者工具看執行堆疊以及目前作用域 開啟chrome → 執行程式 → 按下F12開啟開發者工具 → 點選console旁邊的sources頁籤 → 按下暫停鍵⏸️ → 按下F5重整網頁 → 按下一步逐步觀察JS執行堆疊跟作用域的變化。 call Stack：執行堆疊；Scope：目前作用域；(anonymous)：代表全域執行環境 ＊在程式碼呼叫doSomething();的上一行加入debugger，可強制停在doSo

嗨，大家好，我是Kris，今天要來講JS的小知識 不同作用域到底差在哪裡？在這一篇裡面跟大家介紹三種不同的作用域。 作用域(Scope) 如同上一篇JS的語法作用域裡面提到的－ 連結按這裡 在 JavaScript 中，當一個變數被宣告的時候，它就開始有影響力，而它所影響到的地方，我們就稱之為作用域。 每一個變數都會有自己的作用域，當離開時它就不能作用了，而作用域取決於這個變數產生的地方跟方式。 作用域的等級 JavaScript 中的作用域分為三個等級 Global Level Scope Function Level Scope (Local Scope) Block Level Scope (ES6) Global Level Scope 全域作用域 在每個 JavaScript 環境中，都一定會有一個全域物件（全域環境），在 HTML 中我們稱之為 window。 在全域環境宣告的變數就稱之為全域變數，而它能影響的地方就是全域作用域。 全域變數的影響範圍非常廣大，不論是函式(function)內外，他的影響力遍布整個程式碼。 Function Level Scope (Local Scope)  區域作用域 在函式內被宣告的變數就稱為區域變數，所影響的地方就是區域作用域，也就是函式的大括號內，一旦離開 function 使用的話，就會出現 ReferenceError：xxx is not defined 未定義的錯誤訊息。 *在函式內，若變數沒有被宣告，就會被自動轉為全域變數 如上圖，b 在函式內沒有被宣告，所以變成全域變數，所以外面的 console.log 讀得到，而宣告過的 a 作用域只在test函式內作用 *如果在函式內外有相同的變數名稱，並且想要在函式內取得此變數的值，會優先使用區域變數的值，除非使用 window 才能去取得全域變數的值 Block Level Scope (ES6)  區塊作用域 是比區域更小的範圍，影響力只有變數被宣告的大括號和子區塊。 其實 function scope(區域作用域) 也可以被視為一種區塊作用域，在ES6之前的版本是不支持此區塊作用域的 在以前的版本使用var宣告變數時，是沒有區塊作用域的。 在 ES6 後才出現的 let、const ，就是支持區塊作用域，準確來說是他們只支持區塊作用域。 可以看到var宣

 嗨大家好嗎？ 我是Kris，今天要來跟大家講一個我覺得很重要的東西 算是解題時很常用到的基本觀念哦~ 相信大家應該多少都有聽過全域變數、區域變數吧 今天要來講的語法作用域就跟這個有關係 讓我們開始吧！ JS是採用語法作用域，那什麼是語法作用域呢？ 就是我們定義的變數能夠發揮功能的區域！ 接下來可以跟著動手做做看 圖1 建立一個function 叫做callName 在函式內定義變數Ming並且給予'小明'的值 再用console.log列印出Ming的值。 在主程式呼叫callName(); //這樣callName這個function才會運行 會得到結果：上方圖1右方網頁上反白的資料(會印出小明) 接著假設我們把 console.log那一行移至呼叫callName(); 的下一行 如同下圖2 圖2 會得到結果：圖2右方網頁上寫著錯誤訊息－Ming is not defined（Ming未定義） 這是因為JS有語法作用域的關係 因此var Ming = '小明' 能夠發揮功能的區域只在callName這個function內（大括號{}裡面） 在外層是讀不到的，這就是因為作用域的關係~ 語法作用域也跟JS怎麼運行有很大的關係 講到語法作用域呢會牽扯到靜態作用域&動態作用域 靜態作用域也就是語法作用域（JS使用的） 指的是在語法解析什就確定能夠發揮功能的區域（就像上面例子寫callName函式時就確定了） 而動態作用域指的是在函式被調用的時候才會決定作用域 重點筆記👇 靜態作用域 變數的作用域在語法解析時，就已經確定作用域，並且不會改變。 動態作用域 變數的作用域在函式調用時才決定。 JS的作用域是一層一層向內的 最外層有一個全域的作用域，內層是由function所包住（全域作用域所定義的變數=全域變數） 如下圖，callMe和fn2就是兩個獨立的作用域 如果內層作用域有需要一些變數，但是此作用域內沒有這個變數的時候 就會向外查找，找到的話就會拿來使用 找不到時就會出現 變數is not defined 的錯誤訊息 接下來用程式碼來解釋一下靜態作用域&動態作用域 先將剛剛的code註解，再來打新的code 首先定義變數value = 1 再建立兩個function分別是fn1()和fn2() fn1()裡使用cons

哈囉大家好，我是Kris 今天要來介紹在JS裡面比較常見的錯誤 RHS、LHS跟取值以及賦予值有很大的關係 以下來分別跟大家解釋⬇️ RHS(Right-hand side) RHS取值來自右側的變數上 像是 console.log(ming);     //ming有定義過（var ming ='小名') 紅色這行就是從右側的變數ming取值來讓console.log可以印出變數的值 console.log(min);   //min沒有定義過 錯誤訊息：ReferenceError : min is not defined. 這個錯誤訊息就是在說min是沒有定義過的變數，因此沒有辦法取到他的值，導致錯誤。 RHS不會在編譯過程中直接出現錯誤，要在執行階段才會看到錯誤 也就是網頁上按F12後看到的console才能看到這段錯誤訊息。 LHS(left-hand side) 用來賦予值到左側變數上 我們定義變數時就是LHS哦 像是var ming = '小名'； 要把'小名'這個值給ming 就是LHS 所以今天左側的值沒有辦法被賦予的時候就會出現錯誤訊息啦 ex：'小明' =1; 錯誤訊息：Invalid left-hand side in assighment. 意思就是左側值無法被賦予，'小明'不是一個變數沒有辦法被賦予值。 LHS屬於編譯過程中所發生的錯誤，編譯的結果不會出現。 在開發環境就會看到錯誤訊息，網頁上看不到執行後的結果。 RHS也可以用在其他地方，並不是只有在函式取值的時候。 ex：var man = ming; 用RHS取得右側變數ming的值； 用LHS賦予值到左邊變數man； 這邊再分享一個常見的錯誤訊息 Error：Line3:Unexpected end of input. 就是在說Line3第三行結尾的部分有錯誤，可能是少了括號或是最重要的結尾分號'；' 在JS遇到這些錯誤呢，一定要進行修正！！ 如果沒有修正的話，後面的程式碼都不會運行，會停在有錯誤的那一行！ 所以遇到這些錯誤的時候，記得要修正哦！ 今天這一篇主要是可以更認識JS的錯誤訊息 在遇到的時候才不會很慌張很苦惱，很有可能只是一些小地方沒注意到，修正過來就好囉。 『把前進的動力從因

哈囉大家好，我是Kris 今天要來分享課程中的第一堂課－JavaScript如何運行以及直譯語言與編譯語言的差異在哪裡 因為電腦無法直接看懂原始碼，也就是我們工程師所撰寫出來的程式碼 所以會經過一些處理來讓電腦瞭解以後再去運行。 直譯語言和編譯語言的差異 直譯語言：執行前未經編譯，像是JavaScript就是直譯語言哦。 好處：彈性比較高、不需要預先定義型別。 ＊錯誤會直接反映在環境中，ex：chrome裡的console 編譯語言：會預先編譯再運行。 好處：預先編譯就可以預先除錯、語言效能比較好。 ＊大多時候我們在說某種語言為編譯或直譯語言時，指的是【 大多數 】並非全部。 就像是我們說JavaScript是直譯語言，不代表JavaScript不能有編譯器，反之亦然。 JavaScript直譯器轉換過程 語法基本單元化(Tokenizing)：將JS裡的標點符號、詞彙先分別解析出來。    ＊JS=JavaScript 抽象結構樹AST(Abstract Syntax Tree)：將整個原始碼的結構定義出來。 代碼生成： 最後一步才會生成代碼。 生成出來的代碼會根據環境的不同稍微有不一樣的地方。 ＊在結構樹的階段尚未運行程式碼 可以利用這個網站來更深入的瞭解整個轉換過程👇 https://esprima.org/demo/parse.html# 接下來操作並解釋給大家看 首先在左側輸入程式碼 var 變數 = '內容';　這邊我輸入的是【var ming = '小名';】 右側的頁籤選到Tokens，可以看到拆成了各個不同的標點符號以及詞彙。 Keyword是關鍵字，內容（value）為"var"；Punctuator是標點符號。 有點像小時候寫作文時，需要先瞭解各個詞語的意思以及不同的標點符號代表什麼意思， Tokenizing就是在做這樣子的事情，先拆開分類但還不會瞭解我們是在定義一個變數。 點選最左側：結構樹Tree 轉換成電腦看得懂的方式，Tree有點像是JSON格式。 VariableDeclarator： 定義一個變數 kind：定義變數的方法是 var Identifier： 變數的字詞；name：內容是ming 然後把'小名'這個詞彙賦予進變數。 到這裡才會知道我們正在定義一個變

嗨，大家好嗎? 我是Kris，一個佔世界比例70%的生產者，卻是世界少數的四分人。 好~回歸正題哈哈哈，人類圖有機會再跟大家分享心得。 工作了兩三年卻始終找不到工作的意義 似乎只是為了賺錢而工作(? 於是我決定停下腳步，好好感受、好好思考自己的未來方向。 待業的日子裡，身為拖延症患者的我，總是腦袋想很多，實際作為卻不多 但在經歷了面試不順利以後，好好的正視自己能力不足。 決定找線上課程！ 我購買的是六角學院－JavaScript核心篇 感受跟以前上巨X那種差很多哈哈，但因為才剛開始上課所以就暫時先不評論。 上課的過程裡都會在這裡更新文章，跟大家分享心得~ 開始自我學習的第一步－撰寫部落格Blog 寫部落格有什麼好處呢? 讓履歷更豐富、加分 擁有個人品牌、網站，在面試時履歷更加分，可以讓面試官更清楚了解你學習過什麼，以及你自我研究、自我學習的能力高，而不是空口說白話而已。   替自己整理技術脈絡、進行自我學習後的復習 網路上的文章、課程看再多遍，如果沒有真正吸收就不是自己的東西。 透過撰寫文章的方式，同時也是再次幫自己整理觀念，深度學習。 增加網路聲量  假設有一天辭了工作後，你除了公司的職稱以外還剩下什麼標籤？建立網路上的聲量，讓自己擁有其他標籤。 透過撰寫部落格的方式，幫助自己學習，也記錄了成長的過程，就像是作品集能夠給面試官參考，增加自己的價值，提高面試錄取率。   我還是新手，應該沒辦法寫文章教別人吧？ 只要你開始做，不管分享什麼都一定有人比你晚開始會需要你的分享。每個人的背景都不盡相同，也許就是有人跟你背景很像，也跟你一樣想學習同個東西。 更資深的人寫的文章，可能會因為習慣所以有許多專業的術語導致新手看不懂，對於剛入門的人能看懂文章是很重要的事，因此你的分享對他來說就會有很大幫助。 這世界上，永遠都有比你菜的人需要你的資源分享。   該寫什麼才好呢？感覺網路上都有人寫過了 只要是你覺得重要的、怕會忘記就可以寫文章記錄下來 語法、指令或是看了其他網站後也可以寫自己理解過後的解釋 研究過後寫範例程式碼codepen，也可以幫助自己更深入學習。 生活想分享的事情也可以寫，用標籤tag分類即可，不需要侷限自己只能限定寫某個主題。（標籤tag可以讓Google搜尋用關鍵字找到就是所謂的SEO搜尋引擎最佳化，想辦法讓網站在google搜尋前幾頁，曝光率更好) 寫部落格的