深拷贝与浅拷贝

在做web地图符号化的开发时候，有这么一个需求：选择一个地图符号，进入编辑界面，当编辑取消时，需要回复原来的地图符号。也就是说需要用一个变量来存储刚进入编辑界面的符号对象，在取消编辑符号的时候，将该符号对象重新拿出来给编辑的符号做还原。

最开始，我的写法是这样的：

var initSymbol={
  size:10px;
  color:{r:10,g:104,b:44};
}//原始符号

var tempSymbol=initSymbol;//记录未编辑的原始符号

initSymbol.size=14px;
initSymbol.color.r=100;//操作符号

initSymbol=tempSymbol//还原符号

结果是还原失败了，因为tempSymbol和initSymbol其实所指向的是同一个对象，所以对initSymbol进行操作编辑的同时，tempSymbol也发生相应的改变，所以原始符号并没有被存储下来。“tempSymbol=initSymbol”这里的拷贝就是浅拷贝。考虑到jquery有提供深拷贝的机制（重新构建一个对象，并将变量指向新对象）。

以下是我另一次尝试：

var initSymbol={
  size:10px;
  color:{r:10,g:104,b:44};
}//原始符号

var tempSymbol=$.extend{true,{},initSymbol};//记录未编辑的原始符号

initSymbol.size=14px;
initSymbol.color.r=100;//操作符号

initSymbol=tempSymbol//还原符号

这次由于是深层拷贝，所以完成了对符号的缓存，达到了目标。jquery的$.extend()方法可以完成深拷贝和浅拷贝，深拷贝必须将第一个参数设为true。

如果改变的符号的属性都是对象的形式，则还有另一种方式实现：

var initSymbol={
  position:{left:10,top:10}
  color:{r:10,g:104,b:44};
}//原始符号

var tempSymbol=initSymbol;//记录未编辑的原始符号

var newPosition={left:-10,top:-10};
var newColor={r:14,g:33,b:69};
initSymbol.color=newPosition;//操作符号
initSymbol.color=newColor;//操作符号

initSymbol=tempSymbol//还原符号

这里用新的对象给符号的元素对象赋值，改变了符号，却也依旧不会影响到tempSymbol的值。