详解 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属性也进行添加