jQuery.extend()

Posted 2020-12-04 freezyh

使用jquery的$.extend()之前突然想到如何查看jquery的版本

$.fn.jquery

转入正题，在没有研究jquery源码之前，都不知道这个方法的使用，接触过后感觉这东西还可以，在此做个note

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

注意：

1. 如果只为$.extend()指定了一个参数，则意味着参数target被省略。此时，target就是jQuery对象本身。通过这种方式，我们可以为全局对象jQuery添加新的函数。
2. 如果多个对象具有相同的属性，则后者会覆盖前者的属性值。

定义和用法

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

指示是否深度合并

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

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

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

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

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

1.基本的用法：

1 var option1 = {
2     max: 100,
3     min: 20
4 }
5 var option2 = {
6     flag: true,
7     disable: false
8 }
9 var objconfig = $.extend(option1, option2);

 

objconfig的值为合并后的对象 {max: 100, min: 20, flag: true, disable: false}

这种用法的缺点是什么呢？改变了option1 ！！！

然后我们如果不需要改变option1可以把target设置为{}，目标对象为新的{}，而不是option1，到时option1将不会不改边，把option1和option2合并成一个对象

 

var option1 = {
    max: 100,
    min: 20
}
var option2 = {
    flag: true,
    disable: false
}
var objconfig = $.extend({}, option1, option2);

 

2.合并的对象之间含有重复的属性

var option1 = {
    max: 100,
    min: 20
}
var option2 = {
    flag: true,
    disable: false,
    min: 100
}
var objconfig = $.extend({}, option1, option2);

objconfig的值为{max: 100, min: 100, flag: true, disable: false}

也就是合并对象有重复的属性值时，后面的对象的相同属性值会覆盖前面的。

3.合并的对象含有子对象

var option1 = {
    max: 100,
    min: 20,
    user: {
        name: ‘tony‘,
        age: 18
    }
}
var option2 = {
    flag: true,
    disable: false,
    min: 100,
    user: {
        name: ‘anny‘,
        job: ‘student‘
    }
}
var objconfig = $.extend({}, option1, option2);

看如下结果

后面的user覆盖了前面的user

这个时候就涉及到深拷贝了，需要把第一个参数deep设置为true

var objconfig = $.extend(true, {}, option1, option2);

深拷贝对象的子对象的属性也合并拷贝了，但是子对象的属性值依然是后面的覆盖前面的

4.此方法可以给jquery添加新的函数

$.extend(
    {
        min: function(a, b) { return a < b ? a : b; },
        max: function(a, b) { return a > b ? a : b; }
    }
)
console.log($.min(3,5))
console.log($.max(5,3))

当extend的对象只有一个时默认是给jquery扩展的，也就是那个对象的属性被附加到jquery身上。