Cloning A JavaScript Object - Including Getters an

2020-03-24 11:51发布

问题:

In a project I'm working on, I'm having to clone a object to a variable.
I first tried - what seemed to be the most obvious solution - to do var obj2 = obj1, however I soon realized this makes obj2 refer to obj1, so whenever I set a property in obj2, the property is updated in obj1, too. Well, I can't have that. So, I started searching around for ways to clone a object in JavaScript - I found multiple solutions for this, mainly
var obj2 = JSON.parse(JSON.stringify(obj1)) - but that didn't keep all getters and setters I had defined for my object!
The now most obvious solution to me seems to firstly use the JSON trick above to make obj2 have all of obj1's properties, then loop through all of the objects getters and setters and add them back using Object.defineProperty(), but I have yet to find a way to get all getters/setters of an object.

回答1:

At a practical level it's impossible to 100% accurately clone an object since the getters and setters (and indeed other functions) may be accessing lexically-scoped private variables via closures. Accessing such a method will reference the original object, not the clone.

If (and only if) that's not the case, you can just enumerate over all properties (even non-enumerable ones) found via Object.getOwnPropertyNames() and then for each name simply obtain the individual PropertyDescriptors with Object.getOwnPropertyDescriptor and then pass the resulting field to Object.defineProperty, e.g.:

function shallowClone(obj) {
    var clone = Object.create(Object.getPrototypeOf(obj));

    var props = Object.getOwnPropertyNames(obj);
    props.forEach(function(key) {
        var desc = Object.getOwnPropertyDescriptor(obj, key);
        Object.defineProperty(clone, key, desc);
    });

    return clone;
}

In ES2017 you can do this instead:

function shallowClone(obj) {
    return Object.create(
        Object.getPrototypeOf(obj), 
        Object.getOwnPropertyDescriptors(obj) 
    );
}


回答2:

by @Alnitak, I thinks that is shortcut way

function shallowClone(obj){
 var clone = Object.create(Object.getPrototypeOf(obj));
 var descriptors = Object.getOwnPropertyDescriptors(obj);
 Object.defineProperties(clone, descriptors);
 return clone;
}