jQuery中的$.extend方法与 $.fn.extend方法
jquery为开发插件提供了两个方法:$.extend与 $.fn.extend
- 函数用于将一个或多个对象的内容合并到目标对象(可以实现克隆)
参数 | 描述 |
---|---|
deep | 如果设为true,则递归合并 |
target | 待修改对象 |
object1 | 待合并到第一个对象的对象 |
objectN | 待合并到第一个对象的对象。 |
第一个参数不写(浅克隆),合并过来的引用类型数据只复制地址,后者被合并对象引用类型数据修改,合并结果的对象中的数据也会相对应的改变
var obj1 = {
a:1,
b:2,
c:{
d:4
}
}
var obj = $.extend({},obj1)
console.log(obj) //{a:1,b:2,c:{d:4}}
obj1.c.d = 6
console.log(obj)//{a:1,b:2,c:{d:6}}
第一个参数设置为true(深克隆),后者被合并对象其中的值怎么修改都不会影响到合并结果的对象中的数据
var obj1 = {
a:1,
b:2,
c:{
d:4
}
}
var obj = $.extend(true,{},obj1)
console.log(obj) //{a:1,b:2,c:{d:4}}
obj1.c.d = 6
console.log(obj)//{a:1,b:2,c:{d:4}}
如果待修改对象中已有数据,则遵循 针对原始值,如果有属性相同则直接覆盖,如果是自己没有的属性则直接继承 , 针对引用值,如果第一个参数没写,如果有相同属性,直接赋值地址,没有则直接继承,如果设置了第一个参数,则会递归来合并
```javascript
var obj1 = {
a:1,
b:2,
c:{
d:4
}
}
var obj2 = {
a:2,
d:4,
c:{
l:6
},
e:{
k:2
}
}
$.extend(obj1,obj2)
console.log(obj1) //{a: 2,b: 2,c: {l: 6},d: 4,e: {k: 2}}
- 用来扩展方法
$.extend(object); 为扩展jQuery类本身.为类添加新的方法。(可以理解为添加静态方法)
$.fn.extend(object); 给jQuery对象添加方法。(可以理解为添加实例方法)
$.extend({
a:function(){
return 1
}
})
console.log($.a())
//$.extend添加的方法只能本身调用
$.fn.extend({
b:function(){
return 2
}
})
console.log($().b())
//$.fn.extend;添加的方法 通过jquery实例调用