• 克隆(深克隆)


    克隆,针对的对象是对象,数组,函数等这些复杂的数据

    浅克隆就是将栈内存中的引用复制一份,赋给一个新的变量,本质上两个指向堆内存中的同一地址,内容也相同,其中一个变化另一个内容也会变化(根本上改变的是同一个对象)。

    深克隆就是创建一个新的空对象,开辟一块内存,然后将原对象中的数据全部复制过去,完全切断两个对象间的联系。

    浅克隆:

     1 var obj={
     2         age:11,
     3         name:'xiaoming',
     4         fn:function(){
     5            console.log(this.age);
     6         },
     7         arr:[1,2,3,4]
     8     }
     9     function clone(origin,target){
    10         var target=target||{};
    11         for(var key in origin){
    12             target[key]=origin[key]
    13         }
    14     }
    15     var obj2={};
    16     clone(obj,obj2);//浅克隆
    17     console.log(obj2);
    18     obj2.arr[0]=2;
    19     console.log(obj.arr);//[2,2,3,4]
    20     console.log(obj2.arr);//[2,2,3,4]
    21     obj.age=2;
    22     console.log(obj.age);//2
    23     console.log(obj2.age);//11
    View Code

    可以明显的发现浅克隆中,当改变一个对象的原始值属性时,另一个的属性并不会发生改变,而当改变引用值属性的,由于该值指向同一个地址,因此会同时改变,这时候如果想完全切断他们的联系,我们就必须用到深克隆,也就是对于他的引用值属性进行特殊处理。

    深克隆:

     1   var obj={
     2         age:11,
     3         name:'xiaoming',
     4         fn:function(){
     5            console.log(this.age);
     6         },
     7         arr:[1,2,3,4]
     8     }
     9     function clone(origin,target){
    10         var target=target||{};
    11         for(var key in origin){
    12             target[key]=origin[key]
    13         }
    14     }
    15     function deepclone(origin,target){
    16         var target=target||{};
    17         var str=Object.prototype.toString;
    18         for(var key in origin){
    19             if(origin.hasOwnProperty(key)){
    20                 if(typeof origin[key] === 'object' && origin[key] !==null){
    21                     if(str.call(origin[key])==='[object Object]'){
    22                         // 对象值
    23                         target[key]={};
    24                     }else{
    25                         // 数组
    26                         target[key]=[];
    27                     }
    28                     deepclone(origin[key],target[key])
    29                 }else{
    30                     target[key]=origin[key];
    31                 }
    32 
    33             }
    34         }
    35     }
    36     var obj2={};
    37     deepclone(obj,obj2);
    38     obj2.arr[0]=2;
    39     console.log(obj.arr);//[1,2,3,4]
    40     console.log(obj2.arr);//[2,2,3,4]
    View Code
  • 相关阅读:
    vue , debounce 使用
    git 合并代码
    vue-snippet-模板
    旋转字符串
    给一个整数数组,找到两个数使得他们的和等于一个给定的数 target。
    水仙花数[js]
    一道笔试题(vue,react)
    OC中一些基本概念
    如何添加渐变?
    UIBarButtonItem关于全局修改,局部修改
  • 原文地址:https://www.cnblogs.com/xiaofuxuan-blogs/p/9061002.html
Copyright © 2020-2023  润新知