WEBVTT 00:00:00.977 --> 00:00:03.393 我們回到我們創建溫斯頓的計劃 00:00:03.393 --> 00:00:06.339 但我添加了一個新物件類型霍伯 Hopper 00:00:06.339 --> 00:00:08.739 因為霍伯感覺有點被冷落 00:00:08.739 --> 00:00:11.924 現在 我用定義溫斯頓方式同樣定義霍伯 00:00:11.924 --> 00:00:17.084 以構造函數 (constructor function) 開始 採用相同的屬性 有繪製和談話的功能 00:00:17.084 --> 00:00:20.933 我還添加了另一種 名為何瑞 (Horray) 的方法 00:00:20.933 --> 00:00:25.328 因為霍伯真的很喜歡慶祝而溫斯頓很不喜歡 00:00:25.328 --> 00:00:29.924 現在在函數的下方 我創建了兩個新的霍伯物件: 00:00:29.924 --> 00:00:31.524 小霍伯和大霍伯 00:00:31.524 --> 00:00:36.317 繪製出他們 並呼叫 其中一個和另一端的何瑞通話 00:00:36.317 --> 00:00:40.278 所以這是相當奇妙的 現在 如果我們看一下此處程式 00:00:40.278 --> 00:00:42.648 你可能會注意到一些有趣的事情 00:00:42.648 --> 00:00:47.414 霍伯的程式和溫斯頓的程式非常類似 00:00:47.414 --> 00:00:50.284 尤其是看這個構造函數 我不知道你是否還記得 00:00:50.284 --> 00:00:54.804 那跟溫斯頓構造函數是完全相同的程式 00:00:54.804 --> 00:00:58.493 然後這個通話函數跟溫斯頓通話函數 00:00:58.493 --> 00:01:03.897 也是完全相同的程式 他們也都有繪製函數 00:01:03.897 --> 00:01:07.162 因此 這兩個物件類型有很多共同的東西 00:01:07.162 --> 00:01:09.631 那是有道理的 因為霍伯和溫斯頓 00:01:09.631 --> 00:01:13.299 在我們世界裡是非常相似的物件類型 00:01:13.299 --> 00:01:17.879 如果你想想現實世界 電腦外 00:01:17.879 --> 00:01:20.809 大多數物件類型共享相似處 00:01:20.809 --> 00:01:25.543 就像在動物王國 所有的動物在某些方面都很相似 00:01:25.543 --> 00:01:29.682 而動物有不同類型 像人類一樣 00:01:29.682 --> 00:01:34.028 人類共享這些相似之處 但也有自己 獨特的相似之處 00:01:34.028 --> 00:01:36.340 因此 我們可以說 00:01:36.340 --> 00:01:41.527 人類物件類型從動物物件類型繼承功能 00:01:41.527 --> 00:01:43.634 我們不是從無開始 00:01:43.634 --> 00:01:46.814 我們在原有動物功能之上添加功能 00:01:46.814 --> 00:01:51.796 就像所有的動物會發出聲響 人類也會說話 00:01:51.796 --> 00:01:56.363 所以物件繼承這一概念 在程式編碼中非常有用 00:01:56.363 --> 00:02:00.715 我們可以在 JavaScript 創建 物件繼承鏈 00:02:00.715 --> 00:02:05.043 要做到這一點 先想想我們物件類型是要分享什麼 00:02:05.043 --> 00:02:11.314 然後想出一個名字 創建一個新的物件類型 代表基本物件 NOTE Paragraph 00:02:11.314 --> 00:02:13.743 讓我們稱呼他們為動物 00:02:13.743 --> 00:02:16.301 所以我們說 var Creature = ... 00:02:16.301 --> 00:02:18.261 現在 我們需要構造函數 00:02:18.261 --> 00:02:23.662 讓我們去偷霍伯的函數 因為它跟溫斯頓是一樣的 好的 00:02:23.662 --> 00:02:29.402 接著... 讓我們來看看 現在 我們要... 我們接下來要怎麼辦? 00:02:29.402 --> 00:02:33.236 也許我們要添加 “通話” 函數 00:02:33.236 --> 00:02:36.373 通話函數 我們可以偷霍伯的 00:02:36.373 --> 00:02:39.943 但是當然 我們需要有動物的原型來代替 00:02:39.943 --> 00:02:45.790 好吧 酷 所以現在我們有 動物物件類型 00:02:45.790 --> 00:02:48.340 但是 我們需要真正告訴霍伯 00:02:48.340 --> 00:02:52.641 霍伯的功能實際上應該根基於動物 00:02:52.641 --> 00:02:56.179 因此 我們可以透過這裡寫這行 我們會說 00:02:56.179 --> 00:03:05.000 Hopper.prototype = Object.create(Creature.prototype) 00:03:05.000 --> 00:03:09.927 所以這行做的是告訴 Javascript 霍伯原型的依據 00:03:09.927 --> 00:03:15.767 所有霍伯的功能立足在 Creature.prototype 動物原型 00:03:15.767 --> 00:03:19.982 而它意味著 程式每一次在霍伯身上找函數 00:03:19.982 --> 00:03:23.742 它會先看霍伯的原型 但如果沒有找到 00:03:23.742 --> 00:03:29.739 就會先找看看有沒有在動物原型裡 這就是我們所說的原型鏈 00:03:29.746 --> 00:03:32.372 現在 做了這一點後 我們應該可以 00:03:32.372 --> 00:03:37.564 刪除霍伯通話函數 因為它在動物中存在 00:03:37.564 --> 00:03:41.991 它是在原型鏈前面 讓我們試試吧 準備好了? ♪咚咚咚♪ 00:03:41.991 --> 00:03:48.604 有效!因為它在動物原型裡發現替代品 00:03:48.994 --> 00:03:53.424 呃 讓我們嘗試刪除溫斯頓 00:03:53.424 --> 00:03:58.420 好的 沒效 它說 “物件有沒有方法談話” 00:03:58.420 --> 00:04:00.913 為什麼是這樣? 我們有溫斯頓構造和繪圖函數 00:04:00.913 --> 00:04:02.867 我們拿走了通話 00:04:02.867 --> 00:04:05.724 好吧 你注意到我們實際上忘了說 00:04:05.724 --> 00:04:08.619 溫斯頓的原型是基於動物的原型 00:04:08.619 --> 00:04:14.371 因此 我們需要一個非常重要的防線 Winston.prototype = object.create 00:04:14.371 --> 00:04:17.734 (Creature.prototype) 00:04:17.784 --> 00:04:20.216 成了! 同時注意一些重要的東西 00:04:20.216 --> 00:04:23.317 這行是在構造函數之後 00:04:23.317 --> 00:04:27.288 在添加任何東西給溫斯頓原型之前 00:04:27.288 --> 00:04:30.064 通常要告訴它 00:04:30.064 --> 00:04:32.024 馬上: 00:04:32.024 --> 00:04:34.200 你的初始原型將是依據這個 00:04:34.200 --> 00:04:37.224 但是 我們繼續添加更多東西至原型 00:04:37.224 --> 00:04:39.003 因為可能有一些事情 00:04:39.003 --> 00:04:42.883 是溫斯頓所特有的 或霍伯獨有的 動物沒有 00:04:42.889 --> 00:04:46.365 這很酷 可以自己定義這些東西 00:04:46.365 --> 00:04:51.526 好的 現在 我們看這個 仍然有一些重複的程式 構造函數的程式 00:04:51.526 --> 00:04:54.316 對?我們有三倍多的程式 00:04:54.316 --> 00:04:57.846 所以 我們可以直接刪除嗎? 00:04:57.846 --> 00:04:59.888 讓我們試試 00:04:59.888 --> 00:05:03.509 好的 嗯... 似乎沒效 00:05:03.509 --> 00:05:05.649 因為我們的霍伯在上方 00:05:05.649 --> 00:05:08.080 它似乎把自己都忘了 00:05:08.080 --> 00:05:12.604 這是因為 Javascript 不假設 你想要同樣的構造函數 00:05:12.604 --> 00:05:15.264 即使你想依據它的原型 00:05:15.264 --> 00:05:19.359 它讓你定義自己物件的構造 00:05:19.359 --> 00:05:26.266 但它也給你一個簡單的方法 從次物件來呼叫構造函數 00:05:26.266 --> 00:05:36.540 能做到這一點的方法是:Creature.call(this,nickname,age,x,y) 00:05:36.540 --> 00:05:39.360 這是什麼呢 - 請注意它有效 好極了 00:05:39.360 --> 00:05:44.429 它實際上做的是 呼叫動物函數 -- 構造函數 00:05:44.429 --> 00:05:47.069 呼叫函數 並說 00:05:47.069 --> 00:05:49.749 好吧 你應該呼叫這個構造函數 00:05:49.749 --> 00:05:54.124 如同它被霍伯物件呼叫 00:05:54.124 --> 00:05:56.968 並且 如果它用這些參數來呼叫 00:05:56.968 --> 00:05:59.547 這些是霍伯通話得到的參數 00:05:59.547 --> 00:06:03.859 這將終結這段程式執行 如同它是在這裡 00:06:03.859 --> 00:06:06.807 這正是我們想要的 而它有效! 00:06:06.807 --> 00:06:09.079 我們可以繼續前進 00:06:09.079 --> 00:06:14.855 複製這行到溫斯頓構造 00:06:14.855 --> 00:06:17.171 它有效 好極了! 00:06:17.171 --> 00:06:18.781 好的 因此 檢查了這一點 00:06:18.781 --> 00:06:24.911 我們都在一個單一基本物件包裹共同屬性與功能: Creature 00:06:24.911 --> 00:06:28.207 我們已經從基本物件延伸做了兩個物件類型 00:06:28.207 --> 00:06:31.931 他們繼承了一些功能 但也自行添加功能 00:06:31.931 --> 00:06:33.309 而關於這個很酷的事是 00:06:33.309 --> 00:06:36.489 我們可以在一個地方更改共享功能 00:06:36.489 --> 00:06:41.202 就像如果我們想再次更改年齡 我們可以說 “+歳” 00:06:41.202 --> 00:06:44.188 酷 現在人人都有幾 “歳” 在它的結尾 00:06:44.188 --> 00:06:49.481 或者 我們可以改變 “說話” 函數 像 “suppp” 嗚! 00:06:49.481 --> 00:06:53.241 現在溫斯頓和霍伯都在說 “SUP” 00:06:53.241 --> 00:06:56.661 所以 現在你看到了 怎樣創造物件類型和繼承物件類型 00:06:56.661 --> 00:07:01.604 你可以開始想想 這在 繪圖和動畫 模擬和遊戲 如何有用 00:07:01.604 --> 00:07:05.287 例如 也許你有一個遊戲 有許多類型的字符 00:07:05.287 --> 00:07:07.683 它們都可以跑 但只有其中的一些可以跳 00:07:07.683 --> 00:07:12.270 對於繼承物件類型 這是個完美的地方 00:07:12.270 --> 00:07:15.970 但我敢說 你能想到更多好方法