javascript - 如何在保留 getter/setter 的同时浅复制 Javascript 对象？

Question

背景(为什么 Object.update() 或 jQuery.extend() 不是解决方案，以及为什么这不是其他操作方法的副本copy-a-javascript-object 问题):此版本的复制，使用 for 循环

function copy_obj(obj) {
    var copy = {};
    for (var attr in obj) if (obj.hasOwnProperty(attr)) {
        copy[attr] = obj[attr];
    }
    return copy;
}

仅复制属性的值(与 Object.update() 一样)，并且在以下对象上失败:

var myobj = {
    _fname: 'fname',
    _lname: 'lname',
    get fullname() { return this._fname + ' ' + this._lname; },
    set fullname(v) { this._fname = v; }
};

即

myobj.fullname === 'fname lname'  // true
myobj.fullname = 'Anton'
myobj.fullname === 'Anton lname'  // true

同时

var mycopy = copy_obj(myobj);
mycopy.fullname === 'fname lname'  // true
mycopy.fullname = 'Anton'
mycopy.fullname === 'Anton'  // oops!

问题:我发现我需要使用 getOwnPropertyNames/Descriptor 来获取/设置描述符，但我还没有找到任何简单的方法来确定某些东西是否只是可以直接复制的普通值 -- if 语句中的内容:

function copy_obj2(obj) {
    var mycopy = {};
    Object.getOwnPropertyNames(obj).forEach(function (prop) {
        var descriptor = Object.getOwnPropertyDescriptor(obj, prop);
        if (/* descriptor is a plain value */) {
            mycopy[prop] = obj[prop];
        } else {
            Object.defineProperty(mycopy, prop, descriptor);
        }
    });
    return mycopy;
}

(我只对复制类似对象的值感兴趣，对数组或其他基本类型不感兴趣)。

Answer 1

你不需要担心描述符的类型；无论它是数据类型描述符还是访问器类型描述符，您都可以按原样使用它来在目标对象上创建属性。

function copy_obj2(obj) {
    var mycopy = {};
    Object.getOwnPropertyNames(obj).forEach(function (prop) {
        var descriptor = Object.getOwnPropertyDescriptor(obj, prop);
        Object.defineProperty(mycopy, prop, descriptor);
    });
    return mycopy;
}

但您也可以使用 getOwnPropertyDescriptors，以及 defineProperties:

function copy_obj2(obj) {
  return Object.defineProperties({}, Object.getOwnPropertyDescriptors(obj));
}

如果您还想在克隆中包含原型(prototype)，则:

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

但是，getOwnPropertyDescriptors 在 IE 中不可用。建议使用 polyfill here .