jQuery: $.extend()和$.fn.extend()用法_停止 $.fn.extend-优快云博客

本文链接：https://blog.youkuaiyun.com/Randy_Shenyp/article/details/75098157

本文详细介绍了jQuery中$.extend()方法的基本用法及其区别。包括如何合并多个对象内容到一个对象，不同参数设置下属性值的重写与合并规则，以及如何避免修改原始对象等内容。此外还介绍了$.fn.extend()的使用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$.extend()主要用法

$.extend(target[,object1][objectN])将两个或更多对象的内容合并到第一个对象

var obj1 = {
    sex: 'man',
    age: {'Tom': 20, 'Mike': 25}
}
var obj2 = {
    hobby: 'running',
    age: {'Sam': 33}
}
var opts = $.extend(obj1, obj2);
//opts为:{sex: 'man', hobby: 'running', age: {'Sam': 33}}
//obj1为:{sex: 'man', hobby: 'running', age: {'Sam': 33}}

可以发现，合并对象时，同名属性的值会被重写，而不是合并

$.extend(true,target[,object1][objectN]) 第一个参数不能为false

var obj1 = {
    sex: 'man',
    age: {'Tom': 20, 'Mike': 25}
}
var obj2 = {
    hobby: 'running',
    age: {'Sam': 33}
}
var opts = $.extend(obj1, obj2);
//opts为:{sex: 'man', hobby: 'running', age: {'Tom': 20, 'Mike': 25, 'Sam': 33}}
//obj1为:{sex: 'man', hobby: 'running', age: {'Tom': 20, 'Mike': 25, 'Sam': 33}}

能够看到，同名属性的值会被合并

通常情况下，目标对象（第一个参数）将被修改，并且通过$.extend()返回。而如果我们想保留原对象的话，则可以通过传递一个空对象作为目标对象：

$.extend({ }, object1, object2)

var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
var settings = $.extend( {}, defaults, options );
// settings为:{validate: true, limit: 5, name: "bar"}
// defaults为:{validate: false, limit: 5, name: "foo"}保持不变

合并defaults和options对象，并且不修改defaults对象。这个在插件开发中常能看到

$.fn.extend()

区别：

jQuery.extend({
    select: function(){
        alert('abc');
    }
});

使用方式: $.select();

jQuery.fn.extend({
    slide: function(){
        alert('xyz');
    }
});

使用方式: $(‘.selector’).slide(); (类似$('#button').click())

——————————— 不当之处，还请指正 —————————————