深入了解 JavaScript 的 Object.create() 方法

更新日期： 2024 年 11 月 4 日

Object.create() 是 JavaScript 中創建物件的強大工具，但許多開發人員在使用過程中，可能並不完全理解它的用途與優勢。

本文將詳細介紹 Object.create() 方法的用法及其應用情境，幫助你掌握這個工具的精髓。

Object.create() 方法的基本概念

Object.create() 是 JavaScript 提供的內建方法，用於創建一個新物件，並指定該物件的原型（prototype）。

這意味著透過 Object.create()，我們可以在新物件上指定繼承的原型，甚至設定新物件的屬性。

語法

Object.create(proto, [propertiesObject])

• proto：要作為新物件原型的物件。
• propertiesObject：可選，用於定義新物件的額外屬性。這些屬性描述符的格式與 Object.defineProperties() 相同。

為何選擇 Object.create()？

在 JavaScript 中，常見的物件創建方式包括直接使用物件字面量（例如 {}）或建構函數（例如 new 關鍵字）。

然而，Object.create() 提供了更靈活的物件繼承方式，讓我們可以明確地指定原型，而不必依賴建構函數的繼承鏈。

此外，這也能幫助減少物件的複製成本，實現更精細的屬性控制。

原型打造：利用 Object.create() 構建可擴展的基礎物件

在 JavaScript 中，原型是一個基礎的概念，允許物件共享屬性與方法。

透過 Object.create()，我們可以簡單地「打造」出新的原型，以便進行更多物件的擴展。

範例：打造基本的原型模板

假設我們要創建一組具有通用方法的基本物件，我們可以先定義一個基礎原型 vehicle，並在此基礎上打造其他具體的物件：

const vehicle = {
  start() {
    console.log("Vehicle started");
  },
  stop() {
    console.log("Vehicle stopped");
  }
};

// 創建新的物件，並繼承 `vehicle` 原型
const car = Object.create(vehicle);
car.drive = function() {
  console.log("Car is driving");
};

// 使用 `car` 的方法
car.start(); // 輸出：Vehicle started
car.drive(); // 輸出：Car is driving
car.stop();  // 輸出：Vehicle stopped

在這個範例中，car 繼承了 vehicle 的所有方法，同時增加了專屬於 car 的新方法 drive。

這種方法稱為「原型打造」，可以快速地建立不同物件的基礎架構，且各個物件之間能共享通用方法而不重複定義。

使用範例：從現有物件創建新物件

假設我們有一個物件 person，包含一些基本的屬性和方法，我們可以透過 Object.create() 來創建一個繼承 person 的新物件：

const person = {
  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

const student = Object.create(person);
student.name = 'John';
student.greet(); // 輸出：Hello, my name is John

在此範例中，student 繼承了 person 的 greet 方法，並可以藉此呼叫該方法。

設定屬性：使用第二個參數

Object.create() 的第二個參數允許我們在新物件上定義屬性，這些屬性可以具有特定的描述符（例如 writable、enumerable、configurable）。

範例：設定屬性描述符

const teacher = Object.create(person, {
  name: {
    value: 'Mrs. Smith',
    writable: false,
    enumerable: true
  },
  subject: {
    value: 'Math',
    writable: true,
    enumerable: true
  }
});

console.log(teacher.name); // 輸出：Mrs. Smith
teacher.name = 'Mr. Doe'; // 無法更改，因為 `name` 屬性是不可寫的
console.log(teacher.subject); // 輸出：Math

在此範例中，teacher 的 name 屬性是不可寫的，因此嘗試重新賦值將不會生效，而 subject 屬性則可以更改。

應用場景：原型繼承與物件擴展

實現簡單的原型繼承

Object.create() 使得 JavaScript 的原型繼承更加直觀，特別是在建構函數模式過於複雜時。

我們可以利用 Object.create() 快速實現物件之間的繼承。

創建空物件並避免污染

我們可以使用 Object.create(null) 創建一個「純粹」的空物件，這個物件不會繼承自 Object.prototype，因此它沒有任何預設方法或屬性（如 toString 或 hasOwnProperty），適合用於資料儲存的情境。

const dictionary = Object.create(null);
dictionary.apple = 'A fruit';
console.log(dictionary); // 輸出：{ apple: 'A fruit' }

結論：為什麼選擇 Object.create()？

Object.create() 提供了一種靈活而強大的方式來創建物件並指定其原型。

無論是進行簡單的物件繼承，還是創建無原型的純淨物件，Object.create() 都能滿足需求。

透過正確理解並使用此方法，你將能在 JavaScript 中更有效地管理和繼承物件屬性。