jq中extend用法以及深度克隆对象

【jQuery中extend用法】

extend是延伸的意思,平时我们写项目经?;嵊龅揭桓龇椒ㄖ赜玫氖焙?,但是呢,jq自带的又没有这个方法,满足不了我们,那怎么办呢,

咦,那我就会告诉你,我们可以自己来给jq中增加一些方法,那么怎么增加呢?下面我就介绍一下这个方法!
比如现在我需要一个方法,可以把一个元素背景颜色变色,看例子:

$(function(){
   $('#div1').toRed(); //让当前这个元素变红色
   $('#div2').toBlue(); //让当前这个元素变蓝色
   $('div').toRandomColor(); //试试能不能延伸循环来让所有的都变色
})

那么怎么写这个toRed,toBlue方法呢?

$.fn.toRed=function(){
    this.css('background','red')
};
$.fn.toBlue=function(){
    this.css('background','blue')
};

试试能不能延伸循环来让所有的都变色toRandomColor
到底能不能呢?答案是:可以
给jq延伸一些小方法,也可以直接用jq的功能,比如说循环$.each:

$.fn.toRandomColor=function(){
    $.each($(this),function(index,element){ //直接用jq的循环即可,
        $(element).css('background','red')
    })
};

那么有的同学说了,鹏哥,这里面没有用到extend啊。。那现在我告诉你怎么用:

$.fn.extend({  //直接在extend(里面写一个json,然后直接写方法名,以及方法即可)
    toBlue:function(){
        this.css('background','blue')
    },
    toRed:function(){
        this.css('background','red')
    }
});

以上只是介绍一下extend的用法,下面开始进入今天的正题,用extend方法来深度克隆一个对象。

那么怎么用extend克隆呢,首先介绍一下extend:

**extend(true/false,dest,src1,src2,src3...) **
第一个参数为true或者是false,true就是深度克隆,false就是浅克隆。

浅拷贝(false 默认):如果第二个参数对象有的属性第一个参数对象也有,那么不会进行相同参数内部的比较,直接将第一个对象的相同参数覆盖。

深拷贝(true):如果第二个参数对象有的属性第一个参数对象也有,还要继续在这个相同的参数向下一层找,比较相同参数的对象中是否还有不一样的属性,如果有,将其继承到第一个对象,如果没有,则覆盖。

那么怎么直接克隆一个对象呢。
比如说,我有这么一个对象,要求给我深度克隆出一个对象,(前面的文章中我也说过浅克隆和深克隆的原生写法)

var obj1 = {
      'a': 's1',
      'b': [1,2,3,{'a':'s2'}],
      'c': {'a':'s3', 'b': [4,5,6]}
    };
    var obj2=$.extend(true,{},obj1);  //第二个参数是指定我要复制后的那个对象是什么写数组就是数组,写json就是json
    obj1.a="adsa";
    obj2.b[0]=12;
    console.log(obj1); //{'adsa': 's1','b': [1,2,3,{'a':'s2'}],'c': {'a':'s3', 'b': [4,5,6]}}
    console.log(obj2); //{'adsa': 's1','b': [12,2,3,{'a':'s2'}],'c': {'a':'s3', 'b': [4,5,6]}}

或者是这样用合并两个对象成为一个新的对象:

var obj1 = {
        'a': 's1',
        'b': [1,2,3,{'a':'s2'}],
        'c': {'a':'s3', 'b': [4,5,6]}
      };
      var obj2=[1,2,3,4,5]
      var obj3=$.extend(true,obj2,obj1);
      console.log(obj3);
      //[1, 2, 3, 4, 5, a: "s1", b: Array[4], c: Object]

以上结束。

最后编辑于
?著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,992评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,212评论 3 388
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事?!?“怎么了?”我有些...
    开封第一讲书人阅读 159,535评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,197评论 1 287
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,310评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,383评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,409评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,191评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,621评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,910评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,084评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,763评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,403评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,083评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,318评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,946评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,967评论 2 351

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,644评论 18 139
  • 国家电网公司企业标准(Q/GDW)- 面向对象的用电信息数据交换协议 - 报批稿:20170802 前言: 排版 ...
    庭说阅读 10,938评论 6 13
  • $()创建对象的实现 首先我们来看一下需求$("div")可以创建一个对象该对象可以调用所有jq的元素公用方法该对...
    种谔阅读 2,007评论 3 6
  • 深闺寂寞冷, 豪门城府深。 游龙空中腾, 野草路边生。
    肯尼迪金阅读 256评论 0 2
  • 姓名:王成茗 日精进打卡第18天 【打卡始于2017.10.12持续于2017.10.29】 【知~学习】...
    王成茗阅读 159评论 0 0