jQuery中的 $.extend() 和 $.fn.extend()

最新推荐文章于 2026-04-10 10:00:00 发布

原创最新推荐文章于 2026-04-10 10:00:00 发布 · 477 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

本文深入解析了jQuery中的$.extend()和$.fn.extend()方法，详细介绍了如何使用这两个方法为jQuery添加静态方法和实例方法，以及如何实现浅层和深层克隆。

$.extend() 和 $.fn.extend() 这两个方法都是给jQuery进行拓展，开发jQuery插件时经常使用

在jQuery源码中，你会看到关于这两个方法的代码的第一行是这样的

jQuery.extend = jQuery.fn.extend = function(){}

可以看出两个方法共用的是同一个函数体，所有的操作都是一样的，只不过两个方法使用的对象不同。

$.extend是为jQuery类添加添加类方法，可以理解为添加静态方法（工具方法）

	$.extend({
		min: function(a, b) { return a < b ? a : b; },
		max: function(a, b) { return a > b ? a : b; },
		add: function(a, b) { return a + b }
	});
	// 调用
	$.min(2,3); //  2 
	$.max(4,5); //  5
	$.add(5,5); //  10

$.extend() 也提供了深度拷贝的方法

	var obj = {
		name:'哈哈', 
		score:80
	};
	var obj1 = {
		name:'嘻嘻',
		success:'A',
		score:{
			Chinese:100,
			math:90
		}
	}
	$.extend(true, obj, obj1);
	
	console.log("obj" , obj);
	console.log("obj1" , obj1);

	obj.score.Chinese = 10;

	console.log(obj.score.Chinese);   // 10
	console.log(obj1.score.Chinese);  // 100

后者的内容克隆到前者，属性重名的直接覆盖，修改属性值互不干扰。
在这里插入图片描述

$.fn.extend则是为jQuery对象添加方法（实例方法）

查看jQuery源码也可以发现

jQuery.fn = jQuery.prototype = {}

可以明显的看到就是为jQuery的原型添加新的属性和方法。

	$.fn.extend({
		toWidth: function() {
			this.width(function(index,width){
				return width + 10
			}).css({
				backgroundColor : 'green'
			});
		}
	});
	// 使用新创建的.check() 方法
	$(".box").click(function(){
		$(this).toWidth();
	})

在这里插入图片描述
$.fn.extend()也有克隆，浅层克隆和深层克隆都有，互不影响。

浅层克隆

	$.fn.extend( obj, obj1);
	obj.score.Chinese = 10;
	obj1.score.math= 50;

在这里插入图片描述
深层克隆

	$.fn.extend(true, obj, obj1);
	obj.score.Chinese = 10;
	obj1.score.math = 50;

在这里插入图片描述

标签

#jquery