浅谈JQ中$.extend用法以及易混淆点

用法一：数组或者对象的深浅拷贝

var obj1={}
var obj2={a:[1,2,3,4]}
var obj3={a:[5,6]}
$.extend({},obj1,obj2,obj3) //浅拷贝=>{a:[5,6]}
$.extend(true,{},obj1,obj2,obj3) //深拷贝=>{a:[5, 6, 3, 4]}
console.log(obj1)   //{}
$.extend(obj1,obj2,obj3)//{a:[5,6]}
console.log(obj1)   //{a:[5,6]}

在默认情况下，通过$.extend()合并操作不是递归的（浅拷贝）;如果第一个对象的属性本身是一个对象或数组，那么它将完全用第二个对象相同的key重写一个属性。这些值不会被合并。然而，如果将true 作为该函数的第一个参数，那么会在对象上进行递归的合并（深拷贝）。

• 浅拷贝（false 默认）：如果第二个参数对象有的属性第一个参数对象也有，那么不会进行相同参数内部的比较，直接将第一个对象的相同参数覆盖。
• 深拷贝（true）：如果第二个参数对象有的属性第一个参数对象也有，还要继续在这个相同的参数向下一层找，比较相同参数的对象中是否还有不一样的属性，如果有，将其继承到第一个对象，如果没有，则覆盖。

用法二： 为jQuery类添加类方法(静态方法)

$.extend({
    min: function(a, b) {
        return a < b ? a : b;
    }
});
$.min(2, 3); //  2 

$.extend()的调用并不会把方法扩展到对象的实例上，例子中的min方法是挂载到类本身，类实例(比如通过$(“#id”)获得的DOM元素就叫做类实例)并不能调用。

用法三： 为jQuery类原型上添加成员函数

$.fn.extend({
    alertWhileClick: function() {
        $(this).click(function() {
            alert($(this).val());
        });
    }
});
//$("#input1")是jQuery的实例，调用这个扩展方法
$("#input1").alertWhileClick();

$.fn = $.prototype
$.fn.extend()的调用把方法扩展到了对象的prototype上，所以实例化一个jQuery对象的时候，它就具有了这些方法。