E2ac7a4404a06cd7dcaffc840962667a
Javascript中的克隆(拷贝)问题

克隆(也就是拷贝)是javascript中很重要也很常见的问题。克隆就是将一个对象里的属性、方法等复制到另一个对象中,且互不影响(即克隆之后,对一个对象进行改动,不会影响到另一对象)。我们今天就来讨论一下原生js中克隆的问题。

action~

现在有一个对象

  • var obj = {
  • name: '隔壁老王',
  • age: 60,
  • sex: 'male'
  • }

我们现在想把obj里的每一个属性拷贝到一个空对象var obj1 = {}中,那么需要写一个克隆方法,首先遍历一下obj对象,然后把里面的每一个属性都拷贝过去。代码如下:

  • var obj = {
  • name: '隔壁老王',
  • age: 60,
  • sex: 'male'
  • };
  • var obj1 = {};
  • function clone(origin, target) {
  • for (var prop in origin) {
  • target[prop] = origin[prop];
  • }
  • };
  • clone(obj, obj1);

在控制台中查看obj1,会发现实现了对obj的拷贝。

我们再对这个方法进行一些完善:有可能用户在执行clone方法时,只传origin一个参数,然后将函数执行结果赋给对象obj1,所以我们需要在方法最下方加一个返回值target,返回克隆结果,相应的也要在函数体里声明var target = {};

还有一种情况obj1对象里事先有其他属性,那么函数体里写var target = {};显然是不符合预期的,所以要完善成var target = target || {};确保万无一失。最终该方法完善为:

  • function clone(origin, target) {
  • var target = target || {};
  • for (var prop in origin) {
  • target[prop] = origin[prop];
  • }
  • return target;
  • }

下面对obj进行拷贝,且obj1本身有自己的属性,执行代码如下:

  • var obj = {
  • name: '隔壁老王',
  • age: 60,
  • sex: 'male'
  • };
  • var obj1 = {
  • father: '老王'
  • };
  • function clone(origin, target) {
  • var target = target || {};
  • for (var prop in origin) {
  • target[prop] = origin[prop];
  • }
  • return target;
  • }
  • clone(obj, obj1);

查看一下拷贝结果

完美拷贝了obj的所有属性,又保留了自身属性。

到这就结束了么?要知道js有六大数据类型(本文不讨论ES6新增的Symbol类型):number,string,boolean,undefined,null,object。

其中number,string,boolean,undefined,null归为原始值一类,而object属于引用值,具体包括狭义的object,array,function。

下面往obj对象里加点引用值,用我们已经写出来的克隆方法试试:
``` javascript
var obj = {

  • name: '隔壁老王',
  • age: 60,
  • sex: 'male',
  • card: ['信用卡', '借记卡', '理发卡'],
  • wife: {
  • name: '小刘'
  • },
  • divorce: function () { }

};

var obj1 = {

  • father: '老王'

};

function clone(origin, target) {
var target = target || {};
for (var prop in origin) {
target[prop] = origin[prop];
}
return target;
}

clone(obj, obj1);

top Created with Sketch.