JavaScript] - How to create Object in JavaScript

物件是 JavaScript 中的核心概念，上篇有提及 new，今天來點如何建立物件吧！

JavaScript 的基本型別

在之前的篇章中都未提及過的基本型別，在說明建立物件之前，來簡單說明一下：

數字（Number）： 用於表示數值。可以是整數或浮點數。例如：42、3.14159。
字串（String）： 用於表示文本。字串必須包含在單引號（'）或雙引號（"）之間。例如：'Hello, World!'。
布林（Boolean）： 用於表示邏輯值，只有兩個可能的值：true 和false。
未定義（Undefined）： 表示變數已宣告但尚未賦值的狀態。宣告一個變數但未初始化時，其值為 undefined。
空（Null）： 表示變數的值為空或不存在。通常是在明確指示變數不包含任何有效值時使用。
符號（Symbol，ES6引入）： 一種唯一且不可變的數據類型，通常用於定義對象的唯一屬性名稱。

除了以上這些基本型別以外的類型，都是物件～接著，我們來看看要如何建立物件吧！

JavaScript 如何建立物件？

Object Literals（物件實字）： 最簡單的方式是使用花括號 {} 來建立物件，並在其中指定屬性和屬性值。
```
const person = {
    name: 'Viii',
    age: 18
};
```

Constructor（建構式）： 使用建構式來創建多個具有相似結構的物件。建構式通常以大寫字母開頭，並使用 new 關鍵字來創建物件。

function Person(name, age) {
    this.name = name;
    this.age = age;
}

const person1 = new Person('Viii', 18);
const person2 = new Person('Bob', 25);

如果忘記使用 new 關鍵字...：

function Person(name) {
  this.name = name;
}

// 不使用 new 關鍵字
const person3 = Person('Jay');
console.log(person3); // undefined，因為函數內的 this 參考全域物件，未返回新的物件
console.log(name); // 'Jay'，name 屬性被設置為全域變數

Object.create() 方法：

先創建一個名為 Person 的物件，該物件包含 firstName、lastName 屬性和一個 getFullName 方法。
```
const Person = {
  firstName: 'Default',
  lastName: 'Default',
  getFullName: function () {
    return this.firstName + " " + this.lastName;
  }
};
```
接著使用 Object.create() 方法創建新的物件並基於 Person 物件來繼承他的屬性和方法：
```
const viii = Object.create(Person);
viii.firstName = 'Viii';
viii.lastName = 'Chang';

console.log(viii.getFullName()); // 輸出：'Viii Chang'
```
使用 Object.create(Person) 基於 Person 物件創建了一個名為 viii 的新物件，然後設置了 firstName 和 lastName 屬性的值。最後，我們調用 viii.getFullName() 以獲取完整名字。由於 viii 物件繼承了 getFullName 方法，所以返回完整的名字。

而關於繼承，在 JavaScript 中，物件之間的繼承是通過原型鏈（prototype chain）實現的，這部分將在下篇整理～

關於屬性描述器

當使用 Object.create() 創建了一個新物件，可以在建立新物件時，使用屬性描述器來設定屬性的各種特性，藉由在第二個參數中傳遞一個屬性描述器，便可以在建立新物件時直接給予預設值：
```
const Person = {
  firstName: 'Default',
  lastName: 'Default',
  getFullName: function () {
    return this.firstName + " " + this.lastName;
  }
};

// 創建一個新物件，繼承自 Person，並設定屬性描述器
const viii = Object.create(Person, {
  firstName: {
    value: 'Viii',
    writable: true, // 該屬性是否可寫入
    configurable: true // 該屬性是否可配置
  }
});

console.log(viii.firstName); // 輸出：'Viii'
```
屬性描述器可分為六種：
- value：屬性的值，這裡設定為 'Viii'。
- writable：指示屬性是否可寫入，這裡設定為 true，表示可以修改該屬性的值。
- enumerable：指示屬性是否可透過 for...in 迴圈中迭代列舉。
- configurable：指示屬性是否可配置，這裡設定為 true，表示該屬性的描述器可以被修改。
- get： getter function。
- set： setter function。
除了上面的方式，我們也可以透過 Object.defineProperty() 方法！ Object.defineProperty() 方法是 JavaScript 中用來定義或修改物件屬性的方法，並且可以設置屬性的特性，包括 get 和 set 存取器函數。
```
Object.defineProperty(obj, prop, descriptor);
```
- obj：要定義或修改屬性的目標物件。
- prop：要定義或修改的屬性名稱。
- descriptor：一個屬性描述器對象，用來指定屬性的特性，包括 value、writable、enumerable、configurable、get 和 set。
現在讓我們看一個具體的例子：
```
const person = {};

// 使用 Object.defineProperty 定義一個名為 "fullName" 的計算屬性
Object.defineProperty(person, 'fullName', {
  // 定義 getter
  get: function() {
    return this.firstName + ' ' + this.lastName;
  },

  // 定義 setter
  set: function(fullName) {
    const names = fullName.split(' ');
    this.firstName = names[0];
    this.lastName = names[1];
  },

  // 設置 enumerable 特性為 true，使屬性可列舉
  enumerable: true,

  // 設置 configurable 特性為 true，使屬性可配置
  configurable: true
});

person.firstName = 'Viii';
person.lastName = 'Chang';

console.log(person.fullName); // 輸出：'Viii Chang'

// 使用 setter 設置 fullName
person.fullName = 'Jay Lin';

console.log(person.firstName); // 輸出：'Jay'
console.log(person.lastName); // 輸出：'Lin'
```
使用 Object.defineProperty() 定義了一個計算屬性 fullName，並為它指定了 get 和 set 存取器函數。get 存取器返回 firstName 和 lastName 的結合，而 set 存取器接受一個完整名字，並將其拆分為 firstName 和 lastName。

透過這些內容，了解到 Object Literals（物件實字）來快速建立物件，或者使用 Constructor（建構式）來建立具有相似結構的多個物件。此外，Object.create() 方法允許我們基於現有物件來創建新的物件，並繼承屬性和方法。還可以使用 Object.defineProperty() 方法來定義或修改物件的屬性，並為這些屬性指定各種特性，包括 get 和 set 存取器函數。

JavaScript 的基本型別

JavaScript 如何建立物件？

關於屬性描述器