Cover credit to Gastaloop 102
暸解變數全域與作用域範圍之前,先來認識一下變數。
何謂變數(Variables)
宣告變數(declaring variables) 可以理解為是一個容器,把對應資料裝進去,之後可以從變數儲存的資料取值或拿來做計算。
而Javascript的宣告(declarations)有三種方式,不同關鍵字有不同作用域和行為:
var(可重複宣告變數)
let(區塊區域宣告,同區塊區域無法重複宣告)
const(不可變常數)
接下來,會試者用比喻來形容這三個宣告變數,介紹之前先理解一下宣告變數的程式碼結構:
宣告後方接者識別字(identifiers) ,再來賦予值(Value),值可以是String, Number, Boolean, Array, Object, Constant, Null, Undefined, Symbol
var movieName='吉刻救援';//String
let judyAge=30;//Number
var isApple=true;//Boolean
var colorName=['black','white','gray']; //Array
var person={name:'chuhaha', age:3};//Object
const pi =3.14159;//Constant
var nickName=null;//Null
Var
先想像有一個自助取貨櫃,有兩櫃子設定相同的號碼,當輸入這組取貨號碼,櫃子會照排序只打開最後一筆放進去箱子。
舉例var是箱子,我先拿了一個箱子裝入雜誌放進櫃子設定’box’
接者在拿一個箱子裝書放進另一個櫃子設定’box’
現在,有兩個’box’的櫃子,當取貨時輸入“box”只會開啟最後放書的櫃子
JS程式碼如下:
var box='magazine';
var box='book';
console.log(box);
//output: book
let
延續自助取貨櫃例子,先將報紙裝箱後放入櫃子設定’box’,爾後有其它櫃子存放let設定‘box’,在取貨輸入’box’是無法開啟任何一個櫃子。
下方程式碼用「函數」做示範
function aArea(){
let box='newspapres';
let box='novels';
console.log('小吉取貨拿了'+box);
}
aArea();
// Uncaught SyntaxError: Identifier 'box' has already been declared
不過,JS有其它重新賦值方式:
function aArea(){
let box='newspapres';
box='novel';
console.log('小吉取貨拿了'+box);
}
aArea();
//output: novel
const
舉例const是箱子,繪本裝箱放入櫃子設定‘box’,爾後出現其它設定’box’櫃子,輸入‘box’皆無法開啟,const概念同let第一點說明概念,但與let不同之處,const不可用其它方式重新賦值。
const box='pictureBook';
console.log(box);
//output: Picturebook
const box='pictureBook';
const box='HistoricalFiction';
console.log(box);
//Uncaught SyntaxError: Identifier 'box' has already been declared
const box='pictureBook';
box='historicalFiction';
console.log(box);
//Uncaught TypeError: Assignment to constant variable.
變數取值(Declaration and initialization)
這裡先淺談變數提升(Variable Hoisting),JS在代碼執行Hoisting之前會將變數移到作用域中,讀取程式碼遇到變數時識別字會提升至作用域前,但賦值不會提升,換言之,變數中的值必須寫在JS作用域範圍,才能有效讀取。
console.log(chiHuahua);
var chiHuahua='吉娃娃';
//undefined
var dog='吉娃娃'
var combine=dog+universe;
var universe='被逐出宇宙';
console.log(combine);
//吉娃娃undefined
var dog='吉娃娃'
var universe='被逐出宇宙';
var combine=dog+universe;
console.log(combine);
//output:吉娃娃被逐出宇宙
(字串示範用,筆者支持生命平權,動物友善)🐶
變數範圍(Variable Scope)
var, let, const 變數與常數在不同作用域的位置,會影響JS讀取結果,
這裡分為兩種全域變數(Global Variables)、區域變數(Local Variables)
全域變數(Global Variables)
變數寫在全域屬性可以讓整個程式讀取,但要留意程式碼數量一多情況下造成命名混亂。
var chiHuahua ='吉娃娃';
var aka ='狗界迷你技安';
function combine(){
console.log('我是一隻'+chiHuahua+'又名'+aka);
}
combine();
//Output:我是一隻吉娃娃又名狗界迷你技安
console.log('這樣也可以讀到'+chiHuahua+aka);
//Output:這樣也可以讀到吉娃娃迷你技安
此外,全域變數的有個情況,當函式內寫數值,此方式同等宣告全域變數,即使在函數之外也可以取值,盡量依據情境考慮使用var, let, const為佳。
function dog(){
name='pug';
}
dog();
console.log(name);
//output:pug
區域變數(Local Variables)
區域變數是指在特定區塊被聲明,變數可以寫在函數、if、迴圈。
以下舉例,函數內的var, let, const變數,只會在函數中有作用,在呼叫函數時可以成功取值,而超出函數之外訪問裡面變數程式碼會得到未定義的結果。
補充說明:let, const是在ECMAScript 6(ES6)的版本引入區域宣告聲明,ES5之前版本var具有全域特性;即使在作用域無法顯示結果,透過Chrome Inspect查詢還是有宣告成功,ES6建議避免污染全域情況下,{}內請使用let, const取代var。
function chiHuahua() {
let dogName = '吉娃娃';
let character='若吉若梨'
console.log(dogName+character);
}
chiHuahua();
//output:吉娃娃若吉若梨
function chiwawa() {
let dogName = '歐練吉';
}
chiwawa();
console.log('有隻吉娃娃叫' + dogName);
//Uncaught ReferenceError: dogName is not defined
偶爾會畫圖來理解程式碼,若內文圖像對你理解有幫助,歡迎自行取用。
此為紀錄學習過程,如內容有誤,歡迎留言指教。
Abby
筆記一下