美文网首页
jq中extend用法以及深度克隆对象

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

作者: 虚幻的锈色 | 来源:发表于2017-03-15 21:33 被阅读1383次

【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]

以上结束。

相关文章

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

    【jQuery中extend用法】 extend是延伸的意思,平时我们写项目经常会遇到一个方法重用的时候,但是呢,...

  • jQuery插件开发

    $.extend : 扩展工具方法下的插件形式 $.xxx() ; $.fn.extend : 扩展到JQ对象下的...

  • JQ中extend

    $.extend用法 extend的作用将两个或更多对象的内容合并到第一个对象。 函数原型 其中的deep是一个b...

  • JS实现深度克隆

    一、概念 深度克隆:深度克隆的新对象可以完全脱离原对象,我们对新对象的修改不会反映到原对象中 二、知识点储备: 1...

  • js对象的克隆

    在工作中对对象的克隆在所难免,现在就总结一下克隆对象的方法。 浅克隆 深度克隆 其实除了以上的方法,还有一种非常简...

  • 深度克隆对象

    克隆的概念 浅度克隆:原始类型为值传递,对象类型仍为引用传递。 深度克隆:所有元素或属性均完全复制,与原对象完全脱...

  • 对象深度克隆

    是否遇到过这样的事情 let obj = {name: 'test',age: 1}_obj.age = 2con...

  • $.extend()

    合并多个对象$.extend(deep,target,object)deep指示是否深度合并对象,默认为false...

  • js将多个方法添加到window对象上的多种方法

    方法一(基础方法) 方法二 (利用jq的extend方法) 方法三 方法四:(window下的对象是变量的时候)

  • 原型模式

    定义 用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象克隆(浅度克隆:拷贝值类型或者引用,深度克隆:...

网友评论

      本文标题:jq中extend用法以及深度克隆对象

      本文链接:https://www.haomeiwen.com/subject/maurnttx.html