How to Properly Clone a JavaScript Object?

How to Accurately Clone a JavaScript Object

Duplicating an object in JavaScript is essential for maintaining data integrity and preventing unexpected modifications. However, creating a simple copy of an object can inadvertently introduce unintended changes. Here's a comprehensive guide to ensuring a successful object clone in JavaScript:

Structured Cloning (Modern Solution):

For the latest browsers, structured cloning (introduced in ES2020) offers a straightforward and reliable solution:

const clone = structuredClone(object);

This method generates an accurate copy of the object, including all its properties, without any unwanted extras.

Traditional Approach:

For earlier browser versions, cloning an object requires a more involved process:

Avoid Shortcuts:

Copying objects derived from built-in JavaScript objects can lead to additional properties being introduced. To prevent this, clone only literal-constructed objects.

Handle Prototype Inheritance:

New objects typically inherit properties from their prototype. To mimic this behavior, you must manually transfer inherited properties to the cloned object.

Filter out Non-Local Attributes:

Non-enumerable properties are not inherited by default. Use the hasOwnProperty method to filter out such attributes from the prototype.

Consider Hidden Properties:

Certain objects have hidden properties, such as prototype and __proto__, that are not accessible through enumeration. These properties must be handled individually.

Deal with Date Objects:

Date objects have a hidden data property that contains the date value. To retain the same date, call setTime on the cloned Date object. Note that this approach is specific to Date objects.

Complex Data Types:

If your object contains complex data types like arrays or other objects, these must also be cloned recursively to ensure a complete copy.

Cloning Function:

Here's a comprehensive cloning function that follows these principles:

function clone(obj) {
    if (null == obj || "object" != typeof obj) return obj;
    var copy = obj.constructor();
    for (var attr in obj) {
        if (obj.hasOwnProperty(attr)) copy[attr] = clone(obj[attr]);
    }
    return copy;
}

Limitations:

It's important to note that this function assumes a limited set of data types and does not handle cyclical references or objects with hidden properties beyond those mentioned.

The above is the detailed content of How to Properly Clone a JavaScript Object?. For more information, please follow other related articles on the PHP Chinese website!