iT邦幫忙

2021 iThome 鐵人賽

DAY 4
1
Modern Web

JavaScript 從 50% 開始,打造函式庫不是問題!系列 第 4

JS 04 - 變數類型

大家好!

昨天我們介紹了資料的傳遞方式,今天就來理解變數的宣告方式吧!
我們進入今天的主題吧!


變數

JavaScript 有 varconstlet 3 種宣告方式,明天我們會再詳細介紹。
今天先來理解全域變數和區域變數的差異吧!

全域變數

  • 宣告
    1. 於全域作用域使用 varlet 宣告全域變數
    2. 於任何作用域定義 window 的屬性
  • 呼叫
    1. 變數於任何作用域都能被呼叫
    2. 最低的呼叫順序
var a = [];
let b = [];

a; // []
b; // []
window.a; // []
window.b; // undefined
a === window.a; // true

a 會全等於 window.a 是因為使用 var 的宣告方式。

區域變數

  • 宣告
    1. 於區域作用域(函式)使用 var 宣告區域變數
    2. 於區塊作用域(區塊表示式)使用 let 宣告區塊區域變數
  • 呼叫
    1. 變數只能於當前作用域被呼叫
    2. 呼叫順序優先於全域變數
var c = Infinity;
var fn = function (bool) {
    var c = 0;
    let d = 0;
    if (!bool) {
        var c = 1;
        let d = 1;
    }
    return [c, d];
};

/* 只能呼叫全域變數 */
c; // Infinity

/* 沒有定義全域變數 */
d; // Uncaught ReferenceError: d is not defined

/* 優先呼叫區域變數 */
fn(true); // [0, 0]

/* c = 1` 覆蓋 c = 0
   d = 1` 只在作用域內覆蓋 d = 0(區塊外不影響) */
fn(false); // [1, 0]

如果作用域沒有宣告區域變數,就會向外呼叫外層作用域的區域變數,都沒有才會呼叫全域變數。


上方沒有提到 const 是因為,const 宣告的是區塊區域常數。
儘管 constlet 都有相同的特性,但是 const 更為嚴謹,不僅宣告時必須賦值,宣告後也不能再更改。

差不多也到尾聲了。
如果對文章有任何疑問,歡迎於下方提問和建議!
我是 Felix,我們明天再見!


上一篇
JS 03 - 資料傳遞
下一篇
JS 05 - 變數宣告
系列文
JavaScript 從 50% 開始,打造函式庫不是問題!46
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言