从零实现jQuery的extend
前言
jQuery 的 extend 是 jQuery 中应用非常多的一个函数,今天我们一边看 jQuery 的 extend 的特性,一边实现一个 extend!
extend 基本用法
先来看看 extend 的功能,引用 jQuery 官网:
Merge the contents of two or more objects together into the first object.
翻译过来就是,合并两个或者更多的对象的内容到第一个对象中。
让我们看看 extend 的用法:
jQuery.extend( target [, object1 ] [, objectN ] )
第一个参数 target,表示要拓展的目标,我们就称它为目标对象吧。
后面的参数,都传入对象,内容都会复制到目标对象中,我们就称它们为待复制对象吧。
举个例子:
var obj1 = {
a: 1,
b: { b1: 1, b2: 2 }
}; var obj2 = {
b: { b1: 3, b3: 4 },
c: 3
}; var obj3 = {
d: 4
} console.log($.extend(obj1, obj2, obj3)); // {
// a: 1,
// b: { b1: 3, b3: 4 },
// c: 3,
// d: 4
// }
当两个对象出现相同字段的时候,后者会覆盖前者,而不会进行深层次的覆盖。
extend 第一版
结合着上篇写得 《JavaScript专题之深浅拷贝》,我们尝试着自己写一个 extend 函数:
// 第一版
function extend() {
var name, options, copy;
var length = arguments.length;
var i = 1;
var target = arguments[0]; for (; i < length; i++) {
options = arguments[i];
if (options != null) {
for (name in options) {
copy = options[name];
if (copy !== undefined){
target[name] = copy;
}
}
}
} return target;
};
extend 深拷贝
那如何进行深层次的复制呢?jQuery v1.1.4 加入了一个新的用法:
jQuery.extend( [deep], target, object1 [, objectN ] )
也就是说,函数的第一个参数可以传一个布尔值,如果为 true,我们就会进行深拷贝,false 依然当做浅拷贝,这个时候,target 就往后移动到第二个参数。
还是举这个例子:
var obj1 = {
a: 1,
b: { b1: 1, b2: 2 }
}; var obj2 = {
b: { b1: 3, b3: 4 },
c: 3
}; var obj3 = {
d: 4
} console.log($.extend(true, obj1, obj2, obj3)); // {
// a: 1,
// b: { b1: 3, b2: 2, b3: 4 },
// c: 3,
// d: 4
// }
因为采用了深拷贝,会遍历到更深的层次进行添加和覆盖。
extend 第二版
我们来实现深拷贝的功能,值得注意的是:
- 需要根据第一个参数的类型,确定 target 和要合并的对象的下标起始值。
- 如果是深拷贝,根据 copy 的类型递归 extend。
// 第二版
function extend() {
// 默认不进行深拷贝
var deep = false;
var name, options, src, copy;
var length = arguments.length;
// 记录要复制的对象的下标
var i = 1;
// 第一个参数不传布尔值的情况下,target默认是第一个参数
var target = arguments[0] || {};
// 如果第一个参数是布尔值,第二个参数是才是target
if (typeof target == 'boolean') {
deep = target;
target = arguments[i] || {};
i++;
}
// 如果target不是对象,我们是无法进行复制的,所以设为{}
if (typeof target !== 'object') {
target = {}
} // 循环遍历要复制的对象们
for (; i < length; i++) {
// 获取当前对象
options = arguments[i];
// 要求不能为空 避免extend(a,,b)这种情况
if (options != null) {
for (name in options) {
// 目标属性值
src = target[name];
// 要复制的对象的属性值
copy = options[name]; if (deep && copy && typeof copy == 'object') {
// 递归调用
target[name] = extend(deep, src, copy);
}
else if (copy !== undefined){
target[name] = copy;
}
}
}
} return target;
};
在实现上,核心的部分还是跟上篇实现的深浅拷贝函数一致,如果要复制的对象的属性值是一个对象,就递归调用 extend。不过 extend 的实现中,多了很多细节上的判断,比如第一个参数是否是布尔值,target 是否是一个对象,不传参数时的默认值等。
接下来,我们看几个 jQuery 的 extend 使用效果:
target 是函数
在我们的实现中,typeof target
必须等于 object
,我们才会在这个 target
基础上进行拓展,然而我们用 typeof
判断一个函数时,会返回function
,也就是说,我们无法在一个函数上进行拓展!
什么,我们还能在一个函数上进行拓展!!
当然啦,毕竟函数也是一种对象嘛,让我们看个例子:
function a() {} a.target = 'b'; console.log(a.target); // b
实际上,在 underscore 的实现中,underscore 的各种方法便是挂在了函数上!
所以在这里我们还要判断是不是函数,这时候我们便可以使用《JavaScript专题之类型判断(上)》中写得 isFunction 函数
我们这样修改:
if (typeof target !== "object" && !isFunction(target)) {
target = {};
}
类型不一致
其实我们实现的方法有个小 bug ,不信我们写个 demo:
var obj1 = {
a: 1,
b: {
c: 2
}
} var obj2 = {
b: {
c: [5], }
} var d = extend(true, obj1, obj2)
console.log(d);
我们预期会返回这样一个对象:
{
a: 1,
b: {
c: [5]
}
}
然而返回了这样一个对象:
{
a: 1,
b: {
c: {
0: 5
}
}
}
让我们细细分析为什么会导致这种情况:
首先我们在函数的开始写一个 console 函数比如:console.log(1),然后以上面这个 demo 为例,执行一下,我们会发现 1 打印了三次,这就是说 extend 函数执行了三遍,让我们捋一捋这三遍传入的参数:
第一遍执行到递归调用时:
var src = { c: 2 };
var copy = { c: [5]}; target[name] = extend(true, src, copy);
第二遍执行到递归调用时:
var src = 2;
var copy = [5]; target[name] = extend(true, src, copy);
第三遍进行最终的赋值,因为 src 是一个基本类型,我们默认使用一个空对象作为目标值,所以最终的结果就变成了对象的属性!
为了解决这个问题,我们需要对目标属性值和待复制对象的属性值进行判断:
判断目标属性值跟要复制的对象的属性值类型是否一致:
如果待复制对象属性值类型为数组,目标属性值类型不为数组的话,目标属性值就设为 []
如果待复制对象属性值类型为对象,目标属性值类型不为对象的话,目标属性值就设为 {}
结合着《JavaScript专题之类型判断(下)》中的 isPlainObject 函数,我们可以对类型进行更细致的划分:
var clone, copyIsArray; ... if (deep && copy && (isPlainObject(copy) ||
(copyIsArray = Array.isArray(copy)))) { if (copyIsArray) {
copyIsArray = false;
clone = src && Array.isArray(src) ? src : []; } else {
clone = src && isPlainObject(src) ? src : {};
} target[name] = extend(deep, clone, copy); } else if (copy !== undefined) {
target[name] = copy;
}
循环引用
实际上,我们还可能遇到一个循环引用的问题,举个例子:
var a = {name : b};
var b = {name : a}
var c = extend(a, b);
console.log(c);
我们会得到一个可以无限展开的对象,类似于这样:
为了避免这个问题,我们需要判断要复制的对象属性是否等于 target,如果等于,我们就跳过:
...
src = target[name];
copy = options[name]; if (target === copy) {
continue;
}
...
如果加上这句,结果就会是:
{name: undefined}
最终代码
// isPlainObject 函数来自于 [JavaScript专题之类型判断(下) ](https://github.com/mqyqingfeng/Blog/issues/30)
var class2type = {};
var toString = class2type.toString;
var hasOwn = class2type.hasOwnProperty; function isPlainObject(obj) {
var proto, Ctor;
if (!obj || toString.call(obj) !== "[object Object]") {
return false;
}
proto = Object.getPrototypeOf(obj);
if (!proto) {
return true;
}
Ctor = hasOwn.call(proto, "constructor") && proto.constructor;
return typeof Ctor === "function" && hasOwn.toString.call(Ctor) === hasOwn.toString.call(Object);
} function extend() {
// 默认不进行深拷贝
var deep = false;
var name, options, src, copy, clone, copyIsArray;
var length = arguments.length;
// 记录要复制的对象的下标
var i = 1;
// 第一个参数不传布尔值的情况下,target 默认是第一个参数
var target = arguments[0] || {};
// 如果第一个参数是布尔值,第二个参数是 target
if (typeof target == 'boolean') {
deep = target;
target = arguments[i] || {};
i++;
}
// 如果target不是对象,我们是无法进行复制的,所以设为 {}
if (typeof target !== "object" && !isFunction(target)) {
target = {};
} // 循环遍历要复制的对象们
for (; i < length; i++) {
// 获取当前对象
options = arguments[i];
// 要求不能为空 避免 extend(a,,b) 这种情况
if (options != null) {
for (name in options) {
// 目标属性值
src = target[name];
// 要复制的对象的属性值
copy = options[name]; // 解决循环引用
if (target === copy) {
continue;
} // 要递归的对象必须是 plainObject 或者数组
if (deep && copy && (isPlainObject(copy) ||
(copyIsArray = Array.isArray(copy)))) {
// 要复制的对象属性值类型需要与目标属性值相同
if (copyIsArray) {
copyIsArray = false;
clone = src && Array.isArray(src) ? src : []; } else {
clone = src && isPlainObject(src) ? src : {};
} target[name] = extend(deep, clone, copy); } else if (copy !== undefined) {
target[name] = copy;
}
}
}
} return target;
};
思考题
如果觉得看明白了上面的代码,想想下面两个 demo 的结果:
var a = extend(true, [4, 5, 6, 7, 8, 9], [1, 2, 3]);
console.log(a) // ???
var obj1 = {
value: {
3: 1
}
} var obj2 = {
value: [5, 6, 7], } var b = extend(true, obj1, obj2) // ???
var c = extend(true, obj2, obj1) // ???
从零实现jQuery的extend的更多相关文章
- jquery.fn.extend与jquery.extend--(初体验二)
1.jquery.extend(object); 为扩展jQuery类本身.为类添加新的方法. jquery.fn.extend(object);给jQuery对象添加方法. $.extend({ a ...
- jQuery为开发插件提拱了两个方法:jQuery.fn.extend(); jQuery.extend();
jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(); jQuery.extend(); jQuery.fn jQuery.fn = jQuery.prototype ...
- jQuery的extend方法
jq中的extend在面试中经常会被问道,今天我总结一个下有关于extend的用法三种进行对比,可能不全,希望大家指点, 用法一: $.extend({}) ,为jQuery类添加方法,可以理解为扩 ...
- jQuery.extend和jQuery.fn.extend的区别【转】
解释的很有意思,清晰明了又有趣,转来分享下,哈哈哈 jQuery.extend和jQuery.fn.extend的区别,其实从这两个办法本身也就可以看出来.很多地方说的也不详细.这里详细说说之间的区别 ...
- jQuery原生框架中的jQuery.fn.extend和jQuery.extend
extend 方法在 jQuery 中是一个很重要的方法,jQuey 内部用它来扩展静态方法或实例方法,而且我们开发 jQuery 插件开发的时候也会用到它.但是在内部,是存在 jQuery.fn.e ...
- 理解jquery的$.extend()、$.fn和$.fn.extend()
jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(); jQuery.extend(); jQuery.fn jQuery.fn = jQuery.prototype ...
- 解读jQuery中extend函数
$.extend.apply( null, [ true, { "a" : 1, "b" : 2 } ] );//console.log(window.a); ...
- jQuery的extend方法的深层拷贝
一些东西长时间不用就忘了,比如这个jQuery的extend方法的深层拷贝,今天看单页应用的书的时候,看到entend第一个参数是true,都蒙了.也是,自己的大部分对jQuery的学习知识来自锋利的 ...
- jQuery.fn.extend(object) object中this的指向
看到下面的代码后,一下子懵逼了.这个this指向哪儿去了. jQuery.fn.extend({ check: function() { return this.each(function() { t ...
随机推荐
- Mac打开原生NTFS功能
一.在 terminal 里输入 diskutil list 查看 U 盘的 NAME diskutil list 二.执行以下命令,输入密码 sudo nano /etc/fstab 三.把U盘信息 ...
- GhostScript说明
关于ghostscript(以下简称gs).Gs是一个地下工作者,一般用户不熟悉它,因为它上不和用户直接打交道,下不直接接触打印机.但是在打印工作中它却扮演了极为重要的解色. 一般从用户常见文件如图片 ...
- hdu 1850 题解
题目 题意:n堆扑克牌,每次可以取走一堆中任意张数的扑克牌,问先手胜利第一步有几种可能. 这一题如果除去后面一问就直接问先手赢还是后手赢,这就是一道简单的 $ NIM $ 博弈问题. 定理 $ ...
- Jenkins+Git+Maven+Tomcat详细安装步骤
jenkins安装 jenkins的war包安装 以下war包的安装是直接使用war包内嵌的页面访问,也可以将war包放到tomcat的webapps下通过tomcat访问,在下面的tomcat步骤有 ...
- 12 IO流(九)——装饰流 BufferedInputStream/OutputStream
我们按功能可以将IO流分为节点流与处理流 节点流:可以直接从数据源或目的地读写数据 处理流(装饰流):不直接连接到数据源或目的地,是其他流(必须包含节点流)进行封装.目的主要是简化操作和提高性能. B ...
- Golang_互斥锁
为什么需要锁? 在并发的情况下,多个线程或协程同时去修改一个变量.使用锁能保证在某一时间点内,只有一个协程或线程修改这一变量. 锁的概念就是,我正在处理 a(锁定),你们等着,等我处理完了(解锁),你 ...
- C盘清理、C盘瘦身、省出30G
三招C盘瘦身30G,清理win10系统中虚占C盘空间的三大祸害 1.对C盘进行“磁盘清理” C盘右键->属性->磁盘清理->清理系统文件->勾选“windows更新清理”-&g ...
- DIY一个Web框架
一.前言 二.框架结构及实现流程 三.总结 一.前言 当我们了解了Web应用和Web框架,以及HTTP协议的原理之后,我们可以自己动手DIY一个最简单的WEB框架,以加深对Web框架的理解,并为即将学 ...
- 【雅思】【绿宝书错词本】List13~24
List 13 ❤audacious a.大胆的:有冒险精神的:鲁莽的:厚颜无耻的 ❤tramp v.跋涉:踩踏 n.长途跋涉 ❤lexicographer n.词典编纂者 ❤manipulate v ...
- Java面向对象程序设计----接口
接口:接口是一套规范.一个比抽象类更抽象的类. 接口中只能写抽象方法.接口中没有构造函数接口中的变量:public Stratic final接口怎么来使用(implements)实现接口 接口语法: ...