jQuery中扩展函数的实现原理详解

扩展()是jQuery中一个重要的函数，作用是实现对对象的扩展，它经常用于jQuery插件的开发，jQuery内部也使用它来扩展属性方法，如上篇文章中讲到的无冲突方法，就是用扩展方法来扩展的。

在jQuery的应用程序接口手册中，我们看到，延伸实际上是挂载在jQuery和jQuery.fn上的两个不同方法，尽管在jQuery内部jQuery.extend()和jQuery.fn.extend()是用相同的代码实现的，但是它们的功能却不太一样。来看一下官方应用程序接口对扩展的解释：复制代码代码如下：jQuery.extend():将两个或多个对象的内容合并到第一个对象中。(把两个或者更多的对象合并到第一个当中)jQuery。fn。extend():将对象的内容合并到jQuery原型上，以提供新的jQuery实例方法。(把对象挂载到jQuery的原型属性，来扩展一个新的jQuery实例方法)

我们知道，jQuery有静态方法和实例方法之分，那么jQuery.extend()和jQuery.fn.extend()的第一个区别就是一个用来扩展静态方法，一个用来扩展实例方法。用法如下：

jQuery。扩展({说Hello :函数(){控制台。日志('你好，这是jQuery库’)；}})$.说你好()；//您好，这里是jQuery库jQuery。fn。扩展({ check : function(){ return This。每个(函数(){ This。选中=真；});},取消选中：函数(){返回这个。每个(函数(){ this。选中=假；});}})$('input[type='checkbox']').check()；//所有的检验盒都会被选择注意两种调用插件的方式，一种是直接用$调用，另外一种是用$()调用，另外jQuery.extend()接收多个对象作为参数，如果只有一个参数，则把这个对象的属性方法附加到jQuery上，如果含有多个参数，则把后面的对象的属性和方法附加到第一个对象上jQuery扩展的实现源码：

jquery。extend=jquery。fn。extend=function(){ var options，name，src，copy，copyIsArray，clone，target=arguments[0]| { }，i=1，length=arguments.length，deep=false//处理深度复制情况，如果(target==' boolean ')的类型{ deep=target目标=参数[1]| | { };//跳过布尔值，目标I=2；} //当目标是字符串或其他东西时（在深度复制中可能)处理大小写如果（目标的类型！=='对象！jquery。is FuncTion(target)){ target={ }；} //如果只传递一个参数，则扩展jQuery本身，如果（长度===I){ target=this；-我；} for(；一、长度；i ) { //仅处理非空/未定义的值，如果((选项=参数)！=null ) { //扩展（选项中的名称)的基础对象{ src=target[name]；copy=options[name]；//防止永不结束的循环if(target===copy){ continue；} //递归如果我们正在合并普通对象或数组如果(深度复制(jquery。isplayanoobject(copy)| |(copy is array=jquery。is array(copy)))){ if(copy is array){ copy is array=false；clone=src jQuery.isArray(src)？src :[]；} else { clone=src jquery。isplayanoobject(src)？src : { }；} //绝不移动原始对象，克隆它们target[name]=jquery。扩展(深度、克隆、复制)；//不要引入未定义的值}否则如果（复制！==未定义){ target[name]=copy；} } } } //返回修改后的对象返回目标；};很大一堆代码，乍看起来难以理解，其实代码的大部分都是用来实现jQuery.extend()中有多个参数时的对象合并，深度拷贝问题，如果去掉这些功能，让扩展只有扩展静态和实例方法的功能，那么代码如下：

jquery . extend=jquery . fn . extend=function(obj){//obj是对象var target=this传递并扩展到this；For (var name in obj){ //name是对象属性//copy是属性值copy=obj[name]；//如果(target===copy)继续，则防止循环调用；//如果(复制类型==' undefined ')继续，则防止附加未定义的值；//分配目标[名称]=copy；}返回目标；}让我们评论并解释扩展方法：

jquery . extend=jquery . fn . extend=function(){//定义默认参数和变量//对象分为扩展对象和扩展对象//options代表扩展对象中的方法//name代表扩展对象的方法名//i是扩展对象参数的起始值//。深度的默认值是浅拷贝varoptions，name，src，copy，copyisarray，clone，target=arguments [0] | | {}，I=1，length=arguments。长度，深=假；//当第一个参数为布尔类型Yes时，第二个参数定义是否为深度副本//如果(target===' boolean ')类型{ deep=targettarget=参数[1]| | { }；//定义是否为深度复制时，参数后移一位，I=2；}//如果不是要扩展的对象或函数，则将要扩展的对象定义为空if (typeof target！=='对象'！jquery . IsFunction(target)){ target={ }；}//当只包含一个参数时，扩展对象为jQuery或jQuery . fn if(length===I){ target=this；-我；}//遍历从I开始的多个参数for(；一、长度；I) {//仅处理定义值if ((options=arguments[ i])！=null) {//展开扩展对象为(选项中的名称){src=目标[名称]；copy=options[name]；//防止循环引用if(target===copy){ continue；}//递归处理深度复制if(深度复制；(jquery . isplayanobject(copy)| |(copy isarray=jquery . isarray(copy))){ if(copy isarray){ copy isarray=false；clone=src jQuery.isArray(src)？src :[]；} else { clone=src jquery . isplayanobject(src)？src : { }；} target[ name ]=jQuery.extend(深度、克隆、复制)；//不处理未定义的值}否则如果(复制！==未定义){//将属性或方法添加到目标目标[name]=copy；} } } }//返回返回目标；};了解了jQuery扩展的原理，相信以后再也不用担心编写jQuery插件了。