JavaScript 核心觀念(9)-JS回收機制

 今天要來簡單講一下，關於JS的回收機制究竟是什麼東西


主要的概念會是記憶體的存放與釋放

執行環境中，會創造屬於它的記憶體空間，離開執行環境時，釋放記憶體。

*會在沒有任何物件使用到的時候，回收記憶體。

以下是依些小撇步

需要一直使用 → 放全域變數

函式fn()內需要而已 → 放區域變數

consoel.log也會占用記憶體空間哦


*Chrome小工具

F12開啟開發者工具 → 選擇Memory頁籤 → 按下Take heap snapshot按鈕

可以看網頁佔用了多少記憶體哦。



『如果你能做你擅長的事同時又快樂，

你在生命中以走的比大多數人還遠。』－李奧納多．狄卡皮歐

评论

发表评论

此博客中的热门博文

JavaScript 核心觀念(8)-執行緒與同步、非同步

图片
 嗨，大家好 我是Kris，今天要來分享關於JS的執行緒、事件佇列是如何進行的 那就開始吧~ 單執行緒：一次只能做一件事，做完才會做下一件事，JS就是如此，像是單工的感覺。 多執行緒：可以同時執行多個任務。 同步：依照程式碼依序執行fn() 非同步：針對程式語言本身，放到最後才做。 如同上面範例，doWork()會依序執行三個fn()，且都要等上一個完成才能進行下一個。 非同步：因應JS的某些程式的特性，能達成非同步的樣子。 如同上方範例的setTimeout的用意是隔3秒再執行，JS的處理方式是會先放置事件佇列，讓我們繼續瞭解事件佇列是什麼吧！ 事件佇列：非同步行為先移到事件佇列，JS還是依照同步的概念在執行程式碼哦！ 依照之前分享過的執行堆疊的概念，會先進入do work()、接著eatBreakfast()完成後離開堆疊，再執行callSomeone() 由於callSomeone內有setTimeout屬於非同步事件，會先放到事件佇列Event Queue，也就是圖片中的右邊方格，等待同步執行結束後再進行。 *注意setTimeout不管秒數設定幾秒都是這樣執行，就算是0秒也是哦* 非同步的例子 addEventListener是屬於監聽事件，那範例寫的意思是當有人點擊時，再去執行clickThis 跟setTimeout一樣是一個非同步事件，會先放到事件佇列等待被點擊的時候才會觸發。 補充 事件佇列有多個非同步事件時 *setTimeout有確定秒數，就可以知道誰先執行 *如果沒有確定，其結果會是隨機的，可以用Promise解決 *AJAX也是非同步事件，需要等待回傳資料 *監聽事件是等使用者觸發才會執行 *非同步的概念是因為JS在執行需要呼叫其他資源時，不能準確知道他的完成時間，所以才會先放到事件佇列。 『用現在的努力，換自己喜歡的人生』
阅读全文

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 額外補充 一．！...
阅读全文

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的錯誤訊息 在遇到的時候才不會很慌張很苦惱，很有可能只是一些小地方沒注意到，修正過來就好囉。 『把前進的動力從因...
阅读全文