也说Javascript对象拷贝及疑问
一、浅拷贝
当我们需要将一个对象拷贝至另一个对象时，我们一般会这么实现
function shadowCopy(source,target){
var target=target||{};
for(var i in source)
{
target[i]=source[i];
}
return target;
}
var a={name:'Lily',age:19};
var b=shadowCopy(a);//b={name:'Lily',age:19}
浅拷贝的问题是，如果父对象的属性等于数组或另一个对象，实际上子对象获得的只是一个内存地址，而不是真正拷贝，父对象的数组或对象属性发生变化时，子对象对应属性也发生变化
function shadowCopy(source,target){
var target=target||{};
for(var i in source)
{
target[i]=source[i];
}
return target;
}
var a={name:'Lily',Hobbies:['Music','Sport']};
var b=shadowCopy(a);//b={name:'Lily',Hobbies:['Music','Sport']}
a.Hobbies.push('Read');//b={name:'Lily',Hobbies:['Music','Sport','Read']}
二、深拷贝
为了解决上述问题，需要对对象的数组和对象属性进行深拷贝。它的实现并不难，只要递归调用"浅拷贝"就行了
function deepCopy(source,target){
var target=target||{};
for(var i in source)
{
if(typeof source[i] === 'object'){
target[i] = (source[i].constructor === Array ) ? [] : {} ;
deepCopy(source[i],target[i]);
}else{
target[i]=source[i];
}
}
return target;
}
var a={name:'Lily',Hobbies:['Music','Sport']};
var b=deepCopy(a);//b={name:'Lily',Hobbies:['Music','Sport']}
a.Hobbies.push('Read');//b={name:'Lily',Hobbies:['Music','Sport','Read']},b={name:'Lily',Hobbies:['Music','Sport']}
上述代码中有一个问题，当待拷贝对象中存在自引用时，程序会陷入无限循环
var a={name:'lily'};
a.obj=a;
deepCopy(a);
在Chome Console运行时，如下提示
RangeError: Maximum call stack size exceeded
为了解决自引用问题，拷贝时加入判断逻辑
function deepCopy(source,target){
var target=target||{};
for(var i in source)
{
//防止自引用
if(source[i] === source )
continue;
if(typeof source[i] === 'object'){
target[i] = (source[i].constructor === Array ) ? [] : {} ;
deepCopy(source[i],target[i]);
}else{
target[i]=source[i];
}
}
return target;
}
var a={name:'lily'};
a.obj=a;
var b=deepCopy(a);//b={name:'lily'}
三、JQuery拷贝实现
网上有很多对JQuery extend方法的分析，有不了解的可以去搜索阅读
贴一处被分析的源码
jQuery.extend = jQuery.fn.extend = function() {
var src, copyIsArray, copy, name, options, clone,
target = arguments[0] || {},
i = 1,
length = arguments.length,
deep = false;
// Handle a deep copy situation
if ( typeof target === "boolean" ) {
deep = target;
target = arguments[1] || {};
// skip the boolean and the target
i = 2;
}
// Handle case when target is a string or something (possible in deep copy)
if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
target = {};
}
// extend jQuery itself if only one argument is passed
if ( length === i ) {
target = this;
--i;
}
for ( ; i < length; i++ ) {
// Only deal with non-null/undefined values
if ( (options = arguments[ i ]) != null ) {
// Extend the base object
for ( name in options ) {
src = target[ name ];
copy = options[ name ];
// Prevent never-ending loop
if ( target === copy ) {
continue;
}
// Recurse if we're merging plain objects or arrays
if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
if ( copyIsArray ) {
copyIsArray = false;
clone = src && jQuery.isArray(src) ? src : [];
} else {
clone = src && jQuery.isPlainObject(src) ? src : {};
}
// Never move original objects, clone them
target[ name ] = jQuery.extend( deep, clone, copy );
// Don't bring in undefined values
} else if ( copy !== undefined ) {
target[ name ] = copy;
}
}
}
}
// Return the modified object
return target;
};
四、JQuery实现疑问
在阅读上述JQuery代码时，有个地方有疑问，疑问代码如下
// Prevent never-ending loop
if ( target === copy ) {
continue;
}
注意到，在extend方法中，为了防止无限循环，这里有一个逻辑，在target对象等于copy对象时，调过这次复制操作。其中，copy对象为options对象的属性对象。
问题是，这里为什么要拿target对象与copy对象比较呢？难道不应该是比较copy对象和options对象吗？
带着这个疑问，在一个已经引入了JQuery库的页面Console中执行下
var a={name:'lily'};
a.obj=a;
var b={};
$.extend(true,b,a);
RangeError: Maximum call stack size exceeded
可以看到，当a对象中存在自引用属性时，extend方法并不能防止无限循环的发生
那么判断target === copy能起到什么作用呢？
var a={name:'lily'};
var b={age:19};
a.obj=b;
$.extend(true,b,a);
//此时b={age: 19, name: "lily"}
去掉判断target === copy会陷入无限循环吗？实际上是不会的
var a={name:'lili'};
var b={age:19};
a.obj=b;
deepCopy(true,b,a);
//b=Object {age: 19, name: "lili", obj: Object}
//其中Object为b
这里的deepCopy是我将JQuery的extend方法，去掉上述判断逻辑，自己实现了一份
function deepCopy() {
var src, copyIsArray, copy, name, options, clone,
target = arguments[0] || {},
i = 1,
length = arguments.length,
deep = false;
// Handle a deep copy situation
if ( typeof target === "boolean" ) {
deep = target;
target = arguments[1] || {};
// skip the boolean and the target
i = 2;
}
// Handle case when target is a string or something (possible in deep copy)
if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
target = {};
}
// extend jQuery itself if only one argument is passed
if ( length === i ) {
target = this;
--i;
}
for ( ; i < length; i++ ) {
// Only deal with non-null/undefined values
if ( (options = arguments[ i ]) != null ) {
// Extend the base object
for ( name in options ) {
src = target[ name ];
copy = options[ name ];
/**
// Prevent never-ending loop
if ( options === copy ) {
continue;
}
*/
// Recurse if we're merging plain objects or arrays
if ( deep && copy && ( isPlainObject(copy) || (copyIsArray =isArray(copy)) ) ) {
if ( copyIsArray ) {
copyIsArray = false;
clone = src && isArray(src) ? src : [];
} else {
clone = src && isPlainObject(src) ? src : {};
}
// Never move original objects, clone them
target[ name ] =deepCopy( deep, clone, copy );
// Don't bring in undefined values
} else if ( copy !== undefined ) {
target[ name ] = copy;
}
}
}
}
// Return the modified object
return target;
};
var isString=function(obj){
return Object.prototype.toString.call(obj) === '[object String]';
};
var isArray=function(obj){
return Object.prototype.toString.call(obj) === '[object Array]';
};
var isPlainObject=function(obj){
return Object.prototype.toString.call(obj) === '[object Object]';
}
var a={name:'lili'};
var b={age:19};
a.obj=b;
deepCopy(true,b,a);
View Code所以这里， 是JQuery extend方法的实现bug，还是我的理解有误呢？
搜到的一些对JQuery extend方法的源码分析，并没有看到这个疑问，也挺奇怪的。
