四種產生 JavaScript 自訂物件的方法

Published in

Aiworks

4 min readDec 9, 2019

JavaScript 是一個擁有 25 年歷史的程式語言，初期，單純只是為了強化網頁的互動效果而被創造。誰也沒料想到，在網頁應用迅速且成功的發展下，JavaScript 完全脫離了原始目的，逐漸轉變為一個全方位的通用程式語言。(General-Purpose Programming Language)

如此特殊且循序漸進的發展史，最顯著的副作用，就是 JavaScript 經常並存各種不同的程式語法，用來達成相同的目的。而這樣的語言特性，也深深的困擾著初學者。

彭彭將在本文中，試著介紹 JavaScript 在各個時期，創造物件實體的各種做法給大家認識。透過追本溯源，能有效的釐清觀念。

零、我們的目標

以下將提供四種不同的語法，都能產生出一個自訂物件 (Object)，這個物件擁有 x 和 y 兩個屬性 (Attributes)，並且擁有 show 這個方法 (Method) 用來顯示一些物件相關的資訊。

一、原始、直接的做法

基本邏輯：產生空白物件，在空白物件上逐一加入自訂的屬性和方法。

let point=new Object();
point.x=3; // 建立 x 屬性
point.y=4; // 建立 y 屬性
point.show=function(){ // 建立 show 方法
  console.log(this.x, this.y);
};

以上基本語法，還有另外一種形式如下：

let point=new Object();
point["x"]=3; // 建立 x 屬性
point["y"]=4; // 建立 y 屬性
point["show"]=function(){ // 建立 show 方法
  console.log(this.x, this.y);
};

二、使用 JSON 實字 (JSON Literal)

基本邏輯：使用 JSON 語法，直接、快速地建立自訂的物件。

let point={
  "x":3, // 建立 x 屬性
  "y":4, // 建立 y 屬性
  "show":function(){ // 建立 show 方法
    console.log(this.x, this.y);
  }
};

三、使用建構函式

基本邏輯：先設計建構函式 (Constructor)，再透過 new 關鍵字呼叫建構函式，藉此產生自訂物件。

// 設計用來產生物件的建構函式
function Point(x, y){
  this.x=x; // 建立 x 屬性
  this.y=y; // 建立 y 屬性
  this.show=function(){ // 建立 show 方法
    console.log(this.x, this.y);
  };
}
// 運用 new 呼叫建構函式，產生自訂物件實體
let point=new Point(3, 4);

四、使用類別

基本邏輯：先設計類別 (Class)，再透過 new 關鍵字呼叫類別中的建構函式，藉此產生自訂物件。

// 設計用來產生物件的類別
class Point{
  // 定義類別中的建構函式
  constructor(x, y){
    this.x=x; // 建立 x 屬性
    this.y=y; // 建立 y 屬性
  }
  // 建立 show 方法
  show(){
    console.log(this.x, this.y);
  }
}
// 運用 new 呼叫類別中的建構函式，產生自訂物件實體
let point=new Point(3, 4);

終、繼續前進吧

對許多入門者、甚至已經在工作的初階前端工程師而言，這些多變的語法，經常造成極大的困擾，可能花費了大把的精神，想從中找出絕對正確的標準答案。

然而，對於使用 JavaScript 將近十五年的人來說，這一切只是歷史的軌跡。無論哪一種語法，背後對應的物件概念是一致的。而每一種語法必然有在某個時空脈絡下，被發展出來的理由，無謂絕對的好壞。

工程師的責任在於客觀的理解基本運作邏輯後，根據實際面對的狀況，有自信的，決定什麼是當下最適當的選擇！