物件類型 (影片版)
-
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:17drawWinston函數
-
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:42this.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:57Winston 抽象類型數據
-
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敬請繼續收看
Victoria Tsai approved Chinese, Traditional subtitles for Object Types (Video Version) | ||
Victoria Tsai edited Chinese, Traditional subtitles for Object Types (Video Version) | ||
William Choi edited Chinese, Traditional subtitles for Object Types (Video Version) | ||
William Choi edited Chinese, Traditional subtitles for Object Types (Video Version) | ||
William Choi edited Chinese, Traditional subtitles for Object Types (Video Version) |