定義一個物件(Class)

我們在實務上開發應用程式的時候, 免不了需要使用物件導向設計(Object-oriented programming)去開發應用系統. 物件(Class)類別型態可能包含資料, 屬性(property), 事件(event)與方法(method).

但Javascript 沒有提供class 這種關鍵字, 所以是用"模擬" 的方式去模擬物件(Class). 怎麼說呢?

Javascript 世界裡所有的東西都是object, 變數可以是任何資料型別, 故它的資料結構跟Hashtable 非常相近, 是索引鍵和值配對(Name-Value Pair)的集合.

就連Javascript function 的定義也是一種object , 而Javascript 模擬物件(Class)的方式很巧妙.

首先看看Javascript 如何定義一個Person Class

function Person() {
   this.name = "flash";
   this.age = 50;
   return this;
}

呼叫下面程式碼, 即可建立 player 物件, 並且在控制台輸出這個 player.name 字串

var player = new Person();
console.log(player.name);

還有另一個建立 Person Class 版本

function createPerson() {
   var obj = {};
   obj.name = "flash";
   obj.age = 50;
   return obj;
}

var player = createPerson();
console.log(player.name);

還有另外建立物件的方法

function createPerson() {
   var obj = {
      name: "flash",
      age: 50  
   };
   return obj;
}

甚至也有這種寫法

function createPerson() {
   var obj = new Object();
   obj.name = "flash";
   obj.age = 50;
}

有些人偏好用function 模擬建立物件, 有人偏好建立{} object, 或是建立Object 去模擬物件.

光是建立Class 就有好幾種方法....

簡單就是美

我只是好好想要簡單地定義一個物件(Class) , 幸好Typescript 提供了類似C# 的物件定義方式, 讓你輕鬆地定義描述物件的型態.

以下是用Typescript 定義之前的Person 物件(Class) 的方式

class Person {
   name: string = "flash";
   age: number = 50;
}

在VSCode 編輯好上述程式碼之後, 存到 Demo.ts 檔案. 並在Terminal 視窗, 輸入以下指令

node .\node_modules\typescript\bin\tsc .\Demo.ts

它將編譯 Demo.ts 檔案並產生 Demo.js 檔案.

tsc 是一個Typescript Compiler 程式, 就像C# 的csc (C# Compiler 程式)一樣, 它分析 .ts 檔案語法有沒有錯誤, 並且編譯為 .js 檔案(C# 則是編譯為 .dll 檔案)

上述編譯 .ts 指令很長, 我們可以在 package.json 檔案中加上以下內容

"scripts": {
   "demo": "node ./node_modules/typescript/bin/tsc ./Demo.ts"
},

以後我們就可以輸入以下指令取代上面超長的指令

yarn demo 

打開Typescript 幫你產生好的Demo.js 檔案, 我們來觀察Demo.js 內容

var Person = /** @class */ (function () {
    function Person() {
        this.name = "flash";
        this.age = 50;
    }
    return Person;
}());

由此可知Typescript 是用function 方式去模擬物件(Class).

在Demo.ts 中, 我們補上greeter 方法

class Person {
   name: string = "flash";
   age: number = 50;
   greeter() : string {
      return "Hello " + this.name;
   }
}

再次在Terminal 視窗輸入yarn build 觀察產生的 .js 檔案.

你會發現多了下面程式碼片段

Person.prototype.greeter = function () {
   return "Hello " + this.name;
};

幾乎所有 Javascript 世界裡都是Object. 每一種Object 都有Prototype 定義, 所以function 也是被儲存為Object , 故function 也有 Prototype 定義.

故在Javascript 中最正統標準(也最清楚)的定義物件的作法就是用 function 加上 prototype 去定義物件(Class).