JavaScript 核心觀念(2)－執行的錯誤情境 (RHS, LHS)

哈囉大家好，我是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的錯誤訊息
在遇到的時候才不會很慌張很苦惱，很有可能只是一些小地方沒注意到，修正過來就好囉。


『把前進的動力從因為害怕失敗而咬牙硬撐的努力  
  變成 
  因為喜歡能夠完成挑戰的自己而勇敢努力』

评论

发表评论

此博客中的热门博文

JavaScript 核心觀念(5)－執行環境(Execution context)與執行堆疊(Execution stack)

图片
 嗨，大家今天開心嗎? 我是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
阅读全文

JavaScript 核心觀念(7)-執行環境與作用域-提升Hoisting

图片
嗨，大家好嗎? 我是Kris 今天要來分享一個我個人認為很有趣的觀念 以下截至  MDN  說明 提升（Hoisting）是在 ECMAScript® 2015 Language Specification 裡面找不到的專有名詞。它是一種釐清 JaveScript 在執行階段內文如何運行的思路（尤其是在創建和執行階段）。然而，提升一詞可能會引起誤解：例如，提升看起來是單純地將變數和函式宣告，移動到程式的區塊頂端，然而並非如此。變數和函數的宣告會在編譯階段就被放入記憶體，但實際位置和程式碼中完全一樣。 所以提升只是一個用來釐清JS如何運行的觀念，瞭解JS創造階段、執行階段做了什麼 對程式碼的結果又有什麼影響呢? 首先 JS在函式、變數宣告時，會先建立一個記憶體空間來存放他們的key&value，如下圖 var   a  =  '1'; 在創造階段時建立a的儲存空間，但尚未賦予值，在執行階段時才會賦予值 所以可以將它看作這樣  ↓ //創造階段 var a; //執行階段 a = '1'; 函式陳述式在創造階段就會優先載入，並且將整個函式內容一起寫入 我們直接來看一個範例碼 * 函式比變數有更高的優先權 ，所以會比變數更優先被建立 * 所以，答案如下 console.log(myName);   //小明 在創造階段時，myName尚未被賦予值，在那個時候會儲存的值為undefined。 是因為JS必須告訴我們它已準備好記憶體空間，若沒有給值會出現Error。 因此！ 上面的範例程式碼，並不會進入if條件式！ If裡的 myName 在創造階段時值為 undefined，故判斷式不會執行 後面 myName 又被賦予“小明”，所以myName 的值會印出小明 ＊if(myName)  是在判斷myName是否為 falsy值，是的話不會執行，否的話才執行 myName是falsy值，所以不會進入if(myName)的判斷式裡。 ＊常見 falsy值有 false、null、undefined、NaN、 0、 -0、""、'' ＊參考範例： https://developer.mozilla.org/zh-CN/docs/Glossary/Falsy 額外補充 一．！是一個NOT語句，會將結果反轉
阅读全文

JavaScript 核心觀念(6)-執行環境與作用域-範圍鍊

图片
嗨~大家好，我是Kris 今天要來說明 為什麼明明宣告在外層的變數甚至是不同地方的函式，卻可以正確的呼叫與執行。 範圍鍊 函式裡面沒有需要的變數時，就會向外層尋找 變數在外層宣告，但內層卻可以取得 JavaScript是語法作用域，所以並不會與執行堆疊有任何關係。 因此fu1()不會因為他是在fu2()下被呼叫 就去尋找fu2()裡的var value = 2;     而是會去外層尋找外面的var value =1;。 範圍鍊真正的意思是「當函式本身沒有相對應的變數或函式時，就會向外層去尋找」 而這個尋找的過程就是【範圍鍊】，因此這邊與執行堆疊、執行環境不會有任何直接關係。 JavaScript 因為是語法作用域的關係，在程式碼撰寫完畢時，就已經決定了作 用域。 以下提供幾個範例，大家可以跟著做做看哦 不同情況下分別會列印出什麼呢? 答案放在最下方 1. 2. 3. 4. 5. 解答分隔線 ---------------------------------------------------------------------------------------------------------------------------------------------------------------- 1.  哈囉~老媽 2.  哈囉~老媽 3.  哈囉~漂亮阿姨 4.  哈囉~老爸 5.  哈囉~老媽 //1. 只執行sayHi()，sayHi()裡沒有person此變數，因此向外層尋找，找到全域變數的'老媽' 其他兩個fn裡的變數皆是區域變數，不影響sayHi() //2. doMorningWork()裡的變數為區域變數，不影響sayHi(); *函式沒有被呼叫就不會執行哦，所以meetAuntie()不會執行 //3. 執行meetAuntie()時內部有person，故印出'漂亮阿姨' 不被doMorningWork()的'老爸'影響 //4. 執行meetAuntie()時內部沒有person變數，所以向外層doMorningWork()尋找所以印出'老爸' //5. 執行meetAuntie()時內部沒有person變數，所以向外層doMorningWork()尋找也找不到時 就會再
阅读全文