JavaScript 克隆(根据数据类型的不同选择克隆方式)

克隆

在JavaScript如何把一个对象的属性和方法完完整整的搬过来到另一个空对象身上,对于继承的使用方法不能完成上述操作,所以我们开始另一种方法—-克隆。

  • 在Javascript里,如果克隆对象是基本类型,我们直接赋值就可以了:
<script type = "text/javascript"> 
    var sStr = "abc";
    var cStr = sStr;
    alert(cStr);    //输出abc
    sStr = "cba";
    alert(cStr);    //输出abc;
把一个值赋给另一个变量时,当那个变量的值改变的时候,另一个值不会受到影响。
</script>
  • 如果不是基本类型,那就有所有不同了:
<script type = "text/javascript"> 
    var aArr = [0,1,2];
    var m = aArrr;
    alert(m);   //输出0,1,2
    aArr=[2,1,0];
           alert(m);   //输出2,1,0;这个值改变了,因为m只是aArr的一个引用,如果aArr的值改变了,那么m也会相应的改变。
</script>

这并不是克隆对象,m和aArr是同一个对象,
他俩指向同一个内存地址空间,拿到了同样的一个小房子。

克隆分为:浅层克隆和深度克隆。

浅层克隆

<script type = "text/javascript"> 
    function alone(Origin,Target){
        var Target = Target || {};              //如果target为undefined或没传参,设置空对象
    for(var prop in Origin){
    Target[prop] = Origin[prop];
    }
    return Target;
    }
</script>

浅层克隆运用对象遍历的方法把一个对象的属性和方法克隆过来,对于基本类型没有问题,但是对于引用类型会存在问题,造成一方改变另一方也会改变,所以我们探究深度克隆。

深度克隆

深度克隆运用了递归,代码思路:

1.遍历对象      for(var prop in obj)   用hasOwnProperty()方法判断属性和方法是对象本身还是原型中的

2.首先判断是不是原始值      typeof() object

3.判断是数组还是对象        instanceof toString constructor

4.建立相应的新的数组或对象   

5.看数组里的或对象里的内容是不是原始值(然后重复2-5步)--递归
<script type = "text/javascript"> 

function deepAlone(Origin,Target){
    var Target = Target || {};                                                  
    var toStr = Object.prototype.toString;               //定义变量 方便书写
    var arrStr = '[object Array]';                       //定义字符串 用于比较是否为数组
    for(var prop in Origin){                             // 原对象遍历
         if(Origin.hasOwnProperty(prop)){                //判断属性和方法是原型的还是对象自身的
               if(Origin[prop] !== 'null' && typeof(Origin[prop]) == 'object'){
               //判断是否为引用值
                    Target[prop] = toStr.call(Origin[prop]) == arrStr ? [] : {};  //三目运算符判断是否为数组 是:定义数组 否:定义对象
                    deepAlone(Origin[prop],Target[prop]);  //递归
               }
               else{
                   Target[prop] = Origin[prop];            //递归终止条件
               }
         }
    }
    return Targin;                                      //返回克隆好的对象。
}
</script>

ps:
三木运算符:
//条件判断?是:否 并且会返回值
var num 1 > 0 ? (“10” > “9” ? 1 : 0) : 2;
//先算括号里面的,字符串比第一位,返回0
结果:num 0

发布了49 篇原创文章 · 获赞 30 · 访问量 3万+

猜你喜欢

转载自blog.csdn.net/Reagan_/article/details/81327088