用jQuery的extend函数扩展对象

jQuery中$.extend是一个非常重要的概念，学习jQuery非常有必要熟练使用该函数。

用 $.extend 方法来扩展JSON对象

$.extend 方法可以扩展 JSON 对象，用一个或多个其他对象来扩展一个对象，返回被扩展的对象。实例如下：

(function(){
    // 启动debug模式
    debugger
    
    // 例一：合并 settings 和 options，修改并返回 settings
    var settings = { validate: false, limit: 5, name: "foo" };
    var options = { validate: true, name: "bar" };
    jQuery.extend(settings, options);
    console.debug(settings);


    // 例二：合并 defaults 和 options, 不修改 defaults
    var empty = {};
    var defaults = { validate: false, limit: 5, name: "foo" };
    var options = { validate: true, name: "bar" };
    var settings = jQuery.extend(empty, defaults, options);
    console.debug(settings);
    console.debug(empty);
})();

jQuery 的 extend扩展方法

jQuery 的扩展方法 extend 是我们在写插件的过程中常用的方法。在此，我们一起去了解了解：

jQuery extend方法原型

/**
 * 将src1、src2、src3 原对象合并到 dest 目标对象中，然后返回dest对象
 */
extend(dest, src1, src2, src3...);

它的含义是将 src1, src2, src3... 合并到 dest 中，返回值为合并后的dest。由此可以看出该方法合并后，是修改了dest 的结构的。如果想要得到合并的结果却又不想修改 dest 的结构，可以如下使用：

// 也就是将 "{}" 作为 dest 参数
var newSrc=$.extend({},src1,src2,src3...);

这样就可以将 src1, src2, src3... 进行合并，然后将合并结果返回给 newSrc 了。如下例：

var src1 = {
	name: "Tom",
	age: 21
};
var src2 = {
	name: "Jerry",
	sex: "Boy"
};
var result = $.extend({}, src1, src2);

那么合并后的结果：

result = { name: "Jerry", age: 21, sex: "Boy" }

也就是说后面的参数如果和前面的参数存在相同的名称，那么后面的会覆盖前面的参数值。

省略 dest 参数

上述的 extend 方法原型中的dest参数是可以省略的，如果省略了，则该方法就只能有一个src参数，而且是将该 src 合并到调用 extend 方法的对象中去，如：

$.extend(src)

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

$.extend({
    hello: function(){
        alert('hello');
    }
});

就是将hello方法合并到jquery的全局对象中。

公共广告位-前端

$.fn.extend(src)

该方法将src合并到jquery的实例对象中去，如：

$.fn.extend({
    hello: function(){
        alert('hello');
    }
});

就是将hello方法合并到jQuery的实例对象中。

下面例举几个常用的扩展实例：

$.extend({
    net: {}
});

这是在jquery全局对象中扩展一个net命名空间。

$.extend($.net,{
hello:function(){alert('hello');}
})

这是将hello方法扩展到之前扩展的Jquery的net命名空间中去。

jQuery extend深度复制

Jquery的extend方法还有一个重载原型：  

extend(boolean, dest, src1, src2, src3...);

第一个参数 boolean 代表是否进行深度拷贝，其余参数和前面介绍的一致，什么叫深层拷贝，我们看一个例子：

var result=$.extend(true, {}, 
    {
        name: "John",
        location: {
            city: "Boston",
            county: "USA"
        }
    }, 
    {
        last: "Resig",
        location: {
            state: "MA",
            county: "China"
        }
    }
);

我们可以看出src1中嵌套子对象 location: {city:"Boston"}，src2 中也嵌套子对象 location: {state:"MA"}，第一个深度拷贝参数为true，那么合并后的结果就是： 

result = {
    name: "John",
    last: "Resig",
    location: {
        city: "Boston", 
        state: "MA", 
        county: "China"
    }
}

也就是说它会将src中的嵌套子对象也进行合并，而如果第一个参数boolean为false，我们看看合并的结果是什么，如下：

var result=$.extend( false, {}, 
    {
        name: "John", 
        location:{
            city: "Boston",
            county:"USA"
        }
    }, 
    {
        last: "Resig", 
        location: {
            state: "MA",
            county:"China"
        }
    } 
);

那么合并后的结果就是:

result={
    name: "John",
    last: "Resig",
    location: {
        state: "MA",
        county: "China"
    }
}

以上就是$.extend()在项目中经常会使用到的一些细节。

参考资料：

https://www.jb51.net/article/105310.htm

https://www.cnblogs.com/zikai/p/5074686.html