面试题：jQuery 的属性拷贝(extend)的实现原理是什么，如何实现深拷贝？

╰+攻爆jí腚メ 2021-11-04 17:58 160阅读 0赞

### 一、jQuery.extend() 函数用于将一个或多个对象的内容合并到目标对象。 ###

## **语法** ##

*$*.extend( target \[, object1 \] \[, objectN \] )

指示是否深度合并

*$*.extend( \[deep \], target, object1 \[, objectN \] )

**警告: **不支持第一个参数传递 false 。

<table style="margin-left:3.15pt;"> 
 <tbody> 
 <tr> 
 <td style="width:168.65pt;"> 参数 </td> 
 <td style="width:456.05pt;"> 描述 </td> 
 </tr> 
 <tr> 
 <td style="width:168.65pt;"> deep </td> 
 <td style="width:456.05pt;"> 可选。 Boolean类型 指示是否深度合并对象，默认为false。如果该值为true，且多个对象的某个同名属性也都是对象，则该"属性对象"的属性也将进行合并。 </td> 
 </tr> 
 <tr> 
 <td style="width:168.65pt;"> target </td> 
 <td style="width:456.05pt;"> Object类型 目标对象，其他对象的成员属性将被附加到该对象上。 </td> 
 </tr> 
 <tr> 
 <td style="width:168.65pt;"> object1 </td> 
 <td style="width:456.05pt;"> 可选。 Object类型 第一个被合并的对象。 </td> 
 </tr> 
 <tr> 
 <td style="width:168.65pt;"> objectN </td> 
 <td style="width:456.05pt;"> 可选。 Object类型 第N个被合并的对象。 </td> 
 </tr> 
 </tbody> 
</table>

### 二、深拷贝代码（把extend函数的第一个参数设置为true）： ###

控制台打印结果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nNzcwMTAzNw_size_16_color_FFFFFF_t_70][]

### 三、浅拷贝代码（extend函数里不传入第一个参数，默认为false）： ###

//二、浅拷贝的方式（extend函数里不传入第一个参数，默认为false）,把p的属性合并到jQuery（$）上，但是共享引用类型的属性wife和address
    
    var p = {
    	"id":"007",
    	"name":"刘德华",
    	"wife":{
    		"id":"008",
    		"name":"刘德的妻子",
    		"address":{
    			"city":"北京",
    			"area":"海淀区"
    		}
    	}
    }
    $.extend($,p);//或者 $.extend(p);
    
    p.wife.name="张三疯";
    p.wife.address.city="香港";
    
    console.log($.id);
    console.log($.wife.name);
    console.log($.wife.address.city);
    
    console.log(p);

控制台结果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nNzcwMTAzNw_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nNzcwMTAzNw_size_16_color_FFFFFF_t_70]: /images/20211104/a4f3daefa93048348bd2959ac26141a9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nNzcwMTAzNw_size_16_color_FFFFFF_t_70 1]: /images/20211104/a9c7fb5974c041498902de58446f7316.png