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語句，會將結果反轉成與原本相反

ex：!myname  將myName的值反轉，故falsy值會變成truthy值。

二．not defined和undefined的差別

not defined

是變數、函式..等未被宣告建立、定義，在電腦執行程式碼時找不到這個東西，可以想成在程式與記憶體中未被定義。

undefined

是建立後尚未賦值時，預設的值，而這個值表示值還沒被定義。

今天就到這邊告一段落，會持續更新上課筆記，如果有錯誤的地方可以下面留言告訴我。

『火花是活著的熱情，不是活著的目的。』－靈魂急轉彎

『追逐海洋的時刻，也許已經置身於海洋之中。』－靈魂急轉彎