jQuery中extend函数的实现原理详解

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

在jquery的api手册中，我们看到，extend实际上是挂载在jquery和jquery.fn上的两个不同方法，尽管在jquery内部jquery.extend()和jquery.fn.extend()是用相同的代码实现的，但是它们的功能却不太一样。

代码如下:

jquery.extend(): merge the contents of two or more objects together into the first object.(把两个或者更多的对象合并到第一个当中)
jquery.fn.extend():merge the contents of an object onto the jquery prototype to provide new jquery instance methods.(把对象挂载到jquery的prototype属性，来扩展一个新的jquery实例方法)

 

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

jquery.extend({
 sayhello:function(){
 console.log("hello,this is jquery library");
 }
})
$.sayhello(); //hello, this is jquery library
jquery.fn.extend({
 check: function() {
 return this.each(function() {
 this.checked = true;
 });
 },
 uncheck: function() {
 return this.each(function() {
 this.checked = false;
 });
 }
})
$( "input[type='checkbox']" ).check(); //所有的checkbox都会被选择

注意两种调用插件的方式，一种是直接用$调用，另外一种是用$()调用，另外jquery.extend()接收多个对象作为参数，如果只有一个参数，则把这个对象的属性方法附加到jquery上，如果含有多个参数，则把后面的对象的属性和方法附加到第一个对象上。jquery extend的实现:

jquery.extend = jquery.fn.extend = function() {
 var options, name, src, copy, copyisarray, clone,
 target = arguments[0] || {},
 i = 1,
 length = arguments.length,
 deep = false;
 // handle a deep copy situation
 if ( typeof target === "boolean" ) {
 deep = target;
 target = arguments[1] || {};
 // skip the boolean and the target
 i = 2;
 }
 // handle case when target is a string or something (possible in deep copy)
 if ( typeof target !== "object" && !jquery.isfunction(target) ) {
 target = {};
 }
 // extend jquery itself if only one argument is passed
 if ( length === i ) {
 target = this;
 --i;
 }
 for ( ; i < length; i++ ) {
 // only deal with non-null/undefined values
 if ( (options = arguments[ i ]) != null ) {
 // extend the base object
 for ( name in options ) {
 src = target[ name ];
 copy = options[ name ];
 // prevent never-ending loop
 if ( target === copy ) {
  continue;
 }
 // recurse if we're merging plain objects or arrays
 if ( deep && copy && ( jquery.isplainobject(copy) || (copyisarray = jquery.isarray(copy)) ) ) {
  if ( copyisarray ) {
  copyisarray = false;
  clone = src && jquery.isarray(src) ? src : [];
  } else {
  clone = src && jquery.isplainobject(src) ? src : {};
  }
  // never move original objects, clone them
  target[ name ] = jquery.extend( deep, clone, copy );
 // don't bring in undefined values
 } else if ( copy !== undefined ) {
  target[ name ] = copy;
 }
 }
 }
 }
 // return the modified object
 return target;
};

很大一堆代码，乍看起来难以理解，其实代码的大部分都是用来实现jquery.extend()中有多个参数时的对象合并，深度拷贝问题，如果去掉这些功能，让extend只有扩展静态和实例方法的功能，那么代码如下:

jquery.extend = jquery.fn.extend = function(obj){
 //obj是传递过来扩展到this上的对象
 var target=this;
 for (var name in obj){
 //name为对象属性
 //copy为属性值
 copy=obj[name];
 //防止循环调用
 if(target === copy) continue;
 //防止附加未定义值
 if(typeof copy === 'undefined') continue;
 //赋值
 target[name]=copy;
 }
 return target;
}

下面再来对extend方法进行注释解释:

jquery.extend = jquery.fn.extend = function() {
 // 定义默认参数和变量
 // 对象分为扩展对象和被扩展的对象 
 //options 代表扩展的对象中的方法
 //name 代表扩展对象的方法名
 //i 为扩展对象参数起始值
 //deep 默认为浅复制
 var options, name, src, copy, copyisarray, clone,
 target = arguments[0] || {},
 i = 1,
 length = arguments.length,
 deep = false;
 //当第一个参数为布尔类型是，次参数定义是否为深拷贝
 //对接下来的参数进行处理
 if ( typeof target === "boolean" ) {
 deep = target;
 target = arguments[1] || {};
 // 当定义是否深拷贝时，参数往后移动一位
 i = 2;
 }
 // 如果要扩展的不是对象或者函数，则定义要扩展的对象为空
 if ( typeof target !== "object" && !jquery.isfunction(target) ) {
 target = {};
 }
 // 当只含有一个参数时，被扩展的对象是jquery或jquery.fn
 if ( length === i ) {
 target = this;
 --i;
 }
 //对从i开始的多个参数进行遍历
 for ( ; i < length; i++ ) {
 // 只处理有定义的值
 if ( (options = arguments[ i ]) != null ) {
 // 展开扩展对象
 for ( name in options ) {
 src = target[ name ];
 copy = options[ name ];
 // 防止循环引用
 if ( target === copy ) {
  continue;
 }
 // 递归处理深拷贝
 if ( deep && copy &&; ( jquery.isplainobject(copy) || (copyisarray = jquery.isarray(copy)) ) ) {
  if ( copyisarray ) {
  copyisarray = false;
  clone = src && jquery.isarray(src) ? src : [];
  } else {
  clone = src && jquery.isplainobject(src) ? src : {};
  }
  target[ name ] = jquery.extend( deep, clone, copy );
 // 不处理未定义值
 } else if ( copy !== undefined ) {
  //给target增加属性或方法
  target[ name ] = copy;
 }
 }
 }
 }
 //返回
 return target;
};

弄懂了jquery扩展的原理，相信以后再也不用为编写jquery插件而烦恼了。