# <font class="h2">作用域是什麼?</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>
:::info
變數在程式中可以被存取的範圍。
:::

js是採用「語法作用域」，所以作用域在我們撰寫好就已經確定了

js是靜態作用域


<br>
也可以稱作 「==作用域」或「範疇」==
javascript的變數有其作用域的範圍
一旦超出這個範圍，就無法存取到這個變數

- 靜態作用域(static scop)
靜態作用域是指當function被宣告的時候，function裡面的變數就已經被決定了，在function被執行，不會重新定義該變數
- 相比動態作用域更好預測

(現今多數程式語言都採用靜態作用域，例如:javascript、Java、Python)

### <font class="h3">全域變數(global variable)</font>

- 指在這份文件document中(全域)中的任何程式都可以取用該變數
- 如果使用前未經var宣告，就會自動變成全域屬性
**window物件**
- window為全域物件
- 在javascript中，最上層的物件就是window
- 全域變數會自動依附在window物件底下

每一個變數在宣告時都會有其變數領域，如果當變數領域中沒有指定變數時，則會==向外層去尋找變數==，最外層的變數，就是全域變數
:::info

function fn(){
    a = 0;
}
fn()
console.log(a);
//會得到a為0

沒宣告的話，會是全域「屬性」
:bulb:沒有宣告的話，會造成全域汙染，變得髒。要盡可能去宣告變數
:::
當我們在最外層(不在任何函式與區塊中)宣告變數時，這個變數即成為全域變數，可以被任何文件中的程式取用
你也可以在函式中去改變全域變數的值
==如果是宣告在函式或區塊中的變數，我們在最外層將無法讀取該值==

### <font class="h3">區域變數</font>
- 每一個funtion都有自己的作用域，在作用域外面你就存取不到這個作用域內所定義的變數
- 在ES6以前。唯一產生作用域的方法就是==函式作用域(Function Scope)==
- 在ES6以後新增了==區塊作用域(Block Scope)==

現今javaScript採用區塊作用域與函式作用域
<br><br><br>

### <font class="h4">➤函式作用域(Function Scope)</font>
- 代表變數的變數領域只存在於函式function之中
- 外部無法存取到函式內的變數
- 外層無法存取到函式內層的變數，但函式內層的變數可以存取到外層的變數

:::danger
當變數無法再被取用時，就會被釋放
:::

### <font class="h4">➤區塊作用域</font>
- 變數只能在區塊中存在
- 以`{}`區塊為作用域，如:let、const宣告都是採區塊作用域

([圖片來源)](https://codeburst.io/declaring-variables-in-es6-javascript-60ea37e38765)
([圖片來源)](https://codeburst.io/declaring-variables-in-es6-javascript-60ea37e38765)

<br>

### <font class="h3">使用chrome查詢全域函數、變數</font>
在Console欄位裡輸入`window`
<br>