jQuery.extend()的实现方式详解及实例


Posted in Javascript onJune 29, 2013
<script type="text/javascript" src="jquery-1.5.2.js"></script>
<script>
obj1 = { a : 'a', b : 'b' };
obj2 = {  x : { xxx : 'xxx', yyy : 'yyy' },  y : 'y' };
$.extend(true, obj1, obj2);
alert(obj1.x.xxx);  // 得到"xxx"
obj2.x.xxx = 'zzz';
alert(obj2.x.xxx);  // 得到"zzz"
alert(obj1.x.xxx);  // 得带"xxx"
</script>

$.extend(true, obj1, obj2)表示以obj2中的属性扩展对象obj1,第一个参数设为true表示深复制。
虽然obj1中原来没有"x"属性,但经过扩展后,obj1不但具有了"x"属性,而且对obj2中的"x"属性的修改也不会影响到obj1中"x"属性的值,这就是所谓的“深复制”了。

浅复制的实现

如果仅仅需要实现浅复制,可以采用类似下面的写法:

$ = {
     extend : function(target, options) {
        for (name in options) {
            target[name] = options[name];
        }
        return target;
    }
};

也就是简单地将options中的属性复制到target中。我们仍然可以用类似的代码进行测试,但得到的结果有所不同(假设我们的js命名为“jquery-extend.js”):
<script type="text/javascript" src="jquery-extend.js"></script>
<script>
obj1 = { a : 'a', b : 'b' };
obj2 = {  x : { xxx : 'xxx', yyy : 'yyy' },  y : 'y' };
$.extend(obj1, obj2);
alert(obj1.x.xxx);  // 得到"xxx"
obj2.x.xxx = 'zzz';
alert(obj2.x.xxx);  // 得到"zzz"
alert(obj1.x.xxx);  // 得带"zzz"
</script>

obj1中具有了"x"属性,但这个属性是一个对象,对obj2中的"x"的修改也会影响到obj1,这可能会带来难以发现的错误。

深复制的实现

如果我们希望实现“深复制”,当所复制的对象是数组或者对象时,就应该递归调用extend。如下代码是“深复制”的简单实现:

$ = {
 extend : function(deep, target, options) {
  for (name in options) {
   copy = options[name];
   if (deep && copy instanceof Array) {
                target[name] = $.extend(deep, [], copy);
            } else if (deep && copy instanceof Object) {
                target[name] = $.extend(deep, {}, copy);
   } else {
    target[name] = options[name];
   }
  }
  return target;
 }
};

具体分为三种情况:
1. 属性是数组时,则将target[name]初始化为空数组,然后递归调用extend;
2. 属性是对象时,则将target[name]初始化为空对象,然后递归调用extend;
3. 否则,直接复制属性。

测试代码如下:

<script type="text/javascript" src="jquery-extend.js"></script>
<script>
obj1 = { a : 'a', b : 'b' };
obj2 = {  x : { xxx : 'xxx', yyy : 'yyy' },  y : 'y' };
$.extend(true, obj1, obj2);
alert(obj1.x.xxx);  // 得到"xxx"
obj2.x.xxx = 'zzz';
alert(obj2.x.xxx); // 得到"zzz"
alert(obj1.x.xxx); // 得到"xxx"
</script>

现在如果指定为深复制的话,对obj2的修改将不会对obj1产生影响了;不过这个代码还存在一些问题,比如“instanceof Array”在IE5中可能存在不兼容的情况。jQuery中的实现实际上会更复杂一些。

更完整的实现

下面的实现与jQuery中的extend()会更接近一些:

$ = function() {
    var copyIsArray,
        toString = Object.prototype.toString,
        hasOwn = Object.prototype.hasOwnProperty;
    class2type = {
        '[object Boolean]' : 'boolean',
        '[object Number]' : 'number',
        '[object String]' : 'string',
        '[object Function]' : 'function',
        '[object Array]' : 'array',
        '[object Date]' : 'date',
        '[object RegExp]' : 'regExp',
        '[object Object]' : 'object'
    },
    type = function(obj) {
        return obj == null ? String(obj) : class2type[toString.call(obj)] || "object";
    },
    isWindow = function(obj) {
        return obj && typeof obj === "object" && "setInterval" in obj;
    },
    isArray = Array.isArray || function(obj) {
        return type(obj) === "array";
    },
    isPlainObject = function(obj) {
        if (!obj || type(obj) !== "object" || obj.nodeType || isWindow(obj)) {
            return false;
        }
        if (obj.constructor && !hasOwn.call(obj, "constructor")
                && !hasOwn.call(obj.constructor.prototype, "isPrototypeOf")) {
            return false;
        }
        var key;
        for (key in obj) {
        }
        return key === undefined || hasOwn.call(obj, key);
    },
    extend = function(deep, target, options) {
        for (name in options) {
            src = target[name];
            copy = options[name];
            if (target === copy) { continue; }
            if (deep && copy
                    && (isPlainObject(copy) || (copyIsArray = isArray(copy)))) {
                if (copyIsArray) {
                    copyIsArray = false;
                    clone = src && isArray(src) ? src : [];
                } else {
                    clone = src && isPlainObject(src) ? src : {};
                }
                target[name] = extend(deep, clone, copy);
            } else if (copy !== undefined) {
                target[name] = copy;
            }
        }
        return target;
    };
    return { extend : extend };
}();

首先是 $ =  function(){...}();这种写法,可以理解为与下面的写法类似:
func = function(){...};
$ =  func();

也就是立即执行函数,并将结果赋给$。这种写法可以利用function来管理作用域,避免局部变量或局部函数影响全局域。另外,我们只希望使用者调用$.extend(),而将内部实现的函数隐藏,因此最终返回的对象中只包含extend:
return { extend : extend };

接下来,我们看看extend函数与之前的区别,首先是多了这句话:
if (target === copy) { continue; }

这是为了避免无限循环,要复制的属性copy与target相同的话,也就是将“自己”复制为“自己的属性”,可能导致不可预料的循环。

然后是判断对象是否为数组的方式:

   type = function(obj) {
        return obj == null ? String(obj) : class2type[toString.call(obj)] || "object";
   },
   isArray = Array.isArray || function(obj) {
        return type(obj) === "array";
    }

如果浏览器有内置的Array.isArray 实现,就使用浏览器自身的实现方式,否则将对象转为String,看是否为"[object Array]"。

最后逐句地看看isPlainObject的实现:

if (!obj || type(obj) !== "object" || obj.nodeType || isWindow(obj)) {
    return false;
}

如果定义了obj.nodeType,表示这是一个DOM元素;这句代码表示以下四种情况不进行深复制:
1. 对象为undefined;
2. 转为String时不是"[object Object]";
3. obj是一个DOM元素;
4. obj是window。
之所以不对DOM元素和window进行深复制,可能是因为它们包含的属性太多了;尤其是window对象,所有在全局域声明的变量都会是其属性,更不用说内置的属性了。

接下来是与构造函数相关的测试:

if (obj.constructor && !hasOwn.call(obj, "constructor")
                && !hasOwn.call(obj.constructor.prototype, "isPrototypeOf")) {
        return false;
    }

如果对象具有构造函数,但却不是自身的属性,说明这个构造函数是通过prototye继承来的,这种情况也不进行深复制。这一点可以结合下面的代码结合进行理解:
        var key;
        for (key in obj) {
        }
        return key === undefined || hasOwn.call(obj, key);

这几句代码是用于检查对象的属性是否都是自身的,因为遍历对象属性时,会先从自身的属性开始遍历,所以只需要检查最后的属性是否是自身的就可以了。
这说明如果对象是通过prototype方式继承了构造函数或者属性,则不对该对象进行深复制;这可能也是考虑到这类对象可能比较复杂,为了避免引入不确定的因素或者为复制大量属性而花费大量时间而进行的处理,从函数名也可以看出来,进行深复制的只有"PlainObject"。
如果我们用如下代码进行测试:
<script type="text/javascript" src="jquery-1.5.2.js"></script>
<script>
function O() {
 this.yyy = 'yyy';
}
function X() {
 this.xxx = 'xxx';
}
X.prototype = new O();
x = new X();
obj1 = { a : 'a', b : 'b' };
obj2 = { x : x };
$.extend(true, obj1, obj2);
alert(obj1.x.yyy);  // 得到"xxx"
obj2.x.yyy = 'zzz';
alert(obj1.x.yyy);  // 得到"zzz"
</script>

可以看到,这种情况是不进行深复制的。
总之,jQuery中的extend()的实现方式,考虑了兼容浏览器的兼容,避免性能过低,和避免引入不可预料的错误等因素。
Javascript 相关文章推荐
jquery下利用jsonp跨域访问实现方法
Jul 29 Javascript
setTimeout自动触发一个js的方法
Jan 15 Javascript
jQuery.form插件的使用及跨域异步上传文件
Apr 27 Javascript
javascript实现文字无缝滚动
Dec 27 Javascript
微信小程序 MD5加密登录密码详解及实例代码
Jan 12 Javascript
js 性能优化之快速响应的用户界面
Feb 15 Javascript
图片加载完成再执行事件的实例
Nov 16 Javascript
vue.js开发实现全局调用的MessageBox组件实例代码
Nov 22 Javascript
bootstrap响应式工具使用详解
Nov 29 Javascript
express+mockjs实现模拟后台数据发送功能
Jan 07 Javascript
浅谈Node.js 沙箱环境
May 15 Javascript
JavaScript快速调试的两个技巧
Nov 04 Javascript
JS 退出系统并跳转到登录界面的实现代码
Jun 29 #Javascript
JavaScript基础篇之变量作用域、传值、传址的简单介绍与实例
Jun 29 #Javascript
JS验证日期的格式YYYY-mm-dd 具体实现
Jun 29 #Javascript
js操作checkbox遇到的问题解决
Jun 29 #Javascript
JavaScript自执行闭包的小例子
Jun 29 #Javascript
JS自动适应的图片弹窗实例
Jun 29 #Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
Jun 28 #Javascript
You might like
php实现文件下载代码分享
2014/08/19 PHP
php实现将上传word文件转为html的方法
2015/06/03 PHP
初识通用数据库操作类――前端easyui-datagrid,form(php)
2015/07/31 PHP
PHP实现的堆排序算法详解
2017/08/17 PHP
JavaScript实现自己的DOM选择器原理及代码
2013/03/04 Javascript
JavaScript中的常见问题解决方法(乱码,IE缓存,代理)
2013/11/28 Javascript
ECMAScript5(ES5)中bind方法使用小结
2015/05/07 Javascript
js由下向上不断上升冒气泡效果实例
2015/05/07 Javascript
jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
2015/12/31 Javascript
基于jquery编写分页插件
2016/03/07 Javascript
javaScript事件机制兼容【详细整理】
2016/07/23 Javascript
BootStrap+Mybatis框架下实现表单提交数据重复验证
2017/03/23 Javascript
详解微信小程序 登录获取unionid
2017/06/27 Javascript
layer.close()关闭进度条和Iframe窗的方法
2018/08/17 Javascript
详解ES6 系列之异步处理实战
2018/10/26 Javascript
JavaScript实现图片放大镜效果
2019/06/27 Javascript
javascript实现滚轮轮播图片
2020/12/13 Javascript
Vuex实现简单购物车
2021/01/10 Vue.js
[03:02]辉夜杯主赛事第二日 每日之星
2015/12/27 DOTA
[01:00]DOTA2 store: Collection of Artisan's Wonders
2015/08/12 DOTA
[01:08:33]OG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[02:50]【扭转乾坤,只此一招】DOTA2永雾林渊版本开启新篇章
2020/12/22 DOTA
Python中用Descriptor实现类级属性(Property)详解
2014/09/18 Python
pymongo实现控制mongodb中数字字段做加法的方法
2015/03/26 Python
django允许外部访问的实例讲解
2018/05/14 Python
selenium + python 获取table数据的示例讲解
2018/10/13 Python
python中将正则过滤的内容输出写入到文件中的实例
2018/10/21 Python
python实现简单五子棋游戏
2019/06/18 Python
瑞典最大的儿童用品网上商店:pinkorblue.se
2021/03/09 全球购物
学术会议欢迎词
2014/01/09 职场文书
安全标准化实施方案
2014/02/20 职场文书
月度优秀员工获奖感言
2014/08/16 职场文书
2015年幼儿园后勤工作总结
2015/04/25 职场文书
幼儿园教师师德承诺书
2015/04/28 职场文书
离职员工给领导和同事的感谢信
2015/11/03 职场文书
MySQL中几种插入和批量语句实例详解
2021/09/14 MySQL