详解 Jquery extend() 和Jquery.fn.extend()

发布时间:2019-05-24 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了详解 Jquery extend() 和Jquery.fn.extend()脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

Jquery extend()

API文档上的解释:将一个或者多个对象扩展一个新对象,返回一个新的对象
$.extend([deep],target,obj1,objN)
deep:是否深度克隆对象,
target:将要扩展到的新对象,
obj1:待合并到新对象的第一个对象,
objN:待合并到新对象的第N个对象.
例:$.extend(obj1,obj2)//将obj2合并到obj1作为一个新对象,
var obj1 = {
name:"sunwukong",
age:18
}
var obj2 = {

price:50,
weight:100

}
$.extend(obj1,obj2);
此时输出的obj1 所输出内容将是两个对象属性集合,
我们之所以这么做,可以将obj1看做一个普通的人,而添加到obj2之后可以新添加功能,有了新的功能以后能跑能跳
注意:如果此时有相同属性名,obj1中的相同属性名的属性值将被obj2所覆盖

(function($){
           $.extend({
               speak:function(){
                   alert("how are you!");
               }
           });
    })(jQuery);

此时我们可以直接调用$.speak这个方法
扩展到这个方法只跟$有关,跟具体实例化对象是没有关系的

Jquery.fn.extend()

把对象挂载到Jquery的prototype属性,来扩展新的jquery方法
Jquery.fn.extend = jquery.prototype ={
speak:function(){
consolor.log('aa')
}}
调用:
$('#btn').speak()//此时我们的fn可以代表的是我们当前这个对象
这种可以用于我们公共的js方法的调用
alert($.fn.jquery );获取当前jquery的版本号

两者的区别

1. 两者的调用方式
$.extend(deep,target,obj1,obj2)
一般由传入全局的函数来调用,主要用于扩展个全局函数,如:$.init(),$.ajax();
jQuery.fn.extend(),
一般由具体的实例对象来调用,可以用来拓展个选择器,例如$.fn.each();
2. 两者的主要功能不同
$.extend(deep,target,obj1,obj2)一般用于给jquery自身添加方法
jQuery.fn.extend(),
3. 开发中可能会遇到的bug
bug之$.extend(deep,target,obj1,obj2)
var obj1 = {
name:"sunwukong",
age:18,
banlance:{big:false,nianji:12,pal:'ad'}
}
var obj2 = { price:50, banlance:{big:true,pal:'ad'} }
var obj3 = {}
$.extend(obj3,obj1,obj2)
obj3{name:"sunwukong",age:18, price:50,banlance:{big:true,pal:'ad'}}
此时相同属性第二个将第一个完全覆盖
var obj3 = {}
$.extend(true,obj3,obj1,obj2)
obj3{name:"sunwukong",age:18, price:50,banlance:{big:true,nianji:12,pal:'ad'}}
此时调用深克隆可以将对应的数据进行obj2中没有的obj1属性也进行添加

脚本宝典总结

以上是脚本宝典为你收集整理的详解 Jquery extend() 和Jquery.fn.extend()全部内容,希望文章能够帮你解决详解 Jquery extend() 和Jquery.fn.extend()所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: