javascript中的对象拷贝

js中的数据类型

在介绍javascript中的对象的拷贝之前，我先介绍一个基础的东西，javascript中的数据类型。

我们做前端的应该都知到在es6 之前，javascript中的数据类型Boolean、 Number、 String、 Undefined、Object、Null，后来在es6 中又引入了一种新的数据类型为：Symbol。而这些数据类型又被分为基本数据类型和引用数据类型，基本数据类型存储在栈中；引用数据类型存储在堆中。其中基本数据类型包括有：Boolean、Number、String、Undefined、Null以及刚刚提到的新的数据类型Symbol，引用类型包括：Object、Function、Array。我为甚么会提到Function和Array主要是因为我么在对象的深拷贝过程中需要对这两种数据类型进行特殊处理。

什么是对象的拷贝

介绍完了js中的数据类型之后，来看一下拷贝，什么是对象的拷贝，说白了就是复制，将原来的东西给复制一份。就比如说，将磁盘上的一个文件给拷贝一份，就是将磁盘中的文件给复制了一个一模一样的新的文件。就比如说下面的例子;

var a = 123;
var b = a;
var c = {name: 'zhangsan', age: 18};
var d = c;

var e = {};
for (var key in c) {
  if (c.hasOwnProperty(key)) {
    e[key] = c[key];
  }
}

对象的拷贝又被分为深拷贝和浅拷贝。

浅拷贝

就上面的代码来解释，我们看最后一个拷贝，就是我们将变量c中所有的属性然后赋值给变量e，这种情况不出问题的前提就是我们定义的对象a中的所有的成员都为基本类型，而非引用类型，一旦存在有引用类型的成员，这个时候的拷贝是将成员变量的地址赋给拷贝过去了，而，成员变量地址指向的真实的引用依旧是同一引用，因此，当指向中的引用内容发生变化时，同样会两个对象中的成员也会发生同样的改变；

比如说下面的这个例子：

var a = {
  name: 'zhangsan',
  age: 28,
  children: [1,2,3,4,5],
  son: {
    name: 'zhangsi',
    age: 1
  }
}

var shallowCopy = function (obj) {
  var newObj = {};
  for (var key in obj) {
    if (obj.hasOwnProperty(key)) {
      newObj[key] = obj[key];
    }
  }
  return newObj;
}

var b = shallowCopy(a);
console.log(a.children[0]);
console.log(a.son.name);
console.log(b.children[0]);
console.log(b.son.name);
a.children[0] = 22;
a.son.name = 'name';

console.log(b.children[0]);
console.log(b.son.name);

在上面的这个例子中，我在后面改变了a的children以及a.som.name，我们会发现这个情况下面，b相对应的内容也发生了变化。并未发生实际上的拷贝，这就是浅拷贝。

深拷贝

在了解了浅拷贝的基础上，我们再来深入的了解一下深拷贝，有些时候我们是需要进行深拷贝的，这个时候复制的就不仅仅是一个引用地址，而是一个真实的引用内容。基于这个理论，就可以在复制的过程中加入一个判断，判断所要复制的量是引用类型还是基本类型，如果是基本类型的话，就直接赋值过去，如果是引用类型的话，就需要继续对引用类型进行拷贝。

因此我们将对上面浅拷贝的代码进修改如下：

var a = {
  name: 'zhangsan',
  age: 28,
  children: [1,2,3,4,5],
  son: {
    name: 'zhangsi',
    age: 1
  }
}

var deepCopy = function(obj) {
  if (typeof obj !== 'object') return;
  var newObj = obj instanceof Array ? [] : {};
  for (var key in obj) {
      if (obj.hasOwnProperty(key)) {
          newObj[key] = typeof obj[key] === 'object' ? deepCopy(obj[key]) : obj[key];
      }
  }
  return newObj;
}

var b = deepCopy(a);
console.log(a.children[0]);
console.log(a.son.name);
console.log(b.children[0]);
console.log(b.son.name);
a.children[0] = 22;
a.son.name = 'name';

console.log(b.children[0]);
console.log(b.son.name);

我们能够看到，最后的输出和浅拷贝的输出是不一样的，输出的依旧是之前的之前的值，而不是发生变化的值。当然上面的这个深拷贝的例子还仅仅制止一个基础的，还不够完善，仅仅能够完成基本的对象拷贝。具体的实现我们可以参考的还有很多。

实现深拷贝的常用方法

• jQuery 中的实现

  在jQuery中，深浅拷贝是使用的同一个方法就是extend，这个函数的第一个参数是表示这次的拷贝是深拷贝还是浅拷贝，如果要进行深拷贝的话，则传入true，否则不传或者是传false。具体的实现内容如下：

  jQuery.extend = jQuery.fn.extend = function() {
  	var options, name, src, copy, copyIsArray, clone,
  		target = arguments[ 0 ] || {},
  		i = 1,
  		length = arguments.length,
  		deep = false;
  
  	// Handle a deep copy situation
  	if ( typeof target === "boolean" ) {
  		deep = target;
  
  		// Skip the boolean and the target
  		target = arguments[ i ] || {};
  		i++;
  	}
  
  	// Handle case when target is a string or something (possible in deep copy)
  	if ( typeof target !== "object" && typeof target !== "function" ) {
  		target = {};
  	}
  
  	// Extend jQuery itself if only one argument is passed
  	if ( i === length ) {
  		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 ) {
  				copy = options[ name ];
  
  				// Prevent Object.prototype pollution
  				// Prevent never-ending loop
  				if ( name === "__proto__" || target === copy ) {
  					continue;
  				}
  
  				// Recurse if we're merging plain objects or arrays
  				if ( deep && copy && ( jQuery.isPlainObject( copy ) ||
  					( copyIsArray = Array.isArray( copy ) ) ) ) {
  					src = target[ name ];
  
  					// Ensure proper type for the source value
  					if ( copyIsArray && !Array.isArray( src ) ) {
  						clone = [];
  					} else if ( !copyIsArray && !jQuery.isPlainObject( src ) ) {
  						clone = {};
  					} else {
  						clone = src;
  					}
  					copyIsArray = false;
  
  					// 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;
  };
  

  具体的解析变就不做过于深入的介绍，这里的思路其实就是我们上面所介绍的思路的一个优化，将各种情况都帮我们给考虑清楚了。