[Script Info] Title: [Events] Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text Dialogue: 0,0:00:01.18,0:00:03.42,Default,,0000,0000,0000,,現在你們已學習到有關\NJavascript的基礎知識 Dialogue: 0,0:00:03.42,0:00:06.18,Default,,0000,0000,0000,,我要教你們一個很酷的方式\N來使用JavaScript Dialogue: 0,0:00:06.18,0:00:09.56,Default,,0000,0000,0000,,那就是"物件導向程式設計" Dialogue: 0,0:00:09.56,0:00:12.16,Default,,0000,0000,0000,,首先我們要理解一下\N它為什麼很實用 Dialogue: 0,0:00:12.30,0:00:15.86,Default,,0000,0000,0000,,所以我撰寫了一個程式\N讓它變得更”物件導向”後 Dialogue: 0,0:00:15.86,0:00:17.22,Default,,0000,0000,0000,,就會變得更好 Dialogue: 0,0:00:17.25,0:00:19.97,Default,,0000,0000,0000,,這真是一個很酷的程式 Dialogue: 0,0:00:19.97,0:00:24.01,Default,,0000,0000,0000,,在頂部我有兩個變數\N裡面儲存了簡單的物件實體語法 Dialogue: 0,0:00:24.36,0:00:28.24,Default,,0000,0000,0000,,物件實體語法是以前\N我們所學到的其中一種物件 Dialogue: 0,0:00:28.54,0:00:30.63,Default,,0000,0000,0000,,即是我們構建了兩個大括號 Dialogue: 0,0:00:30.63,0:00:33.46,Default,,0000,0000,0000,,然後把這些屬性名稱\N及數值全部放進去 Dialogue: 0,0:00:33.76,0:00:37.29,Default,,0000,0000,0000,,因此我們有兩個物件實體語法變數 Dialogue: 0,0:00:37.29,0:00:40.78,Default,,0000,0000,0000,,在這裡我們有這個函數\NdrawWinston,它需要一個引數 Dialogue: 0,0:00:40.78,0:00:45.12,Default,,0000,0000,0000,,然後再繪畫出引數 Dialogue: 0,0:00:45.12,0:00:47.85,Default,,0000,0000,0000,,並根據物件的 x及 y 屬性繪畫圖像 Dialogue: 0,0:00:47.85,0:00:52.90,Default,,0000,0000,0000,,然後根據那個物件的暱稱\N及年齡屬性添加字幕 Dialogue: 0,0:00:52.90,0:00:55.54,Default,,0000,0000,0000,,最後在底部我們呼叫 drawWinston Dialogue: 0,0:00:55.54,0:00:57.29,Default,,0000,0000,0000,,到青少年及成人中 Dialogue: 0,0:00:57.33,0:01:00.01,Default,,0000,0000,0000,,這會使它顯示出來 Dialogue: 0,0:01:00.86,0:01:05.50,Default,,0000,0000,0000,,很贊哦。假如我們到這裡\N看看這些物件實體語法 Dialogue: 0,0:01:05.62,0:01:10.61,Default,,0000,0000,0000,,就會注意到它們的外觀其實真的很相似 Dialogue: 0,0:01:11.19,0:01:15.61,Default,,0000,0000,0000,,都具有相同系列的屬性\N且兩者也可以使用相同的 Dialogue: 0,0:01:15.61,0:01:17.49,Default,,0000,0000,0000,,drawWinston函數 Dialogue: 0,0:01:17.89,0:01:21.63,Default,,0000,0000,0000,,其實如果你們想像一下\N他們真的都在描述 Dialogue: 0,0:01:21.63,0:01:23.91,Default,,0000,0000,0000,,某類型的Winston,對不對? Dialogue: 0,0:01:24.24,0:01:28.84,Default,,0000,0000,0000,,我們可以這樣想 或者在世上\N存在著這抽象類型的Winston Dialogue: 0,0:01:28.84,0:01:32.77,Default,,0000,0000,0000,,而每一 Winston 也具有\N相同系列的屬性,如暱稱 Dialogue: 0,0:01:32.77,0:01:36.99,Default,,0000,0000,0000,,年齡、x 與 y Dialogue: 0,0:01:36.99,0:01:42.09,Default,,0000,0000,0000,,我們剛在這裡完成的是\N建立了兩個 Winston實例 Dialogue: 0,0:01:42.09,0:01:44.82,Default,,0000,0000,0000,,來描述特定的 Winston Dialogue: 0,0:01:45.00,0:01:48.35,Default,,0000,0000,0000,,因此這是青少年Winston\N而這是成人Winston Dialogue: 0,0:01:48.35,0:01:52.89,Default,,0000,0000,0000,,但是,他們兩者真的十分相似 Dialogue: 0,0:01:52.89,0:01:55.00,Default,,0000,0000,0000,,且很多跟他們有關的事也相近 Dialogue: 0,0:01:55.00,0:01:57.71,Default,,0000,0000,0000,,如果你們仔細想想世間上\N也有很多不同的運作方式 Dialogue: 0,0:01:57.71,0:02:01.34,Default,,0000,0000,0000,,我們有這些抽象數據類型\N如人類及群眾 Dialogue: 0,0:02:01.34,0:02:03.71,Default,,0000,0000,0000,,我們都只是特定的實例 Dialogue: 0,0:02:03.71,0:02:05.71,Default,,0000,0000,0000,,擁有我們自己小小的屬性 Dialogue: 0,0:02:06.04,0:02:10.36,Default,,0000,0000,0000,,現在我們實際上可以使用\N物件導向技術 Javascript Dialogue: 0,0:02:10.36,0:02:17.46,Default,,0000,0000,0000,,使這些 Winston 變數成為\NWinston 物件的正式實例 Dialogue: 0,0:02:17.92,0:02:21.96,Default,,0000,0000,0000,,使他們知道正在共享這些共同的東西 Dialogue: 0,0:02:21.96,0:02:25.09,Default,,0000,0000,0000,,要這樣做的話我們需要做的\N第一件事就是實際地描述 Dialogue: 0,0:02:25.09,0:02:30.37,Default,,0000,0000,0000,,這個抽象數據類型 Winston\N因此我們要作出一個變數 Dialogue: 0,0:02:30.37,0:02:35.11,Default,,0000,0000,0000,,你們要把數據類型儲存在變數\NWinston 變數,而我們用大寫W Dialogue: 0,0:02:35.22,0:02:38.63,Default,,0000,0000,0000,,因為我們的物件類型\N通常由大寫字母開始 Dialogue: 0,0:02:38.63,0:02:41.81,Default,,0000,0000,0000,,我們把它設置為函數 Dialogue: 0,0:02:41.81,0:02:46.95,Default,,0000,0000,0000,,而這個函數是一個特定函數\N我們把它叫做 "建構子函數" Dialogue: 0,0:02:46.95,0:02:49.47,Default,,0000,0000,0000,,因為我們每一次要建立\N全新的 Winston 實例時 Dialogue: 0,0:02:49.47,0:02:52.11,Default,,0000,0000,0000,,這就是被呼叫的東西 Dialogue: 0,0:02:52.11,0:02:55.37,Default,,0000,0000,0000,,當我們要建立青少年 Winston\N就會呼叫這個函數 Dialogue: 0,0:02:55.37,0:02:57.99,Default,,0000,0000,0000,,或要建立成年人 Winston\N就會呼叫這個函數 Dialogue: 0,0:02:57.100,0:03:03.04,Default,,0000,0000,0000,,這意味著這個函數要了解\N任何需要知道的引數 Dialogue: 0,0:03:03.04,0:03:06.27,Default,,0000,0000,0000,,以作出完整的 Winston Dialogue: 0,0:03:06.46,0:03:10.43,Default,,0000,0000,0000,,在這種情況下,它需要知道\N暱稱、年齡、x 與 y Dialogue: 0,0:03:10.72,0:03:15.25,Default,,0000,0000,0000,,現在,當我們收到那些引數後\N就需要做一些事情 Dialogue: 0,0:03:15.25,0:03:20.92,Default,,0000,0000,0000,,我們需要把這些資料\N實際地連接到 Winston 物件 Dialogue: 0,0:03:21.39,0:03:26.66,Default,,0000,0000,0000,,因此我們要使用全新的特別關鍵字"this" Dialogue: 0,0:03:26.66,0:03:29.02,Default,,0000,0000,0000,,而"this"是指目前的物件實例 Dialogue: 0,0:03:29.02,0:03:31.80,Default,,0000,0000,0000,,我們會說 {\i1}this.nickname{\i0}\N而它會說”好吧” Dialogue: 0,0:03:31.80,0:03:34.17,Default,,0000,0000,0000,,而這個物件的暱稱屬性相等於 Dialogue: 0,0:03:34.17,0:03:38.03,Default,,0000,0000,0000,,任何被傳到建構子函數的,好囉? Dialogue: 0,0:03:38.45,0:03:42.38,Default,,0000,0000,0000,,{\i1}this.age{\i0} 相等於傳入的年齡 Dialogue: 0,0:03:42.45,0:03:44.14,Default,,0000,0000,0000,,而 {\i1}this.x{\i0} 相等於傳入的 x Dialogue: 0,0:03:44.14,0:03:47.33,Default,,0000,0000,0000,,而 {\i1}this.y{\i0} 相等於傳入的 y Dialogue: 0,0:03:47.47,0:03:52.54,Default,,0000,0000,0000,,現在我們有這個名為\NWinston 的抽象數據類型 Dialogue: 0,0:03:52.84,0:03:56.49,Default,,0000,0000,0000,,而它帶有建構子函數\N我們可以使用它來建立全新的Winston Dialogue: 0,0:03:56.49,0:03:58.78,Default,,0000,0000,0000,,讓我們嘗試使用它吧! Dialogue: 0,0:03:59.48,0:04:03.24,Default,,0000,0000,0000,,我們要重新建立 WinstonTeen Dialogue: 0,0:04:03.24,0:04:05.31,Default,,0000,0000,0000,,但是這一次我們用WinstonTeen等於 Dialogue: 0,0:04:05.31,0:04:10.36,Default,,0000,0000,0000,,這裡不用大括號 我們會說\N"等於全新的 Winston" Dialogue: 0,0:04:10.61,0:04:14.11,Default,,0000,0000,0000,,我們會說 "我們正在嘗試\N建立全新的 Winston 實例" Dialogue: 0,0:04:14.11,0:04:16.35,Default,,0000,0000,0000,,然後我們要傳入需要的資料 Dialogue: 0,0:04:16.35,0:04:21.48,Default,,0000,0000,0000,,"Winsteen",15, 20, 50\N好囉! Dialogue: 0,0:04:22.25,0:04:26.31,Default,,0000,0000,0000,,然後我們刪除舊資料\N因為已不再需要它們了 Dialogue: 0,0:04:26.31,0:04:30.10,Default,,0000,0000,0000,,好了吧? 現在我們建立了\N全新的Winsteen Dialogue: 0,0:04:31.21,0:04:35.81,Default,,0000,0000,0000,,我們會說\N{\i1}winstonAdult = new Winston(){\i0} Dialogue: 0,0:04:35.96,0:04:39.50,Default,,0000,0000,0000,,當然他的名字是"Mr. Winst-a-lot"\N聽起來甜美可人的名字 Dialogue: 0,0:04:39.50,0:04:45.34,Default,,0000,0000,0000,,他30歲,在 229 及50\N好,然後我們就可以刪除 Dialogue: 0,0:04:45.34,0:04:49.92,Default,,0000,0000,0000,,這個物件實體語法\N很好! 我們的代碼仍然正常運作 Dialogue: 0,0:04:50.71,0:04:53.65,Default,,0000,0000,0000,,我們在這裡所做的就是\N我們說好吧 就有這個 Dialogue: 0,0:04:53.65,0:04:57.16,Default,,0000,0000,0000,,Winston 抽象類型數據 Dialogue: 0,0:04:57.85,0:05:03.07,Default,,0000,0000,0000,,而我們能建立全新的 Winston 實例 Dialogue: 0,0:05:03.07,0:05:05.16,Default,,0000,0000,0000,,且擁有這些特定的屬性 Dialogue: 0,0:05:05.16,0:05:08.66,Default,,0000,0000,0000,,我們把這些屬性儲存在內 Dialogue: 0,0:05:08.66,0:05:12.28,Default,,0000,0000,0000,,而記憶是非常重要的\N因些你們知道內裡 Dialogue: 0,0:05:12.28,0:05:14.15,Default,,0000,0000,0000,,有這個\N{\i1}this.nickname, this.age{\i0} Dialogue: 0,0:05:14.32,0:05:19.64,Default,,0000,0000,0000,,如果意外地丟失這個年齡\N你們注意到它會說 "未定義" Dialogue: 0,0:05:20.25,0:05:22.96,Default,,0000,0000,0000,,因為在這裡 drawWinston 函數 Dialogue: 0,0:05:22.96,0:05:28.32,Default,,0000,0000,0000,,期待著任何傳入的物件\N都帶有年齡屬性 Dialogue: 0,0:05:28.32,0:05:30.80,Default,,0000,0000,0000,,如果我們沒有 {\i1}this.age{\i0} Dialogue: 0,0:05:30.80,0:05:34.37,Default,,0000,0000,0000,,那麼它也沒有年齡屬性\N我們傳入了建構子函數 Dialogue: 0,0:05:34.37,0:05:37.23,Default,,0000,0000,0000,,但是並沒有用它做任何事情 Dialogue: 0,0:05:37.23,0:05:39.45,Default,,0000,0000,0000,,我們必須使用 "this"關鍵字\N實際地連接到物件 Dialogue: 0,0:05:39.62,0:05:41.54,Default,,0000,0000,0000,,那我們就把它添加回去 Dialogue: 0,0:05:41.54,0:05:45.11,Default,,0000,0000,0000,,現在你們會想代碼已正常運作 Dialogue: 0,0:05:45.11,0:05:50.32,Default,,0000,0000,0000,,但是......我們只是完成了前面做過的事 Dialogue: 0,0:05:50.46,0:05:53.94,Default,,0000,0000,0000,,但這裡是一件很酷的事\N我們所有的 Winstons Dialogue: 0,0:05:53.94,0:05:56.09,Default,,0000,0000,0000,,經過相同的建構子函數 Dialogue: 0,0:05:56.09,0:05:59.66,Default,,0000,0000,0000,,如果我們想要進行更新\N我們是真的可以修改它們的 Dialogue: 0,0:05:59.66,0:06:01.17,Default,,0000,0000,0000,,有關 Winston 的一些東西... Dialogue: 0,0:06:01.17,0:06:04.22,Default,,0000,0000,0000,,所有的 Winstons\N就在這裡,可能是年齡 Dialogue: 0,0:06:04.22,0:06:06.11,Default,,0000,0000,0000,,事實上我們想說 "歲數" Dialogue: 0,0:06:06.11,0:06:09.84,Default,,0000,0000,0000,,我們只須放在這裡\N現在所有 Winstons 說 Dialogue: 0,0:06:09.84,0:06:12.88,Default,,0000,0000,0000,,"15歲"、 "30歲" 對嗎? Dialogue: 0,0:06:12.88,0:06:14.98,Default,,0000,0000,0000,,因此他們只取用獨特的部分 Dialogue: 0,0:06:14.98,0:06:17.42,Default,,0000,0000,0000,,他們也有共享的東西 Dialogue: 0,0:06:17.42,0:06:20.11,Default,,0000,0000,0000,,而物件導向程式設計最棒的地方 Dialogue: 0,0:06:20.11,0:06:22.11,Default,,0000,0000,0000,,就是在這世上有這類的物件 Dialogue: 0,0:06:22.11,0:06:26.11,Default,,0000,0000,0000,,你們能夠實際地建立這些物件的實例 Dialogue: 0,0:06:26.11,0:06:28.43,Default,,0000,0000,0000,,而還有跟他們相似的東西 Dialogue: 0,0:06:28.43,0:06:30.41,Default,,0000,0000,0000,,例如他們擁有相同的屬性 Dialogue: 0,0:06:30.41,0:06:32.41,Default,,0000,0000,0000,,且有不同的東西 Dialogue: 0,0:06:32.41,0:06:35.51,Default,,0000,0000,0000,,例如這個屬性事實上跟其他的屬性\N帶有不同的數值,對不對? Dialogue: 0,0:06:35.51,0:06:38.75,Default,,0000,0000,0000,,你們知道嘛,我們可以\N使用相同的行為 Dialogue: 0,0:06:38.75,0:06:40.51,Default,,0000,0000,0000,,像呼叫相同的函數 Dialogue: 0,0:06:40.51,0:06:43.07,Default,,0000,0000,0000,,以類似的方式使用它們 Dialogue: 0,0:06:43.07,0:06:45.98,Default,,0000,0000,0000,,這是一些有關物件導向\N程式設計很棒的東西 Dialogue: 0,0:06:45.98,0:06:48.55,Default,,0000,0000,0000,,而你們將會看到更多很棒的東西 Dialogue: 0,0:06:48.55,0:06:50.15,Default,,0000,0000,0000,,敬請繼續收看