Return to Video

物件導論

  • 0:01 - 0:05
    我寫了一個程式要告訴你們關於
    溫斯頓的生動細節
  • 0:05 - 0:09
    但是不會說很多 因為溫斯頓喜歡保持神秘
  • 0:09 - 0:12
    這就是溫斯頓的風格
  • 0:12 - 0:14
    讓我們來看看我怎麼寫這個程式
  • 0:14 - 0:17
    我先在程式上方創造一些變量 (varaible)
    來儲存溫斯頓個人資料
  • 0:17 - 0:22
    第一個變量是數值 - 溫斯頓的年齡
    第二個變量是字串 - 他的眼睛顏色
  • 0:22 - 0:26
    第三個變量是字串陣列 - 他喜歡做的事
  • 0:26 - 0:32
    而... 最後二個變量是字串 - 描述他的出生地
  • 0:32 - 0:37
    然後從這裡 我用文字命令 (text command)
    和變量名稱寫出這些
  • 0:37 - 0:42
    當然對於字串陣列 若要存取陣列元素
    必須使用中括號
  • 0:42 - 0:43
    不錯
  • 0:43 - 0:49
    現在 所有五個變量都描述同一件事：
    溫斯頓
  • 0:49 - 0:52
    但是變量彼此之間不知道它們都和溫斯頓有關
  • 0:52 - 0:58
    我們知道... Javascript 中有一個較好的酷方法
  • 0:58 - 1:01
    來儲存眾多相關的資訊
  • 1:01 - 1:04
    它叫做物件 (Object)
  • 1:04 - 1:06
    物件意思是 與其使用五個變量
  • 1:06 - 1:12
    只使用一個單獨變量 就能儲存所有資訊
    真的很酷
  • 1:12 - 1:14
    讓我們來試試溫斯頓的資料
  • 1:14 - 1:18
    首先 宣告變量 把它叫做溫斯頓 winston
  • 1:18 - 1:23
    然後 輸入一個開放的大括號
    是彎曲而不是方形的括號
  • 1:23 - 1:26
    以及一個分號
  • 1:26 - 1:32
    我們剛剛造了一個物件 但物件內尚無任何東西
  • 1:32 - 1:36
    若要添加資料 必須加上屬性 (property)
  • 1:36 - 1:41
    屬性是一個關鍵字 (Key) 和一個數值
    例如 年齡 age 為19
  • 1:41 - 1:44
    好 至於眼睛 我們要先加上一個逗號
  • 1:44 - 1:48
    然後眼睛為 "black" 好的 酷
  • 1:48 - 1:53
    目前為止 溫斯頓有兩項屬性在物件裡
  • 1:53 - 1:56
    嗯 以此類推 接著我們只要
  • 1:56 - 1:59
    從上面複製貼上...
  • 1:59 - 2:04
    呃 非常好 讓我們看看 溫斯頓有三個屬性
  • 2:04 - 2:09
    每個屬性都有一個關鍵字 位於左手邊
  • 2:09 - 2:13
    另外還有一個數值 在右手邊
  • 2:13 - 2:17
    關鍵字所遵循的規則如同
    JavaScript 的變量名稱
  • 2:17 - 2:21
    不能有空格 必須以字母開頭
  • 2:21 - 2:25
    關鍵字的值可以是我們迄今見過 任何類型的值
  • 2:25 - 2:28
    可以是數字 也可以是字串
    也可能是一個陣列
  • 2:28 - 2:34
    甚至可以是一個邏輯符號
    因此我們當然可以添加 isCool 其值為 true
  • 2:34 - 2:38
    實際上 關鍵字值甚至可以是另一個物件
  • 2:38 - 2:41
    像是 出生城市 BirthCity 出生州 BirthState
  • 2:41 - 2:45
    這些資訊其實是一件事情的片段
    也就是單一地點
  • 2:45 - 2:49
    所以 我認為 如果把它存儲為一個物件
    可以更有意義
  • 2:49 - 2:55
    我要添加一個關鍵字 出生地
    再次用大括號表達數值
  • 2:55 - 3:00
    括號內輸入城市的關鍵字："Mountain View"
  • 3:00 - 3:04
    以及州名："California"
  • 3:04 - 3:07
    很棒 你現在可以知道
  • 3:07 - 3:11
    存儲在物件內的資訊可以非常豐富
  • 3:11 - 3:15
    好 現在我們有這個漂亮物件
    介紹溫斯頓有關資訊
  • 3:15 - 3:19
    讓我們試著去刪除那些
  • 3:19 - 3:23
    原來不知道彼此的個別變量
  • 3:23 - 3:26
    OK 嗯 哦呃！我們發現有一個錯誤
  • 3:26 - 3:30
    因為文字命令參照原來的變量
  • 3:30 - 3:34
    我們需要從物件更新變量
  • 3:34 - 3:40
    讓我們註釋掉最後三行 這樣就可以一次做一個
  • 3:40 - 3:44
    好的 現在講溫斯頓的年齡 WinstonAge
  • 3:44 - 3:46
    我們需要做的是替換舊變量
  • 3:46 - 3:50
    因此打出 winston 這是變量名稱
  • 3:50 - 3:55
    注意 如果我們剛剛就這樣離開
    它就是 object object 這是非常錯的
  • 3:55 - 4:01
    JavaScript 告訴我們
    我們試圖把整個物件轉換列出為一個字串值
  • 4:01 - 4:05
    但是 我們其實只是想存取它裡面的年齡
  • 4:05 - 4:07
    因此我們要做的是 輸入一個點
  • 4:07 - 4:11
    然後輸入屬性的關鍵字 那就是年齡 “age”
  • 4:11 - 4:13
    成了！我們有了年齡
  • 4:13 - 4:18
    這個叫做 “點號”
    這裡我們寫出物件的變量名稱 接著是一個點
  • 4:18 - 4:21
    然後是屬性的關鍵字
  • 4:21 - 4:25
    好 我們可以做更多
    讓我們去掉這註釋
  • 4:25 - 4:29
    然後 這個變量我們不叫做 winstonEyes
    而稱為 winston.eyes
  • 4:29 - 4:34
    另外這個是 winston.likes[0]
  • 4:34 - 4:37
    下來是 winston.likes[1]
  • 4:37 - 4:42
    最後一個有點複雜 因為
  • 4:42 - 4:46
    它是物件 winston 內的物件 (birthplace)
  • 4:46 - 4:50
    我們若說 winston.birthplace
  • 4:50 - 4:56
    那樣做 birthplace 仍然是整個物件
    所以必須用 winston.birthplace.city
  • 4:56 - 5:01
    好吧 讓我們做到這裡...
    winston.birthplace.state
  • 5:01 - 5:08
    成了！真的很酷 因為可以在物件中存取資料
  • 5:08 - 5:09
    好
  • 5:11 - 5:14
    真棒 你可以看到
  • 5:14 - 5:19
    物件存儲一堆與目標相關的資訊
  • 5:19 - 5:21
    方便之後存取
  • 5:21 - 5:25
    如果你學下去 你會發現物件真是棒呀！
Title:
物件導論
Description:

這僅是我們的互動編碼充分談話的銀幕截屏，讓製做字幕和翻譯更容易。更好的談話內容可在這裡觀看：
https://www.khanacademy.org/cs/programming/
more » « less
Video Language:
English
Duration:
05:26

Chinese, Traditional subtitles

Revisions

Our website uses cookies for analysis purposes.