WEBVTT

00:00:01.184 --> 00:00:03.425
現在你們已學習到有關
Javascript的基礎知識

00:00:03.425 --> 00:00:06.180
我要教你們一個很酷的方式
來使用JavaScript

00:00:06.180 --> 00:00:09.555
那就是"物件導向程式設計"

00:00:09.555 --> 00:00:12.156
首先我們要理解一下
它為什麼很實用

00:00:12.298 --> 00:00:15.858
所以我撰寫了一個程式
讓它變得更”物件導向”後

00:00:15.858 --> 00:00:17.218
就會變得更好

00:00:17.247 --> 00:00:19.967
這真是一個很酷的程式

00:00:19.967 --> 00:00:24.007
在頂部我有兩個變數
裡面儲存了簡單的物件實體語法

00:00:24.363 --> 00:00:28.244
物件實體語法是以前
我們所學到的其中一種物件

00:00:28.535 --> 00:00:30.634
即是我們構建了兩個大括號

00:00:30.634 --> 00:00:33.455
然後把這些屬性名稱
及數值全部放進去

00:00:33.762 --> 00:00:37.292
因此我們有兩個物件實體語法變數

00:00:37.292 --> 00:00:40.776
在這裡我們有這個函數
drawWinston，它需要一個引數

00:00:40.776 --> 00:00:45.115
然後再繪畫出引數

00:00:45.115 --> 00:00:47.847
並根據物件的 x及 y 屬性繪畫圖像

00:00:47.847 --> 00:00:52.900
然後根據那個物件的暱稱
及年齡屬性添加字幕

00:00:52.900 --> 00:00:55.538
最後在底部我們呼叫 drawWinston

00:00:55.538 --> 00:00:57.289
到青少年及成人中

00:00:57.331 --> 00:01:00.010
這會使它顯示出來

00:01:00.862 --> 00:01:05.501
很贊哦。假如我們到這裡
看看這些物件實體語法

00:01:05.617 --> 00:01:10.606
就會注意到它們的外觀其實真的很相似

00:01:11.188 --> 00:01:15.608
都具有相同系列的屬性
且兩者也可以使用相同的

00:01:15.608 --> 00:01:17.493
drawWinston函數

00:01:17.891 --> 00:01:21.630
其實如果你們想像一下
他們真的都在描述

00:01:21.630 --> 00:01:23.910
某類型的Winston，對不對?

00:01:24.240 --> 00:01:28.840
我們可以這樣想 或者在世上
存在著這抽象類型的Winston

00:01:28.840 --> 00:01:32.771
而每一 Winston 也具有
相同系列的屬性，如暱稱

00:01:32.771 --> 00:01:36.991
年齡、x 與 y

00:01:36.991 --> 00:01:42.090
我們剛在這裡完成的是
建立了兩個 Winston實例

00:01:42.090 --> 00:01:44.821
來描述特定的 Winston

00:01:45.001 --> 00:01:48.350
因此這是青少年Winston
而這是成人Winston

00:01:48.350 --> 00:01:52.892
但是，他們兩者真的十分相似

00:01:52.892 --> 00:01:55.002
且很多跟他們有關的事也相近

00:01:55.002 --> 00:01:57.712
如果你們仔細想想世間上
也有很多不同的運作方式

00:01:57.712 --> 00:02:01.341
我們有這些抽象數據類型
如人類及群眾

00:02:01.341 --> 00:02:03.714
我們都只是特定的實例

00:02:03.714 --> 00:02:05.712
擁有我們自己小小的屬性

00:02:06.041 --> 00:02:10.362
現在我們實際上可以使用
物件導向技術 Javascript

00:02:10.362 --> 00:02:17.463
使這些 Winston 變數成為
Winston 物件的正式實例

00:02:17.921 --> 00:02:21.963
使他們知道正在共享這些共同的東西

00:02:21.963 --> 00:02:25.091
要這樣做的話我們需要做的
第一件事就是實際地描述

00:02:25.091 --> 00:02:30.372
這個抽象數據類型 Winston
因此我們要作出一個變數

00:02:30.372 --> 00:02:35.111
你們要把數據類型儲存在變數
Winston 變數，而我們用大寫W

00:02:35.220 --> 00:02:38.630
因為我們的物件類型
通常由大寫字母開始

00:02:38.630 --> 00:02:41.810
我們把它設置為函數

00:02:41.810 --> 00:02:46.950
而這個函數是一個特定函數
我們把它叫做 "建構子函數"

00:02:46.950 --> 00:02:49.471
因為我們每一次要建立
全新的 Winston 實例時

00:02:49.471 --> 00:02:52.110
這就是被呼叫的東西

00:02:52.110 --> 00:02:55.369
當我們要建立青少年 Winston
就會呼叫這個函數

00:02:55.369 --> 00:02:57.989
或要建立成年人 Winston
就會呼叫這個函數

00:02:57.997 --> 00:03:03.037
這意味著這個函數要了解
任何需要知道的引數

00:03:03.037 --> 00:03:06.267
以作出完整的 Winston

00:03:06.457 --> 00:03:10.433
在這種情況下，它需要知道
暱稱、年齡、x 與 y

00:03:10.718 --> 00:03:15.249
現在，當我們收到那些引數後
就需要做一些事情

00:03:15.249 --> 00:03:20.919
我們需要把這些資料
實際地連接到 Winston 物件

00:03:21.389 --> 00:03:26.660
因此我們要使用全新的特別關鍵字"this"

00:03:26.660 --> 00:03:29.018
而"this"是指目前的物件實例

00:03:29.018 --> 00:03:31.800
我們會說 <i>this.nickname</i>
而它會說”好吧”

00:03:31.800 --> 00:03:34.169
而這個物件的暱稱屬性相等於

00:03:34.169 --> 00:03:38.030
任何被傳到建構子函數的，好囉?

00:03:38.451 --> 00:03:42.381
<i>this.age</i> 相等於傳入的年齡

00:03:42.449 --> 00:03:44.138
而 <i>this.x</i> 相等於傳入的 x

00:03:44.138 --> 00:03:47.328
而 <i>this.y</i> 相等於傳入的 y

00:03:47.466 --> 00:03:52.537
現在我們有這個名為
Winston 的抽象數據類型

00:03:52.838 --> 00:03:56.488
而它帶有建構子函數
我們可以使用它來建立全新的Winston

00:03:56.488 --> 00:03:58.778
讓我們嘗試使用它吧!

00:03:59.476 --> 00:04:03.236
我們要重新建立 WinstonTeen

00:04:03.236 --> 00:04:05.314
但是這一次我們用WinstonTeen等於

00:04:05.314 --> 00:04:10.365
這裡不用大括號 我們會說
"等於全新的 Winston"

00:04:10.607 --> 00:04:14.107
我們會說 "我們正在嘗試
建立全新的 Winston 實例"

00:04:14.107 --> 00:04:16.346
然後我們要傳入需要的資料

00:04:16.346 --> 00:04:21.478
"Winsteen",15, 20, 50
好囉!

00:04:22.246 --> 00:04:26.306
然後我們刪除舊資料
因為已不再需要它們了

00:04:26.306 --> 00:04:30.097
好了吧? 現在我們建立了
全新的Winsteen

00:04:31.207 --> 00:04:35.806
我們會說
<i>winstonAdult = new Winston()</i>

00:04:35.960 --> 00:04:39.502
當然他的名字是"Mr. Winst-a-lot"
聽起來甜美可人的名字

00:04:39.502 --> 00:04:45.342
他30歲，在 229 及50
好，然後我們就可以刪除

00:04:45.342 --> 00:04:49.923
這個物件實體語法
很好! 我們的代碼仍然正常運作

00:04:50.712 --> 00:04:53.651
我們在這裡所做的就是
我們說好吧 就有這個

00:04:53.651 --> 00:04:57.161
Winston 抽象類型數據

00:04:57.852 --> 00:05:03.073
而我們能建立全新的 Winston 實例

00:05:03.073 --> 00:05:05.161
且擁有這些特定的屬性

00:05:05.161 --> 00:05:08.661
我們把這些屬性儲存在內

00:05:08.661 --> 00:05:12.284
而記憶是非常重要的
因些你們知道內裡

00:05:12.284 --> 00:05:14.154
有這個
<i>this.nickname, this.age</i>

00:05:14.325 --> 00:05:19.642
如果意外地丟失這個年齡
你們注意到它會說 "未定義"

00:05:20.249 --> 00:05:22.958
因為在這裡 drawWinston 函數

00:05:22.958 --> 00:05:28.321
期待著任何傳入的物件
都帶有年齡屬性

00:05:28.321 --> 00:05:30.803
如果我們沒有 <i>this.age</i>

00:05:30.803 --> 00:05:34.372
那麼它也沒有年齡屬性
我們傳入了建構子函數

00:05:34.372 --> 00:05:37.231
但是並沒有用它做任何事情

00:05:37.231 --> 00:05:39.452
我們必須使用 "this"關鍵字
實際地連接到物件

00:05:39.621 --> 00:05:41.542
那我們就把它添加回去

00:05:41.542 --> 00:05:45.111
現在你們會想代碼已正常運作

00:05:45.111 --> 00:05:50.321
但是......我們只是完成了前面做過的事

00:05:50.457 --> 00:05:53.936
但這裡是一件很酷的事
我們所有的 Winstons

00:05:53.936 --> 00:05:56.086
經過相同的建構子函數

00:05:56.086 --> 00:05:59.656
如果我們想要進行更新
我們是真的可以修改它們的

00:05:59.656 --> 00:06:01.167
有關 Winston 的一些東西...

00:06:01.167 --> 00:06:04.217
所有的 Winstons
就在這裡，可能是年齡

00:06:04.217 --> 00:06:06.107
事實上我們想說 "歲數"

00:06:06.107 --> 00:06:09.838
我們只須放在這裡
現在所有 Winstons 說

00:06:09.838 --> 00:06:12.879
"15歲"、 "30歲" 對嗎?

00:06:12.879 --> 00:06:14.977
因此他們只取用獨特的部分

00:06:14.977 --> 00:06:17.417
他們也有共享的東西

00:06:17.417 --> 00:06:20.107
而物件導向程式設計最棒的地方

00:06:20.107 --> 00:06:22.107
就是在這世上有這類的物件

00:06:22.107 --> 00:06:26.108
你們能夠實際地建立這些物件的實例

00:06:26.108 --> 00:06:28.428
而還有跟他們相似的東西

00:06:28.428 --> 00:06:30.408
例如他們擁有相同的屬性

00:06:30.408 --> 00:06:32.409
且有不同的東西

00:06:32.409 --> 00:06:35.508
例如這個屬性事實上跟其他的屬性
帶有不同的數值，對不對?

00:06:35.508 --> 00:06:38.748
你們知道嘛，我們可以
使用相同的行為

00:06:38.748 --> 00:06:40.508
像呼叫相同的函數

00:06:40.508 --> 00:06:43.069
以類似的方式使用它們

00:06:43.069 --> 00:06:45.979
這是一些有關物件導向
程式設計很棒的東西

00:06:45.979 --> 00:06:48.548
而你們將會看到更多很棒的東西

00:06:48.548 --> 00:06:50.148
敬請繼續收看