对原始值的操作会影响所有引用，而这不一定是我们想要的，有时候我们需要复制一个全新的对象，操作的时候不影响其他引用。而一般情况也，像 Date / Function / RegExp … 都很少有具体的操作，主要是像 Array 和 Object 会有添加项、属性等操作。所以我们主要需要理解的是如何复制 Array 和 Object 对象。
3.1 数组的复制
在 Array 对象中，存在 slice 方法返回一个截取的数组，在 ES5 中 filter 等也返回一个新的数组，那么我们可能利用这个方法来进行复制。
复制代码 代码如下:
var arr = [1, 2, 3];
var sofish = arr.slice();
// 对新的数组进行操作并不会影响到原始数组
sofish.push('hello world');
console.log(arr); // [1, 2, 3]
3.2 对象的复制
在 Array 的复制中我们使用的是 slice 方法，实际上对于 Array 和 Object 中都可以利用 for ... in 循环来进行遍历并赋值来进行复制。
复制代码 代码如下:
var obj = { name: 'sofish' }, sofish = {}, p;
for (p in obj) sofish[p] = obj[p];
// 对新的对象操作并不会影响原始值
sofish.say = function() {};
console.log(obj); // { name: 'sofish' }
3.3 Shadow / Deep Copy
像上面的操作，就是我们常说的浅拷贝（Shadow Copy）。不过在 Array 和 Object 都可以有多层（维），像这样的拷贝只考虑到最上面一层的值，在可能存在的值中的 Array 和 Object 都还是指向了原始对象。比如：
复制代码 代码如下:
var arr = [1, { bio: 'not a fish' } ], sofish = [], p;
for(p in arr) {
sofish[p] = arr[p];
}
// 对 `sofish` 中包含的对象 `cat` 的操作会影响原始值
sofish[1].bio = 'hackable';
console.log(arr);// [1, cat: { bio: 'hackable' } ]
那么如何做呢？来一个 copy() 函数解决这个问题：
复制代码 代码如下:
/* 复制对象
* @param: obj {JavaScript Object} 原始对象
* @param: isDeep {Boolean} 是否为深拷贝
* @return: {JavaScript Object} 返回一个新的对象
*/
function copy(obj, isDeep) {
var ret = obj.slice ? [] : {}, p, prop;
// 配合 is 函数使用
if(!isDeep && is(obj, 'Array')) return obj.slice();
for(p in obj) {
if(!obj.hasOwnProperty(p)) continue;
prop = obj[p];
ret[p] = (is(prop, 'Object') || is(prop, 'Array')) ?
copy(prop, isDeep) : prop;
}
return ret;
}
这样，我们就可以通过 copy(obj, isDeep) 函数来复制一个 Array 或者 Object 。可以测试一下：
复制代码 代码如下:
var arr = [1, {bio: 'not a fish'}];
var sofish = copy(arr);
// 浅拷贝对于第一层的操作不影响原始值，但影响第二层
sofish.push('cat');
console.log(arr); // [1, {bio: 'not a fish'}]
sofish[1].bio = 'hello world';
console.log(arr) // [1, {bio: 'hello world'}]
// 深拷贝则不会影响原始值
sofish = copy(arr, 1);
sofish[1].bio = 'foo or bar';
console.log(arr); // [1, {bio: 'hello world'}]
到此。你基本上要了解的关于类型的比较难的点，应该是都基本了解了。当然，复制是最麻烦的一个点，除了经常需要操作的 Array 和 Object 来说，还有 Date / Function / RegExp 的复制。
您可能感兴趣的文章: