javascript 对象合并代码实例简单分析

吐槽君 分类:实例代码

本章节分享一段代码实例,它实现了对象合并的效果。

其实模拟子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 对象合并代码实例简单分析属于前端实例代码,有关更多实例代码大家可以查看

一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu

回复

我来回复
  • 暂无回复内容