您的当前位置:首页>全部文章>文章详情

jQuery内的$.extend 函数及用法详解

发表于:2024-04-01 18:00:37浏览:106次TAG: #jquery #extend

jQuery的扩展方法extend是我们经常在写插件的时候常用的方法,extend方法有两种,一种是$.extend(),另外一种是$.fn.extend()。

jQuery的扩展方法原型

图片alt

合并两个对象的值

$.extend(obj1,obj2) //改变了obj1
$.extend({},obj1,obj2) //未改变了obj1
extend(dest, src1, src2, src3...)

extend的含义是讲src1,src2,src3…合并到dest中,返回值为合并后的dest,从上面可以看出使用了extend方法后,会修改dest的结构,同时也可以将空对象{}作为参数传入,即使用如下:

var newSrc = $.extend({}, {name: 'ccc', age: 21}, {name: 'xxx, sex: 'Boy'});

可以得到合并后的结果如下所示:

newSrc = {name: 'xxx', age: 21, sex: 'Boy'};

可以看出如果多个合并对象中有相同属性的将会进行合并,并且后来合并的属性会覆盖前面的属性。

省略dest参数
同时extend方法的dest参数可以省略,如果省略了dest参数,那么extend方法只能拥有一个参数,要不然会报错,只有一个参数的时候是将该src合并到调用extend方法的对象中去,如下所示:

1、$.extend(src)

该方法就是将src合并到jQuery的全局对象中去,如:

$.extend({
    name: function () {
        console.log('my name is chuanzhushen');
    }
});

就是将name方法合并到jquery的全局对象中去,既可以通过$.name()或者jQuery.name()来调用此方法。

2、$.fn.extend(src)

该方法将src合并到jQuery的实例对象中去,如:

$.fn.extend({
    name: function () {
        console.log('my name is scienceswork');
    }
});

就是将name方法合并到jQuery的实例对象上去,该方法与$.extend()的区别在于需要实例化后才能调用该方法,如:

$().name(); // my name is scienceswork
$.name();   // my name is chuanzhushen

extend方法的重载原型

图片alt

第一个参数不传(false是不能够显示的写出来的)默认为false,是浅拷贝。传true为深拷贝。

$.extend(true,object1, object2)
//newObject 即为深拷贝出来的对象
var newObject = $.extend(true , {} , object);
extend(boolean, dest, src1, src2, src3...)

第一个参数boolean代表是否进行深拷贝,其余参数与之前的相同,JavaScript里有深拷贝和浅拷贝,我们先来了解一下什么是深拷贝,什么是浅拷贝。

var result = $.extend(true, {}, 
    {name: 'ccc', location: {city: 'guangzhou', county: 'cn'}},
    {last: 'sciences', location: {state: 'xxx', county: 'cn'}}
)

从上面的例子中我们可以看出src1中嵌套子对象location:{city: ‘guangzhou’},src2中也嵌套了对象localtion:{state: ‘xxx’},第一个深度拷贝的参数我们发现为true,那么合并后的结果就是:

result = {
    name: 'ccc',
    last: 'sciences',
    location: {
        city: 'guangzhou',
        state: 'xxx',
        county: 'cn'
    }
};

上面即是使用浅拷贝进行合并的结果,其嵌套的对象不会进行深度遍历拷贝。