深入理解jquery中extend的实现

2020-05-27 17:58:03易采站长站整理

var _default = {name : 'wenzi'};
var obj = {name : _default}
$.extend(_default, obj);
console.log(_default);

输出的_default是什么呢:


_default = {name : _default};

_default是object类型,里面有个字段name,值是_default,而_default是object类型,里面有个字段name,值是_default……,无限的循环下去。于是jQuery中直接不进行操作,跳过这个字段,进行下一个字段的操作。

2.2 深度拷贝时进行递归处理

我们在前面稍微的讲解了一下,变量值为简单类型(如number, string, boolean)进行赋值时是不会影响上一个变量的值的,因此,如果当前字段的值为Object或Array类型,需要对其进行拆分,直到字段的值为简单类型(如number, string, boolean)时才进行赋值操作。

3. $.extend()与$.fn.extend()

上面讲解的全都是

$.extend(),
根本就没讲
$.fn.extend()
。可是,你有没有发现一个细节,在这段代码的第一行是怎么写的:


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

也就是说

$.extend()
$.fn.extend()
共用的是同一个函数体,所有的操作都是一样的,只不过两个extend使用的对象不同罢了:
$.extend()
是在
jQuery($)
上进行操作的;而
$.fn.extend()
是在jQuery对象上进行操作的,如
$(‘div').extend()

4. 总结

这就是jQuery中extend的实现,以后若我们需要用到上面的功能时,除了使用

$.extend() 
,我们也可以在不引入jQuery框架的情况下,自己写一个简单的extend()来实现上面的功能。

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。