---
# System prepended metadata

title: JS 函數宣告 var let const 差異

---

# JS 函數宣告 var let const 差異

## jQuery 套件


https://cdnjs.com/libraries/jquery

貼在載入檔案前的位子

## 常數和變數宣告

JS 在做的時候其實是兩階段執行 先建立再執行

關於 var 變數提升的解析 

建立期
1a 先註冊
1b 初始化
creation Phase

執行期
2 執行函式/賦值

範例:
```javascript=
var a =1;
console.log(a)
```
建立期
這邊先註冊了變數 a (1a)，然後進行了初始化讓a = undefined(1b)，並且不會執行console.log





範例2:
```javascript=
console.log(a)
var a =1;
console.log(a)
```

let,const不會初始化，而沒有初始化的變數是不能使用的(TDZ)，直到被賦予值



var - function scope

let,const - block scope

## 函數宣告
可以宣告在下方並在上方執行的原因

建立期 → 執行期
function會一次把建立期跟執行一次做完


## 全域屬性

let,const防止全域汙染

```javascript=
var a =1
let b =2
```

window.a 會被賦予 1
window.b 會undifined

若沒宣告變數直接給值都會變全域屬性

xyz = 123  =>  window.xyz = 123

---


**function 執行環境 (execution context)**

每個函數執行都會產生一個泡泡

Scope Chain 找不到往外層找

沒有宣告就會變成全域賦值(window)，就會造成全域汙染
(const 不能被reassign 所以宣告const就不會被汙染)

---

**Bubbling event**

先捕獲再冒泡

capturing phase → target phase → bubbling phase

target 撞到底的那個

currenttarget 觸發事件的傢伙


---

**非同步處理**

setTimeout (function, sec(毫秒))

stack 堆疊 先進後出


setTimeout的任務讀完秒要去Queue等待，等待stack裡面的任務執行完後才會執行 setTimeout的任務，這整個流程較Event Loop

Event Loop:
http://latentflip.com/loupe/?code=JC5vbignYnV0dG9uJywgJ2NsaWNrJywgZnVuY3Rpb24gb25DbGljaygpIHsKICAgIHNldFRpbWVvdXQoZnVuY3Rpb24gdGltZXIoKSB7CiAgICAgICAgY29uc29sZS5sb2coJ1lvdSBjbGlja2VkIHRoZSBidXR0b24hJyk7ICAgIAogICAgfSwgMjAwMCk7Cn0pOwoKY29uc29sZS5sb2coIkhpISIpOwoKc2V0VGltZW91dChmdW5jdGlvbiB0aW1lb3V0KCkgewogICAgY29uc29sZS5sb2coIkNsaWNrIHRoZSBidXR0b24hIik7Cn0sIDUwMDApOwoKY29uc29sZS5sb2coIldlbGNvbWUgdG8gbG91cGUuIik7!!!PGJ1dHRvbj5DbGljayBtZSE8L2J1dHRvbj4%3D

---