深入理解jquery中extend的实现(简述jquery)

编辑：rootadmin

推荐整理分享深入理解jquery中extend的实现(简述jquery)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:jquery的理解,深入理解javascript pdf,jquery的理解,jquery原理解析,jquery原理解析,jquery的理念是什么,jquery的理念是什么,jquery原理解析,内容如对您有帮助，希望把文章链接给更多的朋友！

Jquery的扩展方法extend是我们在写插件的过程中常用的方法，该方法有一些重载原型，下面来看看详细的介绍吧。

通常我们使用jquery的extend时，大都是为了实现默认字段的覆盖，即若传入某个字段的值，则使用传入值，否则使用默认值。

如下面的代码：

那现在我们就得需要知道这个extend具体是怎么实现的了，除了实现上面的功能，还有其他作用么？那肯定是有的啦，否则我也不会问那句话了（(⊙?⊙)b）。我们先来看看extend主要有哪些功能，然后再看实现这些功能的原理。

1. extend能实现的功能

其实从extend的含义里，我们就能知道extend是做什么的了。extend翻译成汉语后就是：延伸、扩展、推广。

1.1 将两个或更多对象的内容合并到第一个对象

我们来看看$.extend()提供的参数：jQuery.extend( target [, object1 ] [, objectN ] )，extend方法需要至少传入一个参数，第一个必需，后面的都是可选参数。若传给extend是两个或两个以上的参数都是对象类型，那么就会把后面所有对象的内容合并给target（第一个对象）上。

我们再来看看上面的例子：

$.extend()中接收了两个参数_default和option，那么extend方法执行时，就会把option对象上字段的值全给了_default。于是_default上设置的默认值就会被option上的值覆盖。当然，若option上没有这个字段，就不会覆盖_default上字段的值。上面函数中的extend，只是传入了两个参数，那传的参数再更多一些呢：

这里我们传入了4个参数，然后getOpt()返回第一个参数的值。从运行的得到结果我们可以看到，属性值永远是最后一个属性的值。

还有很重要的一点，$.extend()其实是有返回值的，返回的就是修改后的第一个参数的值。如我们可以把上面的函数修改成这样：

若我们传入的参数不想被修改，我们可以用一个空对象来作为第一个参数，然后获取$.extend()的返回值：

1.2 为JQUERY扩展方法或属性

刚才我们在1.1中讲的$.extend()的例子都是传了两个或两个以上的参数，但其实只有一个参数是必须的。若只传一个参数会怎样呢。

如果只有一个参数提供给$.extend() ，这意味着目标参数被省略。在这种情况下，jQuery对象本身被默认为目标对象。这样，我们可以在jQuery的命名空间下添加新的功能。这对于插件开发者希望向 jQuery 中添加新函数时是很有用的。

这样我们就为jQuery扩展了_name属性和_getName方法。

1.3 深度拷贝和浅度拷贝

针对什么是深度拷贝，什么是浅度拷贝，我们先来看一个简单的例子。

我们修改了obj1中的name值，结果obj中的值也跟着发生了变化，这是为什么呢。其实这就是浅度拷贝：这仅仅是将obj对象的引用地址简单的复制了一份给予变量 obj1，而并不是将真正的对象克隆了一份，因此obj和obj1指向的都是同一个地址。当修改obj1的属性或给obj1添加新属性时，obj都会受到影响。

可是如果变量的值不是对象和数组，修改后面的变量是不会影响到前面的变量：

那么深度拷贝就不是拷贝引用地址，而是实实在在的复制一份新对象给新的变量。在上面使用$.extend()中，都是使用的浅度拷贝，因此若后面的参数值是object类型或array类型，修改_default(target)的值，就会影响后面参数的值。

如我们使用getOpt(_default, obj1, obj2, obj3);得到的_default值是{name: “obj2”, age: “”, sex: {error: “sorry, I dont't kown”}}，可是若：

那么obj3.sex.error也会跟着修改，因为obj3.sex是一个object类型。

不过$.extend()也提供了深度拷贝的方法：jQuery.extend( [deep ], target, object1 [, objectN ] ) 。若第一个参数是boolean类型，且值是true，那么就会把第二个参数作为目标参数进行合并。

执行后我们发现，无论怎么修改obj.score里的值，都不会影响到obj1.score了。

2. jQuery中extend实现原理

其实不看源码，对extend大致的过程应该也是了解的：对后一个参数进行循环，然后把后面参数上所有的字段都给了第一个字段，若第一个参数里有相同的字段，则进行覆盖操作，否则就添加一个新的字段。

下面是jQuery中关于extend的源码，我就在源码上进行注释讲解了，随后再在后面进行总结：

源码分析完了，下面我们来讲解下源码中存在的几个难点和重点。

2.1 若参数中字段的值就是目标参数，停止赋值

在源码中进行了一下这样的判断：