[javascript メモ 途中] ディープコピーとシャローコピーとは?

A.
オブジェクトを複製する際にオブジェクト内部のプロパティに参照型の値設定されている場合
参照のままコピーするのをシャローコピー(浅いコピー)といい、内部のプロパティまでコピーするのを
ディープコピー(深いコピー)といいます。

ECMAScript 5 Part 1: Reusable CodeECMAScript 5 Part 1: Reusable CodeDeep Cloning an Object
参考にディープコピーとシャローコピーを試してみます。

実際にシャローコピーとディープコピーを確認します。

// deep copy
// http://bytes.com/topic/javascript/answers/715567-deep-cloning-object
function clone_obj(obj) {
    var c = obj instanceof Array ? [] : {};
    for (var i in obj) {
        var prop = obj[i];

        if (typeof prop == 'object') {
           if (prop instanceof Array) {
               c[i] = [];

               for (var j = 0; j < prop.length; j++) {
                   if (typeof prop[j] != 'object') {
                       c[i].push(prop[j]);
                   } else {
                       c[i].push(clone_obj(prop[j]));
                   }
               }
           } else {
               c[i] = clone_obj(prop);
           }
        } else {
           c[i] = prop;
        }
    }

    return c;
}

// shallow copy
// http://www.browserwire.com/?p=33099
function naiveClone (obj) {
  var n = {};
  for (var p in obj) {
    n[p] = obj[p];
  };
  return n;
}

Object.clone = function (o) {
  var n = Object.create(Object.getPrototypeOf(o));
  var props = Object.getOwnPropertyNames(o);
  var pName;
  for (var p in props) {
    pName = props[p];
    Object.defineProperty(n, pName, Object.getOwnPropertyDescriptor(o, pName));
  };
  return n;
};

// shallow copy
var a = { name:'nic', nums:[1,2,3] };
var b = a;
var c = naiveClone(a);
var d = Object.clone(a);

// deep copy
var e = clone_obj(a);

//
a.name = 'yaki';
console.log(a.name);
console.log(b.name);
console.log(c.name);
console.log(d.name);
console.log(e.name);

//
a.nums.shift();
console.log(a.nums);
console.log(b.nums);
console.log(c.nums);
console.log(d.nums);
console.log(e.nums);
コンソールログ
js_obj_copy_1.png
ディープコピーの場合は中身を再帰的に確認し、
空のオブジェクトを作成しプロパティをループしてコピーする必要があります。