jQuery源码解读2：.extend()函数

一、不防从我们所有认识这个函数的功能入手

1. 这个函数把系列对象合并后返回一个新对象

2. 合并有两种方式，规定在第一个参数上指明，true为深度，false为浅度。

第一个参数在源码中被确定用来表示是否深浅合并：如代码段：

target = arguments[ 0 ] || {},

二、逐行解释源码

//.extend函数是jQuery()对象的方法也是jQuery静态工具函数
jQuery.extend = jQuery.fn.extend = function() 
{
	var options, name, src, copy, copyIsArray, clone,
//默认如果不指定合并类型：深度或者否，默认的目标是第一个参数（target定1）
		target = arguments[ 0 ] || {},
		i = 1,
//巧用不定参，可以让这个函数的功能多样化
		length = arguments.length,
//默认为false，默认不深度递归合并
		deep = false;
	// Handle a deep copy situation
	if ( typeof target === "boolean" ) {
		deep = target;
		// Skip the boolean and the target 
//上面把 i = 1 就是要跳过第一参数（当检测到第一个参数为布尔型时）
//如果存在指定合并类型，那先这个目标对象就被改成下个参数（target改1）
		target = arguments[ i ] || {};
//如果存在合并类型且已经确定第一参数为目标对象的话，i++就是开始表明现在可以开始从i++开始找源对象了！
		i++;  
	}
	// Handle case when target is a string or something (possible in deep copy)
//如果传进来的目标不是一个对象而是非对象的其他数据类型（null 、字符串、undefined等）
	if ( typeof target !== "object" && !jQuery.isFunction( target ) ) {
		target = {};（target改2）
	}

	// Extend jQuery itself if only one argument is passed
//如果传进来就只有一个参数或者两个参数（其中一个是合并类型布尔型），也就是说传进来的参数只有目标对象无源对象，
//那就修改目标对象为this（虽然上面（target定1）有默认表示第一个参数是目标对象），把第一个对象参数当做源对象。
	if ( i === length ) {
		target = this;//（target改3）
//因为上面误以为有两个参数，且第一参数是合并类型的布尔型，第二个参数是目标对象，上面i++。
//既然是误以为造成的i++，实际只有一个参数就得还原回来！
		i--;  
	}
	for ( ; i < length; i++ ) {
//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
//当前的源对象复制属性copy是普通JavaScript对象或数组，则递归合并
				if ( deep && copy && ( jQuery.isPlainObject( copy ) ||
					( copyIsArray = Array.isArray( copy ) ) ) ) {

					if ( copyIsArray ) {
						copyIsArray = false;
//如果原始值src不是数组，则修正为空数组
						clone = src && Array.isArray( src ) ? src : [];

					} else {
//如果原始值src不是普通JavaScript对象，则修正为空对象{}。
						clone = src && jQuery.isPlainObject( src ) ? src : {};
					}

					// Never move original objects, clone them
// 递归调用extend方法，继续进行深度遍历
					target[ name ] = jQuery.extend( deep, clone, copy );  //递归
//注意这里的递归得到的一个完整的对象赋给目标对象的[name]属性。而不是把递归中的属性给到目标对象属性

				// Don't bring in undefined values
//如果不是深度合并
				} else if ( copy !== undefined ) {
					target[ name ] = copy;
//如果不是深度合并，碰到源对象的属性为一个完整的对象，也不去递归了！
				}
			}
		}
	}

	// Return the modified object
	return target;
};

三、注意深度递归合并与非深度合并直接的区别：

target[ name ] = jQuery.extend( deep, clone, copy );  //递归

举个例子就能比较直观的看到问题

//默认的非深度递归
jQuery.extend({ name: “John”, location: { city: “Boston” } }, 
{ last: “Resig”, location: { state: “MA” } } 
); 
// 结果:  => { name: “John”, last: “Resig”, location: { state: “MA” } } 


//深度递归
jQuery.extend( true, 
{ name: “John”, location: { city: “Boston” } }, 
{ last: “Resig”, location: { state: “MA” } } 
); 
// 结果 => { name: “John”, last: “Resig”, location: { city: “Boston”, state: “MA” } } 

四、学到的技术点

1. 采用“不定实参”arguments

2.