【LV. 24】PixiJS青銅玩家：helper function - keyboard()（2）物件 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2022 iThome 鐵人賽

DAY 24

Modern Web

PixiJS青銅玩家系列第 24 篇

【LV. 24】PixiJS青銅玩家：helper function - keyboard()（2）物件

14th鐵人賽 pixijs pixi

NoZ

團隊好想工作室 v6.0

2022-10-09 13:25:26

314 瀏覽

分享至

▉ 前言

這裡將利用教程所提供的"Treasure Hunter Game"來直接學習PixiJS中的語法。"Treasure Hunter Game"的程式碼 ---> Click Here !

系統提示：「If you fail, don't forget to learn your lesson.」，PixiJS青銅玩家還卡關於自定義function階段，僅獲得經驗提昇等級。

▉ 主線任務：helper function - keyboard( )之物件

▍任務說明

昨天寫了「大方向：這個function做了哪些事情」，今天將要來研究他裡面的JS概念，第一個碰到的就是物件！

▍作法

function keyboard(keyCode) {
  var key = {};
  key.code = keyCode;
  key.isDown = false;
  key.isUp = true;
  key.press = undefined;
  key.release = undefined;
  //The `downHandler`
  key.downHandler = function(event) {
    if (event.keyCode === key.code) {
      if (key.isUp && key.press) key.press();
      key.isDown = true;
      key.isUp = false;
    }
    event.preventDefault();
  };

  //The `upHandler`
  key.upHandler = function(event) {
    if (event.keyCode === key.code) {
      if (key.isDown && key.release) key.release();
      key.isDown = false;
      key.isUp = true;
    }
    event.preventDefault();
  };

  //Attach event listeners
  window.addEventListener(
    "keydown", key.downHandler.bind(key), false
  );
  window.addEventListener(
    "keyup", key.upHandler.bind(key), false
  );
  return key;
}

▍分析

這裡主要是看到了這大段程式碼，決定先來研究物件：

var key = {};

key.code = keyCode;
key.isDown = false;
key.isUp = true;
key.press = undefined;
key.release = undefined;
key.downHandler = function(event){...}
key.upHandler = function(event){...}

於是就先從JS的型別開始看起。

JS內建型別
主要分成兩大類：基本型別、物件型別
（基本型別之外的值都是物件）
```
JS內建型別
        ├─基本型別（primitives）
        │    ├─string
        │    ├─number
        │    ├─boolean
        │    ├─null
        │    ├─undefined
        │    └─symbol
        └─物件型別（object）
```
也可以從規範的第六章中，可以看到規範將JS型別分成了8種（雖然是列出7點，但第6點的Numeric Types又分成Number Type以及BigInt Type）

接著把物件拆分更細，看看他是怎麼組成的。

物件>屬性>鍵值對
```
An object is a collection of properties and has a single prototype object.
The prototype may be the null value.
```
我們一樣從規範ECMA 262來看看他對於物件的解釋，從上面得知，「物件」可以儲存零到多個「屬性（property）」，而一個「屬性」包含一組「鍵值對（key-value pair）」（或稱為name-value pair）。

屬性的「鍵（key）」是一個字串型態。
屬性的「值（value）」可以為任一基本型別、一個物件或是函式。

把以上文字整理成一張圖：
物件宣告
再來是建立物件的方法，基本上有兩種：物件建構式、物件實字
- 物件建構式（Object Constructor）
  new一個Object()建立物件，再給他屬性跟方法。
```
var person = new Object();

person.name = "Hello";
person.age = 20;
person.sayHi = function(){
    console.log("Hi");
}
```
- 物件實字（Object Literal）
  最常用的方法，用{}大括號來建立物件。
```
var person = {
    name: "Hello",
    age: 20,
    sayHi: function(){
        console.log("Hi")
    }
}
```
物件屬性的存取方法
建立物件後，如果想要存取物件的屬性，基本上有兩種方法：Dot notation、Bracket notation
- 點點符號（Dot notation）
  利用點點（.）來存取物件的屬性。
```
var person = {
    name: "Hello",
    age: 20,
    sayHi: function(){
        console.log("Hi")
    }
}

person.name; //"Hello"
person.age; //20
```
- 中括號符號（Bracket notation）
  利用中括號（[ ]）來存取物件的屬性。
```
var person = {
    name: "Hello",
    age: 20,
    sayHi: function(){
        console.log("Hi")
    }
}

person["name"]; //"Hello"
person["age"]; //20
```
  中括號[ ]裡面如果放的是字串而不是變數，要記得加上引號。