用jQuery的extend函数扩展对象

$.extend 方法可以扩展 JSON 对象,用一个或多个其他对象来扩展一个对象,返回被扩展的对象。 jQuery的的extend也能够用来编写jQuery插件。

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





一个不注意小事情的人,永远不会成功大事业。——戴尔·卡耐基
0 不喜欢
说说我的看法 -
全部评论(
没有评论
关于
本网站属于个人的非赢利性网站,转载的文章遵循原作者的版权声明,如果原文没有版权声明,请来信告知:hxstrive@outlook.com
公众号