iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 3
0
Modern Web

教練我想學 JavaScript 系列 第 3

Day 3 物件與全域物件

  • 分享至 

  • xImage
  •  

在 JavaScript 中,物件非常重要,很常用來儲存資料,
物件是名稱與值的配對,
如下:

Relationship: 'Single'

Relationship 是名稱, 'Single' 是值,
值本身也可以是另一個名稱與值的配對,
如下:

Jimmy:
  {
    Age: 26,
    Height: 160,
    Weight: 70,
    Relationship: 'Single',
    Interest:
      {
        sport: 'jogging',
        food: 'beef',
        music: 'rap',
        movie: 'harry potter'
      }
  }

可以看到 Jimmy 是名稱,值是另外一些名稱與值的配對,
值可以是另外一個物件,

接著再來講講全域物件,
在 JavaScript 中,程式碼不是寫在函數裡面就是全域物件,
不論何時執行 JavaScript ,它都是在執行環境(Execution Context)裡面執行,這是一個包裹其他人已經寫好的程式,用來驗證和執行你的程式碼,
把你的程式碼包起來,把正在執行的程式碼包在執行環境裡面,

當我們說它是「全域」的時候,表示我們可以在任何地方取用它,
這就是全域的意思,所以全域執行環境創造兩個東西給你,
你不用自己在程式碼裡面寫,它幫我們創造全域物件(Global Object),
記住物件是名稱/值的組合,
還有一個特殊的變數,叫做「this」,
無論你的程式碼何時執行 你的程式碼都被包在執行環境裡,
這兩個東西執行環境也都為你建立好了,


圖片來源:JavaScript 全攻略:克服 JS 的奇怪部分課程第 2 節講座 7 影片截圖

我們實際來看個範例,

我新增一個 index.html 檔案內容如下:

<html>

<head>

</head>

<body>

  <script src="app.js"></script>
</body>

</html>

接著新增一個 app.js 檔案,不寫任何內容,
我們實際打開瀏覽器,按下 F12,切換到 Console 分頁,
分別輸入 this 與 window,
如下圖:

我們在 app.js 中沒有寫任何的程式碼,因此可以應驗剛才說的,
執行環境會替我們自動創造全域物件與特殊的變數 this,
在用瀏覽器的情況下特殊變數 this 就等於全域物件 window ,
它們代表瀏覽器視窗本身,

現在我們在 app.js 中新增變數與函數,
app.js 檔案內容如下:

var a = 'Hello World!';

function b() {
  
}

在瀏覽器中,window 全域物件的值是許多名稱與值的配對,
有些名稱的值是一個 function ,這是 window 全域物件內建的方法,
方便我們對瀏覽器進行操作,
但我們可以在 Window 全域物件中看到我們剛才新增的變數 a 與 function b:

接著我們實際打印出變數 a 以及全域物件 window 底下的全域變數 a:

當你的 JavaScript 程式碼被執行,執行環境會被建立,
所以,如果你的變數和物件的詞彙環境(程式碼的實際位置)不在函數裡,它們就是全域的。


上一篇
Day 2 語法解析器、執行環境與詞彙環境
下一篇
Day 4 執行環境的創造階段與 Hoisting
系列文
教練我想學 JavaScript 30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言