iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 23
2
Modern Web

RE:從零開始的學習 JS 生活系列 第 23

EP.22 RE:從零開始的學習 JS 生活-第二十二日

  • 分享至 

  • xImage
  •  

前言

轉生第二十二日,這一篇將會介紹函式、執行環境與變數環境還有範圍鏈這四個東西。

執行環境

一開始我們先來講一下 JavaScript 的執行環境,在前面的轉生第十九日,有講到 JavaScript 有所謂的創造階段,當 JavaScript 執行時,JavaScript 會首先創造兩個東西

  • window
  • this

兩個東西

前面我們介紹過 this 是一個特殊的關鍵字後面章節會在介紹,所以這邊會著重於講 window,那為什麼要特別講到這個呢?

以一個遊戲來做舉例,每個遊戲的都有最高權限者,也就是 GM 大大。

通常這個執行環境底下會有相當多的權限與功能,那 window 你就可以把它看成把我們從正常世界拉進異世界的女神(也就是 GM),如果你了解它你就會明白如何跟女神要求我要使用那些功能,例如操作 DOM、使用 BOM 等等。

那函式呢?函式你可以把它看成一個子管理者,因為它也有自己的執行環境,但是你只需要明白一件事情,最頂層的最高權限者就是 window

變數環境

接下來會來講一下變數的環境,你在哪裡宣告變數,那麼變數就會在哪裡出現,當然這部分的觀念也會與 JavaScript 的範圍鏈扯上一點關聯性,所以這邊也會稍微介紹範圍鏈的觀念。

當我們創造 JavaScript 環境時,第一層會是 window,而這個 window 也就是所謂的全域執行環境又稱之為全域物件

window

當我們在全域執行環境下建立變數,此時這個變數就會變成所謂的全域變數,也因為這樣子所以你在 window 底下可以找到變數 a

window

所謂的全域變數的意思其實是指這個變數在任何地方都可以使用,只要它是依附在 window 下就通通可以取用的意思,例如我定義了一個 A 函式,並且 A 函式裡面寫了一段程式碼 console.log(a),那這時候 A 函式裡面的 a 會去找誰呢?其實就會向外層尋找,那 A 函式的外層就是 window,所以就會從 window 找到我們剛剛定義的 var a = 1;

範圍鏈

而這向上尋找的特性就是所謂的範圍鏈,那為什麼要了解這個呢?前面我們理解全域變數以及全域執行環境,但是有全域就會有區域,那所謂的區域是什麼意思?所謂區域變數就是只有這個區域才能夠使用的變數,假設來我們改將 var a = 1; 放到函式內,然後在建立另一個 B 函式,接下來我們在 B 函式裡面一樣輸入 console.log(a),此時你找得到 var a = 1; 嗎?讓我們直接實作看看吧。

首先先建立兩個函式,然後在依照上述個別撰寫程式碼,並呼叫 B() 函式:

function A() {
  var a = 1;
}
function B() {
  console.log(a);
}

B();

此時你得到一個錯誤,也就是 ReferenceError: a is not defined

a is not defined

原因是為什麼呢?因為 var a = 1; 是一個區域變數,它只存活於函式 A 之中,所以以圖片來看就會像這樣 ↓

區域變數

但是如果你在函式 B 底下在建立一個函式 C,並且內容是 console.log(a); 是可以找到 變數 a 的,因為你是依附在這個函式環境底下 ↓

範圍鏈

那這就是所謂的執行環境,每一個函式在執行的時候都會建立屬於自己的執行環境,你可以把它看成一棵樹(Window),它長很多樹枝(函式),然後這些樹枝底下又有其他樹枝(其他函式)的概念,而這些樹枝都屬於自己的樣貌,例如有的樹枝有人臉(?!)、有的樹枝長得像貓(?!),(迷之聲:好恐怖的樹),但是建立在這底下的任何變數是無法被其他人使用,而這就是所謂的區域變數。

那麼以上就是簡略的範圍鏈、執行環境、函式環境 & 變數環境,希望以上在形容與介紹上沒有觀念上太大的錯誤。

結尾

下一篇的 RE:從零開始的學習 JS 生活-第二十三日 將會介紹 創造與提升。

本文同步發表於:https://hsiangfeng.github.io/javascript/20191007/3018510749


上一篇
EP.21 RE:從零開始的學習 JS 生活-第二十一日
下一篇
EP.23 RE:從零開始的學習 JS 生活-第二十三日
系列文
RE:從零開始的學習 JS 生活32
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言