# 物件導向-概念 物件導向的好處是在開發大型專案時,可以避免程式到處散亂,方便維護,在與他人共同開發時,也可以作為溝通的共通規範,也避免自己在兩個月後在重新開啟專案時,看不懂自己在寫什麼 物件導向就我們在控制程式的時候,是用物件為概念來包裝所有的邏輯跟操作,以下為三個步驟 1. 把情境描述為物件 2. 描述物件的屬性與行為 3. 操作物件讓彼此互動 ![](https://i.imgur.com/gD7hBmd.png) ### 流程: #### 1.把情境描述為物件: 這個情境裡有兩個人,跟一個香蕉再做互動,物件有人跟香蕉 ![](https://i.imgur.com/4EKbXMo.png =500x300) #### 2.描述物件的屬性與行為(抽象的部分): 人與香蕉各自有不同的屬性,比如說人有名字、年齡,香蕉有價格、味道,還有他們各自可以做的動作,定義完動作之後就可以呼叫動作,或者讓物件呼叫彼此的動作 ![](https://i.imgur.com/BDK03ug.png =500x300) #### 3.讓物件彼此互動(實體的部分): 所有的概念都會包裝成一個物件作為互動,我們可以呼叫人這個類別去做打招呼或者給予香蕉的行為。 我們先訂了人這個類別的抽象概念,裏面包含了他所有的屬性與可執行的動作,透過人這個類別為基礎,產生了`A`與`B`這兩個人,也就是實體產生的物件。 ![](https://i.imgur.com/g3RseJh.png =500x300) ![](https://i.imgur.com/kDxb667.png =500x300) ## 實體案例:票務系統 我們會先定義一張票他的抽象部分(共用部分) - 屬性:像是:票的種類、價格、折扣、手續費,這些為物件屬性的相關資訊 - 方法:取得售價、購票行為、退票手續、列印狀態 依據以上這些,就可以產生出不同的票種實體物件,像是車票、演唱會門票、遊樂園的票...等等 ![](https://i.imgur.com/2Rh5ykT.png) ### 1.類別定義:Ticket(抽象部分) ``` Var Ticket = function(初始值){ this.屬性 = 初始值 this.方法 = funciton(){ //要做的事情 可以使用 this.屬性與this.方法 } } ``` 可以把這個想像成物件產生器,各種票券都可以以這個產生器產出一個實體物件,以下為實體案例,需要給他的值為`init_price 價格`與`init_discount 折扣`,裡面就會定義好價錢、票種、折扣、手續費,方法則為取得票價、取得票價說明 ![](https://i.imgur.com/foVpK4j.png) ### 2.產生Ticket這個物件(實體部分) 產生實體物件的方法會用 new()來產生 ![](https://i.imgur.com/vhdv1TK.png) ### 3.操作物件 基本上都是透過 `myTicket.` 的方式來呼叫裡面的內容 ![](https://i.imgur.com/YlZRVhf.png) ### 4.就是封裝 ![](https://i.imgur.com/8owe9PR.png) [動畫互動網頁特效入門(JS/CANVAS課程範例](https://codepen.io/frank890417/pen/YYBLee?editors=0012) 圖片出處:[動畫互動網頁特效入門(JS/CANVAS)](https://hahow.in/courses/586fae97a8aae907000ce721/main) ###### tags: `物件導向`