zoukankan      html  css  js  c++  java
  • javascript的浅拷贝和深拷贝

    1.浅拷贝:复制一份引用,所有引用对象都指向一份数据,并且都可以修改这份数据。

    2.深拷贝(复杂):复制变量值,对于非基本类型的变量,则递归至基本类型变量后,再复制。

    这里画一个简单的图来加深理解:

    举一个jQuery中的例子:

     1 jQuery.extend = jQuery.fn.extend = function() {//1.将extend方法扩展到JQ(函数)下边:扩展静态方法
     2     //2. jQuery.fn.extend 把extend扩展到jq.fn下 且jQuery.fn = jQuery.prototype  扩展实例方法
     3     // 1.2.功能相似
     4     var options, name, src, copy, copyIsArray, clone, //定义一些变量
     5         target = arguments[0] || {}, 
     6         //目标元素是【0】第一个元素$.extend( a , { name : 'hello' } , { age : 30 } );
     7         i = 1, //第一个元素的位置
     8         length = arguments.length,//第一个个对象的元素
     9         deep = false; //是否是深拷贝  默认 false不是
    10 
    11     // Handle a deep copy situation 看是不是深拷贝情况
    12     if ( typeof target === "boolean" ) { //是布尔值 
    13         deep = target;
    14         target = arguments[1] || {}; //目标元素是第二个$.extend( true , a , b )
    15         // skip the boolean and the target
    16         i = 2;
    17     }
    18 
    19     // Handle case when target is a string or something (possible in deep copy)  看参数正确不
    20     if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
    21         // 当目标不是对象或者不是函数的时候
    22         target = {}; //变成一个空的jason
    23     }
    24 
    25     // extend jQuery itself if only one argument is passed看是不是插件情况
    26     if ( length === i ) { //只写了一个对象 要把这个对象扩展到jq源码上 静态方法 或者是实例方法
    27         target = this; //this 是$ 或者 $();
    28         --i;
    29     }
    30 // 可能有多个对象情况
    31     for ( ; i < length; i++ ) {
    32         // Only deal with non-null/undefined values
    33         if ( (options = arguments[ i ]) != null ) {//看后边的对象是否都有值
    34             // Extend the base object
    35             for ( name in options ) {
    36                 src = target[ name ];
    37                 copy = options[ name ];
    38 
    39                 // Prevent never-ending loop
    40                 if ( target === copy ) {//防止循环引用 
    41                     continue;//跳出本次循环继续执行
    42                     // $.extend( a , { name : a } ) );循环引用 a也是一个对象
    43                 }
    44 
    45                 // Recurse if we're merging plain objects or arrays深拷贝
    46                 if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
    47                     // 是深拷贝 且需有var b = {  name : { age : 30 } }; 且b必须是对象自变量(jason) 或者是个数组
    48                     
    49                     //递归
    50                     if ( copyIsArray ) { //数组
    51                         copyIsArray = false;
    52                         clone = src && jQuery.isArray(src) ? src : []; //定义一个空数组
    53 
    54                     } else {//jason
    55                         clone = src && jQuery.isPlainObject(src) ? src : {};//看原有的属性有没有且是不是jason定义一个空jason
    56                     }
    57                     // var a = { name : { job : 'it' } }; 看有没有原有的属性 有的话在原有的上边添加
    58                     // var b = { name : {age : 30} };
    59                     // $.extend( true , a  , b );//a继承b
    60                     // console.log( a ); a{ name:{ job : 'it' ,age : 30}} 如果只有一个{} 则只有,age : 30
    61                     // Never move original objects, clone(a) them
    62                     target[ name ] = jQuery.extend( deep, clone, copy );  
    63                     //调用函数本身进行进一步的递归处理 
    64 
    65                 // Don't bring in undefined values浅拷贝
    66                 } else if ( copy !== undefined ) {
    67                     target[ name ] = copy; //直接复制因为里边没有对象
    68                 }
    69             }
    70         }
    71     }
    72 
    73     // Return the modified object
    74     return target;
    75 };
  • 相关阅读:
    根据现有文件生成图形化的目录树
    一个最简的短信验证码倒计时例子
    将指定目录下的所有资源整体迁移到另一个目录下
    通过 url 获取相应的 location 信息
    node-glob的*匹配
    mysql将查询出来的一列数据拼装成一个字符串
    Call to undefined function mysql_connect()错误原因
    JavaScript转unix时间戳
    .net3.0 中跨线程访问控件
    WPF的线程模型
  • 原文地址:https://www.cnblogs.com/tine/p/5754803.html
Copyright © 2011-2022 走看看