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

};

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;//不覆盖、不新创建，在目标的基础上合并
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

分享一套阿里大牛整理的前端资料给大家，点击前端校招面试题精编解析大全即可免费下载

❤️ 谢谢支持，喜欢的话别忘了 关注、点赞哦。

来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！**

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

[外链图片转存中…(img-ptMwM0e0-1713726816205)]

最后

分享一套阿里大牛整理的前端资料给大家，点击前端校招面试题精编解析大全即可免费下载

❤️ 谢谢支持，喜欢的话别忘了 关注、点赞哦。