物件導向「超」入門-簡報版

--- title: 物件導向「超」入門-簡報版 tags: YunNET slideOptions: transition: 'slide' --- # <font style="color:#00FFFF">物件導向「超」入門</font> *資管系ㄉ惡夢* *YuSheng* --- ## [JS ㄉ this](/@happy123/JSthis#/) ---- ## 延伸閱讀 ### 最好回家ㄉ時候慢慢讀 ##### [該來理解 JavaScript 的原型鍊了](https://github.com/aszx87410/blog/issues/18) ##### [淺談 JavaScript 頭號難題 this：絕對不完整，但保證好懂](https://blog.techbridge.cc/2019/02/23/javascript-this/) ##### [this 的值到底是什麼？一次說清楚](https://zhuanlan.zhihu.com/p/23804247) ##### [看完上面後強烈推薦必看！！！！](http://www.objectplayground.com/) ##### [JS & DOM](/@YunNet21st/rk8vREY2B#/) --- ## 物件導向入門之概念篇 ---- ![](https://i.imgur.com/6lhcRhD.png) NOTE:首先我們先來講為什麼要物件導向呢其實大家一般寫程式的方式也是可以你可以不斷的寫長長的程式然後定義很多個函數很多個變數那你就會發生一個情況就是你的程式到處散落假設你在寫一個大型的遊戲你可能有玩家的物件然後你有敵人的物件這些物件的屬性雖然你可以把它包成一包但是你有非常多的函數這些函數有可能是主角攻擊阿或是怎麼樣改變分數然後或是我輸出敵人的血量等等這些動作那當這些函數沒有辦法跟我們剛剛所說到的資料整合在一起的時候它們就會全部散亂在你的畫面跟程式裡面所以當你合作溝通的時候會變得非常麻煩 ---- ![](https://i.imgur.com/9n1mEQO.png) NOTE:你剛寫完時看你自己的程式會看起來好像還看得懂然後很有規則但是別人看你的程式就會像一團亂七八糟的義大利麵或是你兩個月回來看自己寫的程式如果你沒有物件導向的概念你沒有把資料跟方法綁定在一起你會非常的難管理自己的開發 ---- ## 什麼是物件導向？ > 在控制程式的時候 > 以物件為「概念」來包裝 NOTE:所以我們先來問一件事情什麼是物件導向物件導向其實就是我們在控制程式的時候我們用物件為概念來包裝我們所有的邏輯跟操作 ---- ![](https://i.imgur.com/OpEwvVW.png) NOTE:所以我們要分為三個步驟第一個步驟把情境描述為物件那接下來就是描述物件的屬性跟行為然後接下來就是操作物件讓它們彼此互動 ---- ## 把問題描述為物件 ![](https://i.imgur.com/evXVsBW.png) NOTE:我們現在舉一個很簡單的例子這個例子是我今天 A 這個藍色的人要給 B 一根香蕉我們如果要把問題描述為物件我們就可以看出這個情境裡面有兩個人在跟一根香蕉做互動所以我們知道物件有人跟香蕉 ---- ## 描述物件的屬性跟⾏為 ![](https://i.imgur.com/Xq3gNjr.png) NOTE:那接下來呢我們要來描述物件的屬性跟行為我們可以看到人有很多基礎的屬性阿比如說名字年齡我現在有什麼物品然後人也可以有很多的動作像是打招呼走路或接受物品或送出別人物品這些動作那接下來香蕉也可以有很多屬性比如說它的名字價格味道或是香蕉可以被剝皮或是攻擊別人那這樣子我們定義完物件之間的動作之後我們就可以去呼叫這些動作或者讓物件呼叫彼此的動作 ---- ## 操作與讓物件彼此互動 ![](https://i.imgur.com/ZuLI8IW.png) NOTE:如果要達成讓 A 這個藍色的人送給 B 一根香蕉要怎麼做呢首先我們先要知道 A 跟 B 他都屬於人這個概念所以我們可以定義人類這個類別人類有很多事情有很多屬性嘛但是我們要有一個實體那現在實體的案例就是 A 跟 B 它們兩個都屬於人這個類別那接下來 A 這個人有一根香蕉香蕉也是一個實體的物品那接下來我們要做的事情就是我們去呼叫物件上面的動作或是去存取它的屬性假設 A.打招呼然後 A 就會說話然後 A.給予香蕉這個給予香蕉的動作我們可以給它一個參數那我們就傳給它 B 所以 A 就把香蕉給 B 那接下來 B 去呼叫香蕉.剝皮因為它想要吃它然後最後再用 B.吃(香蕉) 來讓 B 把香蕉吃掉所以你可以注意到整個現在描述的情境裡面幾乎沒有出現程式碼或是我沒有去敘述底層的說打招呼裡面到底在做什麼它是要輸出 hello 我的名字嗎或是什麼之類的或是我沒有描述說 B.吃(香蕉) 它裡面可能它把它吃了一口然後它去研究說香蕉是什麼味道或是描述香蕉怎麼樣我只把所有的動作包裝在吃香蕉這個抽象的概念裡面然後去呼叫 B 的行為那你可以注意到在這件事情裡面我們所有的概念它都被包裝為一層物件來做互動所以我們並不會感受到說如果要完成一件打招呼這件事情我們就要寫好幾行說先定義它要講什麼事情然後我去輸出這一串文字而是我可以去呼叫這個類別這個人上面類別預設的行為那像你一般打招呼你可能是說 hello 我是誰誰誰那我就定義人這個類別在打招呼的時候它就是輸出 hello 我是然後輸出人這個本身的名字 ---- ![](https://i.imgur.com/78wzqkr.png) NOTE:所以你可以注意到在這個動作裡面總共做了兩件事情第一個事情是根據類別產生物件也就是說我們先定義了人這個類別可以做什麼以及它有什麼屬性然後接下來以人為基礎產生了 A 跟 B 這兩個實體的人然後我們就稱為兩個物件所以抽象的部分是類別實體產生出來的東西是物件而物件是根據我們給它的初始資料做出來的但它具有我們類別裡面所有相關的屬性跟可以執行的動作那接下來我們就去做操作物件的動作不管是我們去直接呼叫 A 跟 B 的屬性或方法或是我可以讓物件呼叫彼此的動作那像剛剛的例子裡面我們定義了人的類別產生了 A 跟 B 然後也讓 A 跟 B 彼此呼叫像打招呼或者讓 A 呼叫香蕉的剝皮等等 ---- ## 案例：票務系統 ![](https://i.imgur.com/nAbRRHS.png) NOTE:那我們來講一個實體一點的案例剛剛大家可能會覺得有點抽象假設我今天在賣演唱會的票那這張演唱會的票實際上可能會有它是什麼票種然後它的價格是多少折扣是多少手續費是多少然後接下來它的方法也就是這個物件的操作方法我可能需要取得它的售價要用它的總價乘以折價來算那或者我會需要購買購買可能就是把它的所有人填上你的名字那退票後續可能會有一卡車的手續但是我知道它用退票這個方法可以呼叫那或者我列印狀態把這張票券的類似綜合資訊列印出來 ---- ## 案例：票務系統 ![](https://i.imgur.com/UYIinzi.png) NOTE:我們想要一下我們之前會怎麼做之前我們可能會定義票務那票務的話我們有票的價錢票的種類票的 discount 票的折價以及票的 fee 它的手續費所以我們會注意到在這個情況裡面舊的方法我會去定義 ticket 開頭的一堆變數然後我們去說有個 function 是 get_ticket_price 我們把四個變數傳進去讓它計算最後的結果給我或者 get_ticket_description 去有點像綜合敘述這一個那我去輸出一個根據這些資料算出來的一串文字那接下來我們之前也有講到說可以把 ticket 包成一個物件所以你可以注意到阿前面這些是它的屬性然後以及下面這些是它的方法一個物件有屬性跟方法組成 ---- ## 案例：票務系統 ![](https://i.imgur.com/jj5C9cg.png) NOTE:那接下來第二階段我們之前學過物件的打包所以現在我們把 price type discount 跟 fee 都包在 ticket 這個物件裡面那接下來我們就可以直接在方法的部分把 ticket 傳進去所以我們就不會像剛剛一樣分了好多個變數我們還要去每次都要記得要傳哪些我就把這個物件傳進去而裡面這個方法就自動呼叫 A 這個物件上面的價格折價等等來做計算這個是第二階那第三階也就是我們剛剛說的我們要做到物件導向所以起碼做的事情是什麼我們需要把 function 也就是方法跟這一個資料這一包整理在一起所以我們必須要產生一個物件它裡面有屬性有這些資料也有方法可以呼叫有這些 function 可以呼叫那這個 ticket 我們最理想最理想的情況就是有沒有辦法讓它直接吃到本身的屬性所以我就不用再給它任何的參數給它計算我直接讓它呼叫自己的參數就好 ---- ![](https://i.imgur.com/NX2KWO9.png) NOTE:所以我們看一下怎麼抽象形容這個問題我們希望有一個票券的物件那這個票券的物件我們會事先定義說物件有哪些屬性像剛剛的價格接下來我們定義說這個物件上面有哪些可用方法那我們會希望這個方法可以去呼叫自己想要的屬性來做計算或者做其他的事情那接下來第三個怎麼樣去產生這個物件所以這一個動作就叫做定義類別 ---- ![](https://i.imgur.com/G9szKqI.png) NOTE:那我們根據類別來產生物件的時候它的基礎語法是這樣子我們 var 一個 Ticket 那這個 Ticket 通常習慣第一個字大寫來當作物件的類別這就是抽象的概念那接下來我們等於一個 function 那我們可以傳初始值進去給它那接下來這個 function 執行的時候它就會回傳自己而這個自己就是我們剛剛所說的有屬性有方法的物件那接下來我們可以用 this.屬性來設定這個物件上面的初始值那以及 this.方法來設定它可以執行的方法那在這個方法裡面呢我們一樣可以使用 this.屬性 this.方法來存取自己的屬性或是它可以做的事情雖然這樣講有點抽象 ---- ## JS中的函數打包 - 類別定義 ![](https://i.imgur.com/WsOWxwQ.png) NOTE:我們直接看一個實體的程式案例在 js 裡面函數打包的類別定義這邊我們已經做了一個完整的 Ticket 物件那產生這個票券物件的時候我們這個 Ticket 是類別我們會等於一個 function 有點像產生器去產生物件那產生物件的時候我必須要給它的是它的價格以及它的折價那接下來產生價格有了價格跟折價之後我在初始化的時候也就是設定這個物件的時候我們會設定 this.price this.type 一些它上面應該有的屬性我們屬性可以直接指定給現在傳進來初始的價格以及折價那接下來我們去用 this.get_price 跟這個定義說這個物件可以執行什麼動作那這個動作裡面呢假設我們 get_price 我們是要去算說它的總價我們就可以直接存 this. 總價乘以它的折價再加上這個物件上面的手續費所以我們就達成了說把方法跟數值整合在一起這件事情 ---- ## JS中的函數打包 - 產⽣物件 ![](https://i.imgur.com/gW9ODlA.png) NOTE:那接下來怎麼樣產生一個物件呢就像剛剛人這個類別我們需要產生 A 跟 B 這兩個實體的人那它們才能做互動所以我們剛剛用了 function 來定義物件嘛接下來如果我們要產生一個實體的物件我就 var 一個 myticket 這一張票會等於新的 Ticket 我們用新的類別來把它定義出來所以它意思其實就是我執行了 Ticket 這個函數然後傳進去我們初始值然後 new 一個所以我們現在最後得到的就會是一個新的物件然後它具有 ticket 上面所有的屬性但是它現在在 ticket 的 price 跟 discount 部分填的是我傳給它的初始值 ---- ## JS中的函數打包 - 操作物件 ![](https://i.imgur.com/Lxaip3O.png) NOTE:那接下來我們就可以讓這個物件做互動了比如說我們讓 myTicket,price 我們就會得到 500 myTicket.discount 就會得到 0.5 然後 fee 之類的也是那接下來我們可以呼叫這一個 myTicket 實體出來的物件上面的方法比如說我們 .get_price 它就會回傳 530 然後我們 .get_description 就會回傳我們剛剛那一串文字或者說我上面有定義如何退票的話我可以直接傳給它我需要退幾月幾號的票然後會拿回多少的錢那這樣子的話我就不用再去碰這個物件裡面複雜的邏輯所以這樣子呢我就可以輕易地達成說如果這個物件是由其他人建立的我可以不用管退票這件事情裡面怎麼做不管它有沒有呼叫伺服器然後有沒有去計算它應該退回多少金額等等我只要傳給它它需要的東西比如說它到底要退哪張票然後它就會傳給我一些比如說退票的結果 ---- ![](https://i.imgur.com/7LE70Ck.png) NOTE:所以我現在就有一個票券物件可以完整的操作那我們這個動作就稱為封裝那我們就不用再碰裡面的邏輯那這樣子不僅很方便維護而剛剛那樣子的寫法比如說我們呼叫物件上面的動作或屬性也很好的很直觀的能夠理解 --- ## 物件導向入門之繼承篇 ---- ![](https://i.imgur.com/hPtIpTu.png) NOTE:物件導向入門的繼承篇在前一個單元裡面我們有提到如果我們今天把方法以及屬性包在同一個物件裡面我們就可以通過物件的互動來寫更抽象簡潔的程式那這邊會有個小小的問題因為我們的方法是在物件產生的時候加在這個物件上的即使我們可以使用這些方法 ---- ![](https://i.imgur.com/W6Ph0m2.png) NOTE:但是假設我們今天用 people 人類這個類別產生了三個人叫做 Mark Marry 跟 John 那比如說我有一個方法叫 say hello 那它會輸出 Hello I'm 誰誰誰那在這個問題就會存在說因為我們是在產生物件的時候放在上面的函數所以這些函數都是獨立存在於物件內的也就是這些黃色的部分那當我們比如說我們想要統一改動人類打招呼的方式從 Hello I'm Marry 變成 Hi I'm Marry 的時候呢我們就必須要一個一個改物件這樣子其實就會有點麻煩所以我們的問題是函數存在於產生的物件內而無法共用 ---- ![](https://i.imgur.com/zKMHuAr.png) NOTE:所以如果我們想要共用函數的話呢我們必須要先使用 prototype prototype 是什麼呢它其實是 js 中物件導向的一種實現方式那也就是說我們不在裡面說 this.方法等於什麼因為這些方法都一樣我們不希望重複的放在產生的物件內那接下來我們就會希望說如果我們想要呼叫某些特定的方法就可以定義在 Ticket.prototype 的上面定義在 prototype 的上面的時候原型它不會被複製進去物件所以它不會產生很多份放在新產生的物件裡面而是物件它會有個參考連結到這個原型在找不到屬性的時候就會來這個 prototype 上面看看有沒有那我們來看一下圖解的部分 ---- ![](https://i.imgur.com/vSXVXiK.png) NOTE:我們剛剛所新增的 prototype 其實就是一個共同參照用的原型那這個參照用的原型它會獨立存在在外面那比如說當我們根據人類的類別產生了這三個人之後呢裡面並不會有這些原型的 function 比如說 say hello 我們就不會放在這個地方而是它會有個連結連到 prototype 所以比如說我們 Mark.sayHello 的時候它就會說 Mark 上面沒有 sayHello 耶怎麼辦它去找它的 prototype 上面有沒有然後它就找到 sayHello 那這個 prototype 裡面你一樣可以使用 this. 誰誰誰的屬性和 this. 方法也都呼叫的到這個物件上面的東西所以我們就達到了可以統一管理這些函數的目的了那既然我們可以統一管理這些函數 ---- ![](https://i.imgur.com/BuXB1pu.png) NOTE:我們要怎麼樣去看更進階的物件導向呢剛剛其實我們之前的單元都在講說怎麼樣讓物件有自己的屬性跟方法然後封裝在一個物件裡面但是我們接下來要講的是繼承繼承其實有點像 prototype 的概念它是去延伸概念與物件比如說我想要把生物延伸成植物與動物因為植物跟動物都是生物 ---- ![](https://i.imgur.com/jewMwVc.png) NOTE:所以我們現在要做的事情是如果我可以把類別延伸成新的類別會有什麼優勢呢第一就是減少重複地程式我們可以用抽象的概念做進一步的延伸比如說生物延伸成人或狗因為人或狗都是生物可能都有它生命的長度阿今年幾歲阿或是它會吃東西等等那這些我們就不應該重複的寫在人跟狗裡面所以我們應該怎樣去做繼承呢 ---- ![](https://i.imgur.com/uieLXEL.png) NOTE:比如說我今天生物體有名字生命長度這兩個屬性還有移動跟吃東西的方法假如我想要定義一個狗怎麼辦你可以想像啦這個繼承它有點像包一層殼在外面所以我基於生物體這個類別我再包一層狗然後狗的話有自己的品種喜歡吃的東西那也會有一些狗有的動作像吠叫或攻擊但是我今天使用這整包狗的類別的時候呢它也會包含我繼承來生物體的名字跟生物長度我就不需要重複定義名字跟生命長度這些基礎的屬性了而這樣子繼承有什麼好處呢我們可以把這個生物體拿去延伸成其他類別比如說我今天要新增一個龍的類別那龍也一樣屬於生物有自己的名字跟生命長度等等的但是龍會飛龍會飛翔也會生蛋然後有自己的火焰強度跟和善程度所以我們就基於相同的生物體的這個高層級的類別延伸成兩個比較低層級的狗跟龍分別有自己的屬性了 ---- ![](https://i.imgur.com/d5nBu6T.png) NOTE:你可能會問我要怎麼用在程式跟遊戲裡面呢你可以注意到我今天在玩遊戲的時候啊每一個遊戲角色它都會有共用的生命值跟位置這兩個東西那這些角色有生命值跟位置之後呢我們去繼承這個角色延伸成三種類型 NPC 玩家跟敵人那 NPC 可能有一些自動控制的方法阿玩家有一些物品欄位然後敵人有掉寶機率所以這也就是繼承了角色延伸成敵人那敵人也可以使用角色裡面所有屬性跟方法接下來你也可以做第二層的繼承你可以把一般的魔物跟魔王這兩種敵人拆出來那一般的魔物我們會指定它的出現區域然後魔王的話會有一些特殊技能或特殊的屬性設定所以這樣子就可以幫助我們很有效的去管理我們裡面的物件模型而避免說我每個物件裡面有重複的部分比如說我每個都重複寫了生命值跟位置而導致我的程式變的很肥大 ---- ![](https://i.imgur.com/vuS2ArT.png) NOTE:那在 js 裡面怎樣去繼承呢這邊大家要先搞清楚我們說的繼承其實都是類別跟類別之間的繼承那這樣子的話呢我們剛剛講的 new function 先定義完類別然後再 new 出來產生一個實體比如說這張圖的動作我根據狗的類別 new 出來產生一個 poppy 這隻小狗那今天我們講的繼承其實就是在上面我們在定義這個類別的時候呢我們再額外指定它的母類別是什麼比如說我們讓狗繼承生物那在 js 裡面它的繼承方式就會是有點像連結所以說我今天根據這個狗有繼承生物產生出來的這個 poppy 這個實體的物件的話假設我呼叫吃東西這個方法那就會找找找找找找到狗裡面沒有吃東西啊那如果說你有指定繼承的時候它就再繼續往上找找到上游的原型那這個原型呢裡面如果你有定義吃東西它就會執行這個好處就會是說假設你想要複寫掉這個方式的時候會很方便比如說狗雖然也有吃東西但它吃東西的方法可能比較不一樣只有狗專屬的吃東西的方式那我就會在定義狗的時候再定義一個它的吃東西當我們在執行一個 poppy.吃東西的時候呢我們是定義在 prototype 裡面因為不是物件裡面所以它會說物件裡面沒有然後接下來找到 prototype 當它找到狗上面吃東西的時候它就會執行狗上面的吃東西然後不會繼續往上找所以它就會以最近的這個 function 也就是繼承的層次最下面的這個函數為主 ---- ![](https://i.imgur.com/i5aqTcX.png) NOTE:如果要搞懂繼承的話我們就要知道類別是產生一個新的物件而 prototype 是獨立於類別跟物件之外的當物件有寫共用屬性的時候就會往上查找到 prototype 而我們剛剛講的原型鏈也就是繼承的方式我們必須要讓狗可以使用生物體它的一些方法或屬性的時候呢我們就讓 prototype 的上游再一個 prototype 所以它就會不斷的往上查找方法屬性直到找到可以使用為止所以大家應該了解繼承的這整個概念了那我們要怎麼樣定義也就是在程式碼中實作繼承呢 ---- ![](https://i.imgur.com/gvuIXTk.png) NOTE:總共就是三個步驟第一個是建立的時候呼叫母類別第二個子類別新增的時候繼承 prototype 第三個將建構函數指向自己那這看起來有點難 ---- ![](https://i.imgur.com/rQVFG7u.png) NOTE:我們直接進到說明的部分首先第一件事情是我在建立這個物件的時候我也要呼叫母類別的建構函數什麼意思啊你可以看到我們之前的那個建構函數那個 function 我們定義 this.attr 這個物件上面的屬性等於什麼東西所以當我們希望這個物件同時有繼承來生物體的屬性的時候其實最簡單的方式就是把這個物件丟進生物體的初始化函數嘛那丟進這個初始化函數我們必須要用一個特殊的方式我們比如說我們這邊用 Parent 就是繼承的這個母類別 .call 那 call 的方式就是呼叫函數呼叫什麼函數呢我拿 this 也就是這個物件來呼叫所以你可以想像我們今天有點像偷樑換柱一樣我們把現在正在用的這個物件當做 this 傳進去給生物體讓它初始化所以它就不會重複的產生出來兩個新物件而是我們會在比如說你看這邊我們先定義一個 Creature 也就是生物這個類別然後它的一些初始化函數那我們定義了一個 Dog 也就是繼承了生物的狗然後我們在第一行我們就讓它 Creature.call this 跟一些引數所以在這邊生物體就把它拿來初始化了而初始化的是這個目標是 this 那這個 this 就是指向你狗產生出來的這個新物件所以不管是狗這個物件狗正在新增的這個物件還是生物體正在新增的這個物件我都指向同一個這個東西所以我們最後產生出來的結果就會是我用狗的方式設定完了一遍這個物件也用生物體的方式設定完了這個物件那也要注意一下順序是說我會希望先有生物體的屬性嘛所以我先用 Creature.call 然後接下來這一個初始化執行完之後呢我們再去設定狗相關的屬性 ---- ![](https://i.imgur.com/BfsP0P3.png) NOTE:那接下來我們來講第二個為子類別新增繼承的 prototype 甚麼叫做為子類別新增繼承呢假設我們希望狗可以用生物體的移動或吃東西的方法那最簡單的方式你會問說為什麼我不把生物體的 prototype 指定給狗就好了因為物件會自動往上找嘛它就會找到生物的 prototype 那其實我們會發現一個問題是因為我們想要對狗也要做一些單獨的 prototype 設定狗也有一些共用的函數是只有狗有的所以假設我現在定義一個吠叫或攻擊而我沒有一個中繼的 prototype 我直接連到生物的 prototype 的時候呢因為我定義在 prototype 上所以我就會動到生物的這個物件了所以要怎麼做我們必須要使用 Object.create Object.create 它是創造一個空的新的物件但是將它的上游連到你給它的 prototype 所以我們用比如說生物跟狗的案例呢我們讓 Dog.prototype 這個狗的原型會等於 Object.create 一個空的物件然後我們傳給它 Creature.prototype 所以這一個空物件上游連結了一個原型鏈一個 prototype 是生物的所以你可以想像中間被產生出了一個空的物件但是有這個虛線存在讓我們找不到方法的時候可以回溯的上游去呼叫生物的方法所以這樣產生出來之後我們把它指定給 Dog.prototype ---- ![](https://i.imgur.com/mYTc06e.png) NOTE:那最後一件事情呢就是把建構函數指向自己我們想像我們在定義類別的時候都會定義一個新的 function 嘛那這個 function 假設我們今天用 Object.create 做了一個新的空物件的時候它也會往上找阿可是它找不到這個 constructor 也是我們定義的這個產生函數的時候呢它就會繼續找找到生物的 prototype 上面的產生函數所以就變成了它會用生物的那個產生函數來初始化我的物件而不是狗的這個所以我們必須要讓 Child.prototype.constructor 比如說我們讓狗的 prototype 的建構函數會等於狗的建構函數這樣子呢它才不會繼續往上游回溯的生物的建構函數 ---- ![](https://i.imgur.com/YFQ14uk.png) NOTE:那這樣大家聽下來應該已經整個茫掉了最後講一下實際範例是人的繼承我們想要先做一個人的物件 Person 那這個 Person 有一些基礎的像名字年齡打招呼那我們希望延伸這個人類的物件呢新增一個 Worker 工作者的物件那這個工作者的物件有工作種類薪水跟工作的自我介紹它會說我的名字是什麼我的工作是什麼所以它會用到上游的這個名字那也會用到自己的這個工作種類那這邊我們看一下我們首先 var 一個 Worker 它會等於一個 function 先初始化整個產生函數那在裡面我們做的第一件事情因為我們要繼承人所以我們讓 Person.call(this.name) 所以我們這邊呼叫人的建構函數然後我們把什麼傳給它建構呢我們把這個正在新增的物件傳給它也就是 this 然後我們傳給它這個人啊我們之前人不是用個名字來初始化嗎所以我們就後面函數的參數一樣接給它那接著呢新增完人的屬性之後我們去設定 this.job 就是這個 Worker 上面的一些屬性那新增完這個之後第二件事情是 prototype 所以我們讓 Worker.prototype 這個工人的原型會等於 Object.create 我們創造一個新的物件連結到上游的 Person.prototype 所以這現在是空的但是有那個連結存在然後最後我們讓 Worker.prototype,constructor 也就是這個工作者的建構子就是那個產生的函數呢會等於自己的產生函數所以我們讓它不會再上游回溯到人的產生函數那做完這個長長的繼承之後我們就可以來做 Worker.prototype.tellJob 我們在 prototype 上面定義我們最一開始提到的共用函數所以我們 tellJob 等於 I am 然後 this.job 然後我們也可以在比如說在後面接一個 my name is "this.name" 那它也一樣可以吃到這個繼承來的 Person 的名字那最後就跟我們之前一樣我們產生一個新的 Worker var Henry 會等於 new Worker 然後給它名字跟它的工作它就會自動初始化那個 Person 的類別然後繼承過來那最後我們就可以讓 Henry.sayHello 或是 Henry.tellJob 不管是人上面的打招呼或是 Worker 上面的自我介紹都可以呼叫 --- ## [物件導向入門之實作篇](https://yuakatl.github.io/JS-OOP-practice/) NOTE:https://codepen.io/yu_sheng/pen/rNazzxx?editors=0010 ---- ![](https://i.imgur.com/b64dMPF.png) NOTE:在前面我們講了如何使用物件導向來把屬性跟方法綁在一起以及繼承其他類別的東西產生一個更進階的類別那在這裡我們會用物件導向的思維來寫一個球球對打的小遊戲那這個小遊戲裡面兩個板子會互相對打這個大家應該蠻熟悉的那在這個遊戲裡面的話呢我會有幾個主要的物件 ---- ![](https://i.imgur.com/orwmhKy.png) NOTE:包括板子跟球那這兩個板子跟球你可以想像它都是在遊戲的畫面裡面所以它會有自己的位置元素跟大小所以我們會有一個遊戲物件當成母類別分別有位置元素跟大小以及一些方法像更新 css 把位置跟大小更新到實際的網頁上面以及會有一個函數叫做 Collide 去偵測有沒有碰撞我們可以傳給它另一個物件然後讓它跟我們說這兩個物件是不是有重疊那接下來我們會延伸繼承這個遊戲物件變成球跟板子兩個類別在球的部份我們會加上一個速度的屬性然後我們會有一個 Update 更新它除了執行母類別的更新 css 之外呢也會把速度加到位置上面所以你可以想像球就會連續的移動那以及球會有一個初始化的函數裡面會讓它有亂數的初始速度以及把它放到畫面中央那接下來在板子的部份呢我們沒有加上屬性不過我們的 Update 更新我們會檢查它是不是有超出邊界那如果有超出邊界就限制它的移動所以它不會超出遊戲的範圍然後最後它也會呼叫母類別的更新 css 把資料反應到現在的網頁上面 ---- ![](https://i.imgur.com/QmsYier.png) NOTE:那接下來是遊戲本體的部分在遊戲本體我們也會建立一個物件一個類別來記錄它包括計時器去呼叫每一個當下的那一個遊戲更新以及 Control 我現在鍵盤按的狀態然後分數那以及一些方法像是開始結束遊戲然後初始化我的鍵盤控制以及遊戲本體更新的那個迴圈那我們會藉由遊戲這個物件呢來控制板子跟球的行為 ---- ![](https://i.imgur.com/5QOD0nh.png) NOTE:我們來看一下實際上的程式碼大概會長這樣子定義一個遊戲物件然後我們藉由這個縮放的功能我們可以很清楚的看到遊戲的物件上面有哪些方法可以呼叫以及我在初始化遊戲物件的時候呢要傳進去什麼樣的參數 ---- ![](https://i.imgur.com/Esnnz2J.png) NOTE:那這邊也是球我們去繼承了遊戲的物件那我們在球上面加上了 Update 跟初始化這兩個額外的方法 ---- ![](https://i.imgur.com/kNEqoyg.png) NOTE:那以及 Board 我們也是傳進去繼承遊戲物件之後呢我們再加上一個 Update 去檢查有沒有超過邊界跟更新 ---- ![](https://i.imgur.com/CaJj3wP.png) NOTE:然後最後我們會有個總體的遊戲那這個遊戲呢我會有它的計時器以及剛剛所講的開始結束遊戲等等的控制所以你可以注意到用物件導向的方式來寫程式我們可以讓程式碼非常好管理而且一目了然 ---- ![](https://i.imgur.com/t7EiwPh.png) NOTE:那我們先講一下尺寸資訊的部分我們整個遊戲場地是 500500 然後裡面的東西用絕對定位針對這整個方框做定位所以我們上面這個板子距離上面 30 下面這個板子的上距是 455 然後每個板子是 10015 的尺寸然後最後球是 1515 那了解尺寸資訊之後呢我們就可以開始進到物件導向的實作

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.