< Return to Video

物件類型 (影片版)

  • 0:01 - 0:03
    現在你們已學習到有關
    Javascript的基礎知識
  • 0:03 - 0:06
    我要教你們一個很酷的方式
    來使用JavaScript
  • 0:06 - 0:10
    那就是"物件導向程式設計"
  • 0:10 - 0:12
    首先我們要理解一下
    它為什麼很實用
  • 0:12 - 0:16
    所以我撰寫了一個程式
    讓它變得更”物件導向”後
  • 0:16 - 0:17
    就會變得更好
  • 0:17 - 0:20
    這真是一個很酷的程式
  • 0:20 - 0:24
    在頂部我有兩個變數
    裡面儲存了簡單的物件實體語法
  • 0:24 - 0:28
    物件實體語法是以前
    我們所學到的其中一種物件
  • 0:29 - 0:31
    即是我們構建了兩個大括號
  • 0:31 - 0:33
    然後把這些屬性名稱
    及數值全部放進去
  • 0:34 - 0:37
    因此我們有兩個物件實體語法變數
  • 0:37 - 0:41
    在這裡我們有這個函數
    drawWinston,它需要一個引數
  • 0:41 - 0:45
    然後再繪畫出引數
  • 0:45 - 0:48
    並根據物件的 x及 y 屬性繪畫圖像
  • 0:48 - 0:53
    然後根據那個物件的暱稱
    及年齡屬性添加字幕
  • 0:53 - 0:56
    最後在底部我們呼叫 drawWinston
  • 0:56 - 0:57
    到青少年及成人中
  • 0:57 - 1:00
    這會使它顯示出來
  • 1:01 - 1:06
    很贊哦。假如我們到這裡
    看看這些物件實體語法
  • 1:06 - 1:11
    就會注意到它們的外觀其實真的很相似
  • 1:11 - 1:16
    都具有相同系列的屬性
    且兩者也可以使用相同的
  • 1:16 - 1:17
    drawWinston函數
  • 1:18 - 1:22
    其實如果你們想像一下
    他們真的都在描述
  • 1:22 - 1:24
    某類型的Winston,對不對?
  • 1:24 - 1:29
    我們可以這樣想 或者在世上
    存在著這抽象類型的Winston
  • 1:29 - 1:33
    而每一 Winston 也具有
    相同系列的屬性,如暱稱
  • 1:33 - 1:37
    年齡、x 與 y
  • 1:37 - 1:42
    我們剛在這裡完成的是
    建立了兩個 Winston實例
  • 1:42 - 1:45
    來描述特定的 Winston
  • 1:45 - 1:48
    因此這是青少年Winston
    而這是成人Winston
  • 1:48 - 1:53
    但是,他們兩者真的十分相似
  • 1:53 - 1:55
    且很多跟他們有關的事也相近
  • 1:55 - 1:58
    如果你們仔細想想世間上
    也有很多不同的運作方式
  • 1:58 - 2:01
    我們有這些抽象數據類型
    如人類及群眾
  • 2:01 - 2:04
    我們都只是特定的實例
  • 2:04 - 2:06
    擁有我們自己小小的屬性
  • 2:06 - 2:10
    現在我們實際上可以使用
    物件導向技術 Javascript
  • 2:10 - 2:17
    使這些 Winston 變數成為
    Winston 物件的正式實例
  • 2:18 - 2:22
    使他們知道正在共享這些共同的東西
  • 2:22 - 2:25
    要這樣做的話我們需要做的
    第一件事就是實際地描述
  • 2:25 - 2:30
    這個抽象數據類型 Winston
    因此我們要作出一個變數
  • 2:30 - 2:35
    你們要把數據類型儲存在變數
    Winston 變數,而我們用大寫W
  • 2:35 - 2:39
    因為我們的物件類型
    通常由大寫字母開始
  • 2:39 - 2:42
    我們把它設置為函數
  • 2:42 - 2:47
    而這個函數是一個特定函數
    我們把它叫做 "建構子函數"
  • 2:47 - 2:49
    因為我們每一次要建立
    全新的 Winston 實例時
  • 2:49 - 2:52
    這就是被呼叫的東西
  • 2:52 - 2:55
    當我們要建立青少年 Winston
    就會呼叫這個函數
  • 2:55 - 2:58
    或要建立成年人 Winston
    就會呼叫這個函數
  • 2:58 - 3:03
    這意味著這個函數要了解
    任何需要知道的引數
  • 3:03 - 3:06
    以作出完整的 Winston
  • 3:06 - 3:10
    在這種情況下,它需要知道
    暱稱、年齡、x 與 y
  • 3:11 - 3:15
    現在,當我們收到那些引數後
    就需要做一些事情
  • 3:15 - 3:21
    我們需要把這些資料
    實際地連接到 Winston 物件
  • 3:21 - 3:27
    因此我們要使用全新的特別關鍵字"this"
  • 3:27 - 3:29
    而"this"是指目前的物件實例
  • 3:29 - 3:32
    我們會說 this.nickname
    而它會說”好吧”
  • 3:32 - 3:34
    而這個物件的暱稱屬性相等於
  • 3:34 - 3:38
    任何被傳到建構子函數的,好囉?
  • 3:38 - 3:42
    this.age 相等於傳入的年齡
  • 3:42 - 3:44
    this.x 相等於傳入的 x
  • 3:44 - 3:47
    this.y 相等於傳入的 y
  • 3:47 - 3:53
    現在我們有這個名為
    Winston 的抽象數據類型
  • 3:53 - 3:56
    而它帶有建構子函數
    我們可以使用它來建立全新的Winston
  • 3:56 - 3:59
    讓我們嘗試使用它吧!
  • 3:59 - 4:03
    我們要重新建立 WinstonTeen
  • 4:03 - 4:05
    但是這一次我們用WinstonTeen等於
  • 4:05 - 4:10
    這裡不用大括號 我們會說
    "等於全新的 Winston"
  • 4:11 - 4:14
    我們會說 "我們正在嘗試
    建立全新的 Winston 實例"
  • 4:14 - 4:16
    然後我們要傳入需要的資料
  • 4:16 - 4:21
    "Winsteen",15, 20, 50
    好囉!
  • 4:22 - 4:26
    然後我們刪除舊資料
    因為已不再需要它們了
  • 4:26 - 4:30
    好了吧? 現在我們建立了
    全新的Winsteen
  • 4:31 - 4:36
    我們會說
    winstonAdult = new Winston()
  • 4:36 - 4:40
    當然他的名字是"Mr. Winst-a-lot"
    聽起來甜美可人的名字
  • 4:40 - 4:45
    他30歲,在 229 及50
    好,然後我們就可以刪除
  • 4:45 - 4:50
    這個物件實體語法
    很好! 我們的代碼仍然正常運作
  • 4:51 - 4:54
    我們在這裡所做的就是
    我們說好吧 就有這個
  • 4:54 - 4:57
    Winston 抽象類型數據
  • 4:58 - 5:03
    而我們能建立全新的 Winston 實例
  • 5:03 - 5:05
    且擁有這些特定的屬性
  • 5:05 - 5:09
    我們把這些屬性儲存在內
  • 5:09 - 5:12
    而記憶是非常重要的
    因些你們知道內裡
  • 5:12 - 5:14
    有這個
    this.nickname, this.age
  • 5:14 - 5:20
    如果意外地丟失這個年齡
    你們注意到它會說 "未定義"
  • 5:20 - 5:23
    因為在這裡 drawWinston 函數
  • 5:23 - 5:28
    期待著任何傳入的物件
    都帶有年齡屬性
  • 5:28 - 5:31
    如果我們沒有 this.age
  • 5:31 - 5:34
    那麼它也沒有年齡屬性
    我們傳入了建構子函數
  • 5:34 - 5:37
    但是並沒有用它做任何事情
  • 5:37 - 5:39
    我們必須使用 "this"關鍵字
    實際地連接到物件
  • 5:40 - 5:42
    那我們就把它添加回去
  • 5:42 - 5:45
    現在你們會想代碼已正常運作
  • 5:45 - 5:50
    但是......我們只是完成了前面做過的事
  • 5:50 - 5:54
    但這裡是一件很酷的事
    我們所有的 Winstons
  • 5:54 - 5:56
    經過相同的建構子函數
  • 5:56 - 6:00
    如果我們想要進行更新
    我們是真的可以修改它們的
  • 6:00 - 6:01
    有關 Winston 的一些東西...
  • 6:01 - 6:04
    所有的 Winstons
    就在這裡,可能是年齡
  • 6:04 - 6:06
    事實上我們想說 "歲數"
  • 6:06 - 6:10
    我們只須放在這裡
    現在所有 Winstons 說
  • 6:10 - 6:13
    "15歲"、 "30歲" 對嗎?
  • 6:13 - 6:15
    因此他們只取用獨特的部分
  • 6:15 - 6:17
    他們也有共享的東西
  • 6:17 - 6:20
    而物件導向程式設計最棒的地方
  • 6:20 - 6:22
    就是在這世上有這類的物件
  • 6:22 - 6:26
    你們能夠實際地建立這些物件的實例
  • 6:26 - 6:28
    而還有跟他們相似的東西
  • 6:28 - 6:30
    例如他們擁有相同的屬性
  • 6:30 - 6:32
    且有不同的東西
  • 6:32 - 6:36
    例如這個屬性事實上跟其他的屬性
    帶有不同的數值,對不對?
  • 6:36 - 6:39
    你們知道嘛,我們可以
    使用相同的行為
  • 6:39 - 6:41
    像呼叫相同的函數
  • 6:41 - 6:43
    以類似的方式使用它們
  • 6:43 - 6:46
    這是一些有關物件導向
    程式設計很棒的東西
  • 6:46 - 6:49
    而你們將會看到更多很棒的東西
  • 6:49 - 6:50
    敬請繼續收看
Title:
物件類型 (影片版)
Description:

這是我們互動編碼演講的螢幕截圖,好使大家更容易進行字幕翻譯。在這裡可以收看完整板:
https://www.khanacademy.org/cs/programming/

more » « less
Video Language:
English
Duration:
06:51

Chinese, Traditional subtitles

Revisions