如何完美克隆JavaScript物件？

如何精確複製 JavaScript 物件

JavaScript 的內建方法無法保證物件的精確複製。這是由於原型派生屬性和隱藏屬性的存在，這可能會導致克隆時出現不可預見的結果。為了解決這個問題，人們開發了各種方法。

2022 更新：結構化複製

名為結構化複製的新 JS 標準提供了一個簡單的解決方案。它受到許多現代瀏覽器的支持，並允許使用以下語法進行精確複製：

const clone = structuredClone(object);

傳統方法

在先前版本的JavaScript 中，自訂克隆函數可以透過以下步驟實現：

1. 處理不可枚舉屬性：使用hasOwnProperty方法跳過原型屬性並專注於直接在物件上定義的屬性。
2. 複製不可枚舉屬性：如果名稱已知，則明確複製隱藏屬性，例如prototype或__proto__。
3. 配置原型繼承：確保複製的物件的原型與原始物件的原型相符。這可能需要手動設定或呼叫來源物件的建構函式。
4. 處理不可枚舉資料結構：對於具有不可列舉成員的資料結構，例如 Date 對象，需要進行特定處理。
5. 處理循環結構：透過追蹤存取的物件並共享引用而不是深度來避免無限遞歸克隆。

下面提供了解決這些挑戰的克隆函數範例：

function clone(obj) {
    if (null == obj || "object" != typeof obj) return obj;

    // Handing different object types
    // ... implementation for Date, Array, and Object

    // Generic fallback: deep copy properties
    var copy = {};
    for (var attr in obj) {
        if (obj.hasOwnProperty(attr)) copy[attr] = clone(obj[attr]);
    }
    return copy;
}

該函數假設物件形成樹結構並且不包含任何循環參考。處理循環結構需要更複雜的方法。

以上是如何完美克隆JavaScript物件？的詳細內容。更多資訊請關注PHP中文網其他相關文章！