面试题:jQuery 的属性拷贝(extend)的实现原理是什么,如何实现深拷贝?

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

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

语法

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

指示是否深度合并

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

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
























参数

描述

deep

可选。 Boolean类型 指示是否深度合并对象,默认为false。如果该值为true,且多个对象的某个同名属性也都是对象,则该”属性对象”的属性也将进行合并。

target

Object类型 目标对象,其他对象的成员属性将被附加到该对象上。

object1

可选。 Object类型 第一个被合并的对象。

objectN

可选。 Object类型 第N个被合并的对象。

二、深拷贝代码(把extend函数的第一个参数设置为true):

  1. var p = {
  2. "id":"007",
  3. "name":"刘德华",
  4. "wife":{
  5. "id":"008",
  6. "name":"刘德的妻子",
  7. "address":{
  8. "city":"北京",
  9. "area":"海淀区"
  10. }
  11. }
  12. }
  13. //深度拷贝的方式(把extend函数的第一个参数设置为true),把p的属性合并到jQuery($)上
  14. $.extend(true,$,p);
  15. p.wife.name="张三疯";
  16. p.wife.address.city="香港";
  17. console.log($.id);
  18. console.log($.wife.name);
  19. console.log($.wife.address.city);
  20. console.log(p);

控制台打印结果:

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nNzcwMTAzNw_size_16_color_FFFFFF_t_70

三、浅拷贝代码(extend函数里不传入第一个参数,默认为false):

  1. //二、浅拷贝的方式(extend函数里不传入第一个参数,默认为false),把p的属性合并到jQuery($)上,但是共享引用类型的属性wife和address
  2. var p = {
  3. "id":"007",
  4. "name":"刘德华",
  5. "wife":{
  6. "id":"008",
  7. "name":"刘德的妻子",
  8. "address":{
  9. "city":"北京",
  10. "area":"海淀区"
  11. }
  12. }
  13. }
  14. $.extend($,p);//或者 $.extend(p);
  15. p.wife.name="张三疯";
  16. p.wife.address.city="香港";
  17. console.log($.id);
  18. console.log($.wife.name);
  19. console.log($.wife.address.city);
  20. console.log(p);

控制台结果:

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nNzcwMTAzNw_size_16_color_FFFFFF_t_70 1

发表评论

表情:
评论列表 (有 0 条评论,188人围观)

还没有评论,来说两句吧...

相关阅读