iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 9
1
自我挑戰組

語法改革!零基礎新手也能讀懂的JS!系列 第 9

Day09 語法改革!零基礎新手也能讀懂的JS - 變數作用域

今天要來介紹變數的作用域也就是他們之間的作用範圍!在ES6之前變數的有效範圍最小單位是用function來做分界的,但在ES6之後新增了letconst後有了變動,但在介紹宣告變數的差別之前先來說明全域變數與區域變數。

全域變數與區域變數

何謂全域變數? 顧名思義就是在哪裡都能夠使用到這個變數
何謂區域變數? 被限縮在一個範圍裡,只有這個範圍能夠使用到此變數

舉例:

var x = 1
function ck(y) {
var x = 50
return x * y
}

console.log(x)
console.log(ck(2)) 

這兩組的答案分別會是1和100。

為什麼呢?

先想想我們先前的 「在ES6之前變數的有效範圍最小單位是function」

也就是說在外面定義的變數與在函式內定義的變數,雖然都為x但是在函式內宣告的變數只有那個函式能夠使用,自然而然會蓋掉原先在外面宣告的變數,但也沒辦法拿出來使用!

而這種變數有效範圍我們稱作為 「Scope」

但要注意,有一種情況是如果這個函式找不到函式內有定義x這個變數,會自動往外面找,盡而找到最外層宣告的x,答案就會不同了!

var x = 1
function ck(y) {
return x * y
}

console.log(x) // 1
console.log(ck(2)) // 2

函式可以讀取外層宣告的變數,但外面拿不到函式內的變數

宣告的重要性

切記,一般而言使用變數的時候一定都會宣告,如果沒有宣告就會變成全域變數,等於是全站都能夠使用,這非常危險所以建議一定要宣告

我們現在看看新的情況,如果將剛剛函式內宣告拿掉答案會不會有不同?

var x = 1
function ck(y) {
 x = 50
return x * y
}
console.log(ck(2)) 
console.log(x)

答案會印出 100 和 50

你心裡一定會想著WTX!!! 沒錯我當初也跟你一樣覺得這個太不可思議了

原本所說的 「變數的有效範圍最小單位是function」 ,前提要是你在函式內有再次宣告變數,否則JS會一直往外找那個x,直到找到最外層。

再回來看看現在的情況,函式內的x變數因為沒有宣告的緣故變成了全域變數,所以這個x到了最外層的同名的變數x而不是被限制在函式內。

導致在呼叫ck()之後再印出來的x變數都會是50。

如果今天情況是先印出x在呼叫ck(),那麼答案就會是1、100


所以說如果沒有特別的情況的話記得一定都要宣告啊!
今天就講到這邊,大家明天見!


上一篇
Day08 語法改革!零基礎新手也能讀懂的JS - 函式(function)
下一篇
Day10 語法改革!零基礎新手也能讀懂的JS - 變數提升(Hoisting)
系列文
語法改革!零基礎新手也能讀懂的JS!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言