javascript 物件合併程式碼例項簡單分析

本章節分享一段程式碼例項，它實現了物件合併的效果。

其實模擬子jquery的原始碼，當然比原始碼稍微精簡一下，具有一定的實用效果。

下面就給出程式碼，並進行一定的分析，感興趣的朋友可以做一下參考。

關於物件合併更多內容可以參閱javascript深度拷貝和淺拷貝簡單介紹一章節。

程式碼例項如下:

[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的三個等號（===）一章節。