前端提高篇（104）：jQuery拓展函数extend源码简读

回顾extend的和深度拷贝的知识
之前写的extend的文章
之前写的深浅拷贝的文章
菜鸟教程

简单来说extend可以合并多个对象，可以拓展jQuery函数，可以设置深拷贝；也可以在jQuery对象原型上拓展

深度拷贝是针对非基础数据类型来说的，实际上，我们定义的存储非基础数据类型的变量都是存储着变量的引用地址，如果只是简单赋值对象，原对象改变时，复制的对象也会改变，想要相互独立，就要深拷贝，遍历每一个key，每一层嵌套，获取对象里实际的值

截取源码一部分内容（3.6.0版本），可以看到，定义在jQuery和jQuery原型上的extend是一样的，所以我们简单解读一下jQuery.extend

jQuery.extend可以拓展自定义对象，拓展jQuery函数，将原对象拓展到目标对象上，还可以设置深拷贝，以下四个案例可以大概涵盖其基本功能

// 定义对象
var obj1 = {
    ccy : 18
};
var obj2 = {
    ccy1 : 19,
    ccy2 : {
        age : 20
    }
}

// 案例1：拓展自定义对象，目标对象是obj1，原对象是obj2
$.extend( obj1, obj2);
// 案例2：深拷贝拓展自定义对象
$.extend( true, obj1, obj2);

// 案例3：拓展jQuery对象，目标对象是jQuery，原对象是obj1
$.extend(obj1);
// 案例4：深拷贝拓展jQuery对象
$.extend(true, obj1);

案例3和案例4执行后，均可以直接通过:$.ccy来调用该数据，返回18

不论是将obj2拓展到obj1里，还是将obj1拓展到jQuery中，我们都需考虑以下问题：
1.是否深拷贝、哪一个是目标对象、从哪里开始到哪里结束是原对象；
2.如何深拷贝，
3.而且还要有一定的容错率

源码很巧妙地解决了这些问题

首先看第一个问题：

开始
我们可以看到，一开始定义了很多变量，并赋予了默认值：
1.默认目标对象target是传入的第一个参数，索引0；
2.传入的参数从i=1开始，到 i=length位置都是原对象；
3.默认为浅拷贝，deep为false

这时，4个案例里，这些参数分别为：

对深浅拷贝的处理：
如果第一个参数的数据类型是布尔型，则该参数是设置深拷贝，将第一个参数的内容复制给deep变量，target则往后顺延，获得下一个索引（i++）的参数
这里做了一个容错处理，如果extend只传了一个参数true，target就设为空对象{}，一般我们不会这样
源码如下：

这时4个案例的参数分别是这样的：


对输入的参数的数据类型也做了容错处理，如果第一个第二个参数传入的参数既不是布尔，也不是对象，也不是一个函数，仅仅只是一个字符串，自动将目标对象设为空对象{}
如：$.extend('asdf', {name: 'ccy'})，就会自动创建一个空对象，容纳后面的对象，相当于：$.extend( {}, {name: 'ccy'})

当用户需要对jQuery做拓展
我们可以看到，经过深浅拷贝参数的修改，对jQuery函数本身做拓展的两种案例，此时的i值和length值是一致的，我们可以以这个作为匹配条件
这时的目标对象是自己，target = this
对jQuery做拓展，会少传入一个目标对象的参数，因此第一个参数不是Boolean，就是原对象；i本该指向target的下一位，如今前面少了target，i就需要减1

此时四个案例的参数分别是：

第一个问题也解决
来看第二个问题，如何深拷贝，此处我把对象中的键值都先用key和value指代
1.当传入的参数不设置深拷贝，或设置了深拷贝但拷贝的是基本数据类型时，只需遍历对象下的key:value，一一复制到目标对象即可
2.当传入的参数设置了深拷贝，原对象当前key对应的value值不为空，并且（该value值是object或数组）时，进入深拷贝环节
2.1原对象下某value是复杂对象，要合并到目标对象：如果目标对象没有同样的key，或同样的key对应的value值只是基本数据类型，就新起一个空数组或空对象用来接收原对象的合并，即一个空对象与一个有值对象的合并，启动递归extend(deep，空数组/对象，原对象该key下的value)，返回原对象该key下的value的实际数据，存在target[key]下
2.2当原对象和目标对象都有某个key时，记src = 目标对象[key]（第3点中此src=undefined），如果src是数组或者对象，则原对象和目标对象在该key上以src为基础进行合并，又是两个复杂对象的合并，启动递归extend(deep，scr，原对象该key下的value)，返回两者的合并，存储在target[key]下

var obj1 = {
    ccy : 18,
    ccy2 : {sex: 'female'}
};
var obj2 = {
    ccy1 : 19,
    ccy2 : {
        age : 20
    }
}

如果要将obj2深拷贝并合并到obj1，遍历到ccy2时，目标对象obj1也有这个key值，就需要将两个ccy2下的对象合并，即一个对象合并到另一个对象，就可以递归调用extend()方法，遍历obj2的ccy2下的key和value，拷贝到obj1的ccy2上：extend(true, obj1[ccy2], obj2[ccy2])

如果obj1的ccy2仅是字符串，如：ccy2: ‘1234’,obj2的ccy2就直接覆盖掉obj1的ccy2:extend(true, {}, obj2[ccy2])

源码：

for ( ; i < length; i++ ) {

	// Only deal with non-null/undefined values
	// option存储原对象，target代表目标对象
	if ( ( options = arguments[ i ] ) != null ) {

		// Extend the base object
		for ( name in options ) {
			copy = options[ name ];

			// Prevent Object.prototype pollution防止污染对象原型
			// Prevent never-ending loop 防止无限循环
			if ( name === "__proto__" || target === copy ) {
				continue;
			}

			// Recurse if we're merging plain objects or arrays 深拷贝对象或数组
			if ( deep && copy && ( jQuery.isPlainObject( copy ) ||
				( copyIsArray = Array.isArray( copy ) ) ) ) {
				src = target[ name ];

				// Ensure proper type for the source value
				if ( copyIsArray && !Array.isArray( src ) ) {
					clone = []; //新起一个空数组，接收原对象该name的合并
				} else if ( !copyIsArray && !jQuery.isPlainObject( src ) ) {
					clone = {};//新起一个空对象，接收原对象该name的合并
				} else {
					clone = src;//不覆盖、不新创建，在目标的基础上合并
				}
				copyIsArray = false;

				// 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;
			}
		}
	}
}

从i开始，遍历到length结束，当i指向的参数不为null时进入拷贝，遍历当前对象下所有内容
拿第一个案例来看，

i此时指向obj2，遍历obj2下所有的内容，第一次是ccy1，第二次是ccy2，我之前的解说用key，源码用name

为防止无限循环的情况，如：

var a = {}
var b = {name: a}
$.extend(a, b)

这样获得的a里就有无限个{name:{name:…}}

所以先将当前原对象b的单个数据b[name]保存下来，与目标对象a对比，如果b[name] === a，就会出现无限循环，此次循环就结束，进入下一轮
如果只是一个空的jQuery对象，也结束本轮循环，进入下一轮

第一个案例中，不设置深拷贝，所有数据不进入深拷贝代码区，直接进入else if部分，赋值即可

第二个案例$.extend( true, obj1, obj2);，设置了深拷贝，目标对象是obj1，原对象是obj2
遍历obj2下的key:value，第一个key:vakue是ccy1 : 19，由于是拷贝的基本数据类型，所以也进入了else if部分，直接拷贝；第二个拷贝的是对象，进入深拷贝部分的代码，obj2[‘ccy2’]是对象类型，obj1中没有ccy2的key，所以
clone = {}; ，用递归来复制obj2[‘ccy2’]下具体的内容：

target[name] = jQuery.extend(deep, clone, option[name])

还有两个案例同理