Return to Video

物件繼承（視頻版）

  • 0:01 - 0:03
    我們回到我們創建溫斯頓的計劃
  • 0:03 - 0:06
    但我添加了一個新物件類型霍伯 Hopper
  • 0:06 - 0:09
    因為霍伯感覺有點被冷落
  • 0:09 - 0:12
    現在 我用定義溫斯頓方式同樣定義霍伯
  • 0:12 - 0:17
    以構造函數 (constructor function) 開始
    採用相同的屬性 有繪製和談話的功能
  • 0:17 - 0:21
    我還添加了另一種
    名為何瑞 (Horray) 的方法
  • 0:21 - 0:25
    因為霍伯真的很喜歡慶祝而溫斯頓很不喜歡
  • 0:25 - 0:30
    現在在函數的下方
    我創建了兩個新的霍伯物件：
  • 0:30 - 0:32
    小霍伯和大霍伯
  • 0:32 - 0:36
    繪製出他們 並呼叫
    其中一個和另一端的何瑞通話
  • 0:36 - 0:40
    所以這是相當奇妙的
    現在 如果我們看一下此處程式
  • 0:40 - 0:43
    你可能會注意到一些有趣的事情
  • 0:43 - 0:47
    霍伯的程式和溫斯頓的程式非常類似
  • 0:47 - 0:50
    尤其是看這個構造函數
    我不知道你是否還記得
  • 0:50 - 0:55
    那跟溫斯頓構造函數是完全相同的程式
  • 0:55 - 0:58
    然後這個通話函數跟溫斯頓通話函數
  • 0:58 - 1:04
    也是完全相同的程式
    他們也都有繪製函數
  • 1:04 - 1:07
    因此 這兩個物件類型有很多共同的東西
  • 1:07 - 1:10
    那是有道理的 因為霍伯和溫斯頓
  • 1:10 - 1:13
    在我們世界裡是非常相似的物件類型
  • 1:13 - 1:18
    如果你想想現實世界 電腦外
  • 1:18 - 1:21
    大多數物件類型共享相似處
  • 1:21 - 1:26
    就像在動物王國
    所有的動物在某些方面都很相似
  • 1:26 - 1:30
    而動物有不同類型 像人類一樣
  • 1:30 - 1:34
    人類共享這些相似之處 但也有自己
    獨特的相似之處
  • 1:34 - 1:36
    因此 我們可以說
  • 1:36 - 1:42
    人類物件類型從動物物件類型繼承功能
  • 1:42 - 1:44
    我們不是從無開始
  • 1:44 - 1:47
    我們在原有動物功能之上添加功能
  • 1:47 - 1:52
    就像所有的動物會發出聲響
    人類也會說話
  • 1:52 - 1:56
    所以物件繼承這一概念
    在程式編碼中非常有用
  • 1:56 - 2:01
    我們可以在 JavaScript 創建
    物件繼承鏈
  • 2:01 - 2:05
    要做到這一點
    先想想我們物件類型是要分享什麼
  • 2:05 - 2:11
    然後想出一個名字 創建一個新的物件類型
    代表基本物件
  • 2:11 - 2:14
    讓我們稱呼他們為動物
  • 2:14 - 2:16
    所以我們說 var Creature = ...
  • 2:16 - 2:18
    現在 我們需要構造函數
  • 2:18 - 2:24
    讓我們去偷霍伯的函數
    因為它跟溫斯頓是一樣的 好的
  • 2:24 - 2:29
    接著... 讓我們來看看 現在 我們要...
    我們接下來要怎麼辦？
  • 2:29 - 2:33
    也許我們要添加 “通話” 函數
  • 2:33 - 2:36
    通話函數 我們可以偷霍伯的
  • 2:36 - 2:40
    但是當然 我們需要有動物的原型來代替
  • 2:40 - 2:46
    好吧 酷 所以現在我們有
    動物物件類型
  • 2:46 - 2:48
    但是 我們需要真正告訴霍伯
  • 2:48 - 2:53
    霍伯的功能實際上應該根基於動物
  • 2:53 - 2:56
    因此 我們可以透過這裡寫這行 我們會說
  • 2:56 - 3:05
    Hopper.prototype =
    Object.create(Creature.prototype)
  • 3:05 - 3:10
    所以這行做的是告訴 Javascript
    霍伯原型的依據
  • 3:10 - 3:16
    所有霍伯的功能立足在 Creature.prototype
    動物原型
  • 3:16 - 3:20
    而它意味著 程式每一次在霍伯身上找函數
  • 3:20 - 3:24
    它會先看霍伯的原型
    但如果沒有找到
  • 3:24 - 3:30
    就會先找看看有沒有在動物原型裡
    這就是我們所說的原型鏈
  • 3:30 - 3:32
    現在 做了這一點後
    我們應該可以
  • 3:32 - 3:38
    刪除霍伯通話函數 因為它在動物中存在
  • 3:38 - 3:42
    它是在原型鏈前面
    讓我們試試吧 準備好了？ ♪咚咚咚♪
  • 3:42 - 3:49
    有效！因為它在動物原型裡發現替代品
  • 3:49 - 3:53
    呃 讓我們嘗試刪除溫斯頓
  • 3:53 - 3:58
    好的 沒效 它說
    “物件有沒有方法談話”
  • 3:58 - 4:01
    為什麼是這樣？ 我們有溫斯頓構造和繪圖函數
  • 4:01 - 4:03
    我們拿走了通話
  • 4:03 - 4:06
    好吧 你注意到我們實際上忘了說
  • 4:06 - 4:09
    溫斯頓的原型是基於動物的原型
  • 4:09 - 4:14
    因此 我們需要一個非常重要的防線
    Winston.prototype = object.create
  • 4:14 - 4:18
    (Creature.prototype)
  • 4:18 - 4:20
    成了！
    同時注意一些重要的東西
  • 4:20 - 4:23
    這行是在構造函數之後
  • 4:23 - 4:27
    在添加任何東西給溫斯頓原型之前
  • 4:27 - 4:30
    通常要告訴它
  • 4:30 - 4:32
    馬上：
  • 4:32 - 4:34
    你的初始原型將是依據這個
  • 4:34 - 4:37
    但是 我們繼續添加更多東西至原型
  • 4:37 - 4:39
    因為可能有一些事情
  • 4:39 - 4:43
    是溫斯頓所特有的 或霍伯獨有的 動物沒有
  • 4:43 - 4:46
    這很酷 可以自己定義這些東西
  • 4:46 - 4:52
    好的 現在 我們看這個
    仍然有一些重複的程式 構造函數的程式
  • 4:52 - 4:54
    對？我們有三倍多的程式
  • 4:54 - 4:58
    所以 我們可以直接刪除嗎？
  • 4:58 - 5:00
    讓我們試試
  • 5:00 - 5:04
    好的 嗯... 似乎沒效
  • 5:04 - 5:06
    因為我們的霍伯在上方
  • 5:06 - 5:08
    它似乎把自己都忘了
  • 5:08 - 5:13
    這是因為 Javascript 不假設
    你想要同樣的構造函數
  • 5:13 - 5:15
    即使你想依據它的原型
  • 5:15 - 5:19
    它讓你定義自己物件的構造
  • 5:19 - 5:26
    但它也給你一個簡單的方法
    從次物件來呼叫構造函數
  • 5:26 - 5:37
    能做到這一點的方法是：Creature.call(this,nickname,age,x,y)
  • 5:37 - 5:39
    這是什麼呢 - 請注意它有效 好極了
  • 5:39 - 5:44
    它實際上做的是 呼叫動物函數 -- 構造函數
  • 5:44 - 5:47
    呼叫函數 並說
  • 5:47 - 5:50
    好吧 你應該呼叫這個構造函數
  • 5:50 - 5:54
    如同它被霍伯物件呼叫
  • 5:54 - 5:57
    並且 如果它用這些參數來呼叫
  • 5:57 - 6:00
    這些是霍伯通話得到的參數
  • 6:00 - 6:04
    這將終結這段程式執行 如同它是在這裡
  • 6:04 - 6:07
    這正是我們想要的 而它有效！
  • 6:07 - 6:09
    我們可以繼續前進
  • 6:09 - 6:15
    複製這行到溫斯頓構造
  • 6:15 - 6:17
    它有效 好極了！
  • 6:17 - 6:19
    好的 因此 檢查了這一點
  • 6:19 - 6:25
    我們都在一個單一基本物件包裹共同屬性與功能：
    Creature
  • 6:25 - 6:28
    我們已經從基本物件延伸做了兩個物件類型
  • 6:28 - 6:32
    他們繼承了一些功能 但也自行添加功能
  • 6:32 - 6:33
    而關於這個很酷的事是
  • 6:33 - 6:36
    我們可以在一個地方更改共享功能
  • 6:36 - 6:41
    就像如果我們想再次更改年齡
    我們可以說 “+歳”
  • 6:41 - 6:44
    酷 現在人人都有幾 “歳” 在它的結尾
  • 6:44 - 6:49
    或者 我們可以改變 “說話” 函數
    像 “suppp” 嗚！
  • 6:49 - 6:53
    現在溫斯頓和霍伯都在說 “SUP”
  • 6:53 - 6:57
    所以 現在你看到了
    怎樣創造物件類型和繼承物件類型
  • 6:57 - 7:02
    你可以開始想想 這在
    繪圖和動畫 模擬和遊戲 如何有用
  • 7:02 - 7:05
    例如 也許你有一個遊戲
    有許多類型的字符
  • 7:05 - 7:08
    它們都可以跑
    但只有其中的一些可以跳
  • 7:08 - 7:12
    對於繼承物件類型 這是個完美的地方
  • 7:12 - 7:16
    但我敢說 你能想到更多好方法
Title:
物件繼承（視頻版）
Description:

這僅是我們的互動編碼充分談話的銀幕截屏，讓製做字幕和翻譯更容易。更好的談話內容可在這裡觀看：
https://www.khanacademy.org/cs/programming/
more » « less
Video Language:
English
Duration:
07:17

Chinese, Traditional subtitles

Revisions

Our website uses cookies for analysis purposes.