本章节分享一段代码实例,它实现了对象合并的效果。
其实模拟子jquery的源码,当然比源码稍微精简一下,具有一定的实用效果。
下面就给出代码,并进行一定的分析,感兴趣的朋友可以做一下参考。
关于对象合并更多内容可以参阅javascript深度拷贝和浅拷贝简单介绍一章节。
代码实例如下:
(function () { var Q= (function () { var Q = function () { return Q.fn.init(); }; Q.fn = Q.prototype = { init: function () { return this; } }; Q.extend = Q.fn.extend = function () { var options, name, src, copy, target = arguments[0] || {}, index = 1, length = arguments.length; if (length === index) { target = this; --index; } for (; index < length; index++) { if ((options = arguments[index]) != null) { for (name in options) { src = target[name]; copy = options[name]; if (src === copy) { continue; } if (copy !== undefined) { target[name] = copy; } } } } return target; } return Q; })(); window.Q = window.$ = Q(); })();
上面的代码可以实现对象的合并拷贝效果,下面就做一下代码注释:
一.代码注释:
(1).(function () {})(),这是一个匿名自执行函数。
(2).var Q= (function () {})(),这也是一个匿名自执行函数,会返回一个值并赋值给变量Q,返回值是一个函数对象。
(3).var Q = function () {
return Q.fn.init();
},声明一个函数,返回值是一个Q.fn.init()方法的返回值,通常init()函数式进行一些初始化操作的,这里暂且不管。
(4).Q.fn = Q.prototype = {
init: function () {
return this;
}
},Q.fn指向的是Q的圆形对象,原型对象中有一个init()方法,返回值是this。
(5).Q.extend = Q.fn.extend = function () {},为Q函数度对象本身和Q函数的原型添加一个extend方法。
(6).var options, name, src, copy,声明的这几个变量的作用后面会介绍。
(7).target = arguments[0] || {},将函数的第一个参数赋值给变量target中,如果不存在,那么赋值为{}。
其他对象会被合并到target对象之上。
(8).index = 1, length = arguments.length,声明一个变量赋值为1,并且将传递的实参数量存储在变量length中。
(9).if (length === index) {
target = this;
--index;
},如果length值等于index值,其实这种情况也就出现在只有一个参数的时候。
于是就将target赋值为this,这个this也许是Q本身,也许是Q的对象实例。
最后index的值减1。
这个语句的作用其实就是判断如果只有一个参数,例如Q.extend(obj),就会将obj合并到Q对象本身。
(10).for (; index < length; index++) {},使用for循环进行遍历操作。
(11).if ((options = arguments[index]) != null) ,判断 arguments[index]是否等于null。
(12).for (name in options) {
src = target[name];
copy = options[name];
if (src === copy) {
continue;
}
if (copy !== undefined) {
target[name] = copy;
}
},如果arguments[index]不等于null,也就是传递至了,就进行遍历操作。
判断当前对象是否具有指定的属性,如果有,略过,如果没有,那么就添加此属性。
(13).return target,返回合并后的对象。
二.相关阅读:
(1).prototype可以参阅javascript prototype原型一章节。
(2).arguments可以参阅javascript arguments一章节。
(3).===可以参阅javascript的三个等号(===)一章节。
javascript 对象合并代码实例简单分析,这样的场景在实际项目中还是用的比较多的,关于javascript 对象合并代码实例简单分析就介绍到这了。
javascript 对象合并代码实例简单分析属于前端实例代码,有关更多实例代码大家可以查看。
本文地址: http://www.zzsi.net/code/web/98407.html
本站部分资源来源与网络,仅供学习参考使用,请勿商用,如侵犯了您的权益,请联系我们删除。