第十九章、你好啊鐵人們，接下來就由我鎖鏈 Canvas 對付你！(參)

第 12 屆 iThome 鐵人賽

DAY 20

Modern Web

網頁阿尼尛，到底是在幹尛？系列第 20 篇

12th鐵人賽好想工作室

CathyShen

團隊好想工作室 v4.0

2020-10-05 14:38:52

1151 瀏覽

簡介

當我們在撰寫 Canvas 時，常常會需要定義一些向量類別來計算元素的位置，然而每一個類別都要建立一個 function 函式來存取資料的話，程式就會變得非常龐大且難以管理。因此本章節我們來介紹一下 JavaScript 內的物件導向。

物件導向

實體物件

| --------------- |
角色

姓名：
性別：
職業：
生命值：
| --------------- |

什麼是物件導向呢？舉例來說，我們遇到了我們在遊歷這個世界時，會遇到形形色色的角色，這些角色都有基礎的屬性諸如：姓名、年齡...等。這就是一個物件。

| --------------- |
技能面板

姓名：鎖鏈康妮
性別：女
職業：坐鎮四樓的魔王
生命值：999
魔力值：999
技能數量：999
| --------------- |

| --------------- |
技能面板

姓名：鐵人勇者
性別：？？？
職業：轉職勇者
生命值：10
魔力值：10
技能數量：20
| --------------- |

而在各種角色中存在著 - 魔王 鎖練的康妮，我們可以透過點開資訊面板看到康妮的基礎資料，這個 鎖鏈康妮 就是我們建立的一個 物件實體 (Object instance)

接著我們可以操作物件，透過呼叫類別，鎖鏈康妮 使出了招數：地獄曼陀羅！─=≡Σ((( つ•̀ω•́)=c＜一ω<))，勇者遭受攻擊，喪失 9.9% 生命值。

我們來試著建立一個實體物件看看吧：

function Person(name,skill){
  this.name = name
  this.skill = skill
  this.attack = function() {
    alert(this.name + '使出攻擊：' + this.skill)
  }
}
// 使用 `new` 告知瀏覽器建立新的物件實例
var person01 = new Person('鎖鏈康妮');

person01.attack(person)

像這樣 Person 這個 function 就像是我們的共用屬性，不論是魔王還是勇者都具有名字、技能等資料。而我們讓這個物件去執行一些動作，比如：使用技能攻擊

而物件導向還可以讓兩個物件去彼此呼叫：

function Person(name,skill){
  this.name = name
  this.skill = skill
  this.attack = function(person) {
    console.log(this.name + '使出攻擊：' + this.skill)
    console.log(person.name + '遭受' + this.name + '攻擊')
  }
}
// 使用 `new` 告知瀏覽器建立新的物件實例
var Boss = new Person('康妮','地獄曼陀羅');
var Braver = new Person('勇者','c876斬');

Boss.attack(Braver);

上面的例子就可以看到，我們讓康妮一出現就給勇者一頓粗飽。

class 的寫法

雖然像這樣的寫法已經非常彈性且方便，但在 JavaScript 內有更優雅的寫法 class，讓我們不需要手動繼承物件繼承。

以剛剛的範例改寫：

class Person {
  constructor(name, skill) {
    this.name = name;
    this.skill = skill;
  }

  attack(person) {
    console.log(this.name + '使出攻擊：' + this.skill)
    console.log(person.name + '遭受' + this.name + '攻擊')
  }
}

const Boss = new Person('康妮', '地獄曼陀羅');
const Braver = new Person('勇者', 'c876斬');

Braver.attack(Boss);

而在這個範例中，我們利用 class 來建立一個原型物件 constructor 告訴程式「角色」應該要擁有那些基礎屬性。

接著我們就可以直接建立一個 method 讓角色動作，因此我們可以看到勇者使出了招數：c876斬！(ಠ o ಠ)¤=[]:::::>，康妮遭受了攻擊，喪失 9.9% 生命值。

像這樣的寫法我們就可以看著程式碼也很清楚知道，角色內有什麼屬性，攻擊做了什麼動作。

Canvas 內的物件導向

在上面的介紹後，大家應該就可以很清楚知道我們在寫 Canvas 程式碼時，只需要將基本的元件屬性、動畫時間等先用 constructor 寫好之後，再透過一些動作去呼叫 constructor 內的屬性就好：

class Vector2D {
  constructor(x,y) {
    this.x = x
    this.y = y
  }
}

var a = new Vec2

然後我們就可以在外部寫一些運算邏輯的程式：

class Vector2D{
  constructor(x,y) {
    this.x = x
    this.y = y
  }
	move(x,y){
    return new Vector2D(this.x+x, this.y+y)
  }
}

// 建立起始點
const origin = new Vector2D(3,4)

let target = origin.move(10,10)

console.log('原始X軸座標' + origin.x + '移動到' + target.x)