# <font class="h2">拉升(hoisting)</font>

###### tags: `javascript`
<style>
.h2 {
background: linear-gradient(135deg,#fff,#537479) ;
color: #537479;
display:block;
padding: 6px 5px;
border-radius: 4px;
}
.h3 {
background: linear-gradient(180deg,#fff 50%,#c9d5d4) ;
color: #537479;
display:block;
padding: 6px 5px;
border-bottom: 3px solid #537479;
}
.h4 {
color: #537479;
font-weight:bold;
font-size:1.1em;
}
</style>
<br>

:::danger
一但變數是使用var宣告，就要小心hoisting
變數宣告一律都放在函式內最前面，可避免 Hoisting 問題。
:::
:::info
hoisting 是指「==一種把宣告提升到其所區域內最頂端==」的內部行為，不過提升行為指僅僅只針對宣告的部分，對於變數值的設定，並沒有跟著被提升。
:::

==在宣告一個變數或函式之前，就能夠讓這個變數能先被使用，而不會出錯==。javaScript最特別的地方就是在你要使用一個變數之前，不一定要先宣告，只要在相同環境底下的其他地方有宣告，就不會發生錯誤。在許多常見的其他語言如果不先宣告，通常這時候都會出錯。
<br>

**全域執行環境會做幾件事**
- 創造全域環境(全域物件)
- 創造this變數，並指向全域物件
- 進行記憶體指派的流程

記憶體指派就是了解提升(hoisting)的關鍵

:arrow_right:[執行環境execution contexts與執行堆疊execution stack](https://hackmd.io/@grayshine/S1wsLhXLY)
<br>

### <font class="h3">執行環境分兩階段:1.創造環境、2.執行</font>


<br>

### <font class="h4">記憶體是一對的</font>

<br>

### <font class="h4">➤ 1.創造環境(此時為拉升)</font>
創造環境時會將程式碼的==變數全部挑出來==，並放上key記憶體空間
這時還不會給它任何值，此時為`undefined`
:::info

在這個階段，所有宣告的變數及函式都==只有做保留記憶體空間的動作，還沒被賦予值==，這個創造許多變數的階段，因此也被稱作「創造階段」。
在「創造階段」所做的，==為變數及函式保留記憶體空間的動作，就被稱為「提升」(Hoisting)==，因為這記憶體的保留，會讓程式碼看起來很像是將變數往上提了，所以才能夠在變數宣告前被取用而不會出現錯誤，不過實際上程式並沒有真的被移動。
:::
<br>

### <font class="h4">➤ 2.執行</font>

2. 到執行階段才依序賦予它們的值

<br>

:::info
var可以拉升
例:

console.log(a); //會先給空值undefined
var a = 1;//1

:::
<br>

### <font class="h3">let 、const 的提升</font>
let 、 const 宣告變數雖然還是有提升的作用，但是還是不能像 var 那樣自由的使用，等於有跟沒有一樣。

function hello(){
    consoel.log('hello'+name);//這段無法取用的區間稱為暫時性死區 (TDZ)
    let name ='Jack'
}
hello()

`const`、`let`宣告的變數一樣會先被保留記憶體位置，但關鍵差別，它們不像`var`那樣會先被指派預設值`undefined`，在進入執行階段，變數正式被指派之前，這個變數是不允許被使用的。既然在正式被指派之前不能被使用，那麼在同一區塊內，正式指派之前，就會有一個變數看似已經存在，卻無法使用的區間，這個尷尬區間被稱為「暫時性死區」Temporal Dead Zone(TDZ)
<br>

### <font class="h3">函式</font>

除了宣告變數會保留記憶體空間(並給定預設值`undefined`)，函式陳述式(具名函式)也會做一樣的事情，差別是整段函式內容會被完整的存入記憶體空間內。
:::info

var a = '1';
function fn(){}

**創造階段:**

function fn(){}
var a


**執行階段:**

a = '1';

:::
<br>

:arrow_right:[何謂表達式(Expression)與陳述式(Statement)？](https://hackmd.io/@grayshine/SJYXEg2BF)

### <font class="h4">➤函式陳述式(具名函式)</font>

callName();
function callName(){
    console.log('呼叫小名');
}
//這樣執行結果會得到'呼叫小名'

若是函式陳述式(具名函式)，會將整個函式內容存入記憶體空間，因此==在宣告函式的區塊之前呼叫該函式是允許的==。
==陳述式會優先被升，再來提升var變數==
:::info
函式陳述式會被拉升
:::
<br>

### <font class="h4">➤函式表達式(匿名函式)</font>

callName();
var callName = function(){
    console.log('呼叫小明');
}//會報錯，callName is not a function

:::info
創造環境階段，變數會被拉升出來，

:::
<br>

範例1.-函式陳述式與函式表達式混和運用:

function callName(){
    console.log('呼叫小明1');
}
var callName = function(){
    console.log('呼叫小明2');
}
callName();//呼叫小明2

:::info
函式陳述式與函式表達式上下作替換

var callName = function(){
    console.log('呼叫小明2');
}
function callName(){
    console.log('呼叫小明1');
}
callName();//呼叫小明2

函式會優先被拉升，再來是變數
:::
<br>

範例2.

callName();
function callName(){
    console.log(Ming);
}
var Ming = '小明'
//undefined

:::info
此時callName()未被定義值，所以結果會是undefined
:::
<br>

範例3.

function callName(){
    console.log('小明')
}
callName();
function callName(){
    console.log('杰倫')
}
callName();
//杰倫
//杰倫

:::info
:::

範例4.

whosName()
function whosName(){
    if (name){
        name = '杰倫';
    }
}
var name = '小明';
console.log(name);//小明

:::info
:::
<br><br><br><br>

### <font class="h3">範例</font>

var x = 5;
(function() {
  console.log(x); //undefined
  var x = 10;
})();
console.log(x);

#### 程式實際執行過程 `var x`被提升了

var x = 5;
(function() {
  var x;
   console.log(x); //undefined
    x = 10;
  })();
console.log(x);