$.extend 的一個小問題_jquery

最近一直在搞行動端，也由於自己對jQuery比較熟悉，再加上Zepto提供了跟jQuery一樣的API，所以就選擇了Zepto作為開發框架。

由於是行動端開發，所以也套用了一些ES5新增的API，像是forEach，以下就是我寫的程式碼的一些範例：

list.forEach(function(v) {
 return !!v;
})

我天真的以為forEach就跟jQuery的each一樣，只要我的回傳值為false，它就會中斷循環，於是，類似這樣的遍歷程式碼寫了不少（真的是懶得為每個遍歷去宣告變數啊）

寫了一段時間之後我突然發現，forEach的回呼函數並不能中斷循環，於是，我便在Array.prototype上面掛了個函數，然後replaceAll，完美。

 Array.prototype.foreach = function(fn) {
  var i = 0, len = this.length;

  for (; i < len; ++i) {

    if (fn(this[i], i) === false) {
     break;
    }
   }
 };

直到有一天，我想做點優化，考慮到客戶端需要保存的json過大（沒騙你，最大可以去到20M），stringify的時候太過耗時，會阻塞UI，所以我就用Worker在後台開個線程，專門用來stringify這個json，類似這樣子：

複製程式碼 程式碼如下:

addEventListener("message", function(e) {
  var data = e.data;
  data = JSON.stringify(data);
  postMessage(data);
}, false);

posMesage：

複製程式碼 程式碼如下:

worker.postMessage(data)

但是控制台卻輸出了以下的錯誤訊息：

複製程式碼 程式碼如下:

Uncaught DataCloneError: Failed to execute 'postMessage' on 'Worker': An object could not be cloned.

坑爹，這天殺的為什麼連個json都複製不了，於是乎，我開始尋找原因，讓我發現了我的json裡面有這個東西：

天啊，這是什麼鬼，這個foreach為什麼跑進來了，我看了一下編輯器裡面的$.extend(true, {}, obj)正在那里瑟瑟發抖，我不禁懷疑，不會是你丫的在作怪吧。於是乎，我查看了一下$.extend的源碼：

 function extend(target, source, deep) {
  for (key in source)
   if (deep && (isPlainObject(source[key]) || isArray(source[key]))) {
    if (isPlainObject(source[key]) && !isPlainObject(target[key]))
     target[key] = {}
    if (isArray(source[key]) && !isArray(target[key]))
     target[key] = []
    extend(target[key], source[key], deep)
   }
   else if (source[key] !== undefined) target[key] = source[key]
 }

 // Copy all but undefined properties from one or more
 // objects to the `target` object.
 $.extend = function(target){
  var deep, args = slice.call(arguments, 1)
  if (typeof target == 'boolean') {
   deep = target
   target = args.shift()
  }
  args.forEach(function(arg){ extend(target, arg, deep) })
  return target
 }

我的天啊，還真是這貨在作怪啊，遍歷數組用for...in..也就算了，但是else if (source[key] !== undefined) target[key] = source[ key] 這裡的條件能不能嚴肅點啊，加個hasOwnProperty檢查一下不會浪費多少時間吧。淚流滿面

被Zepto坑了之後，我立刻去找jQuery投訴，希望它能安慰我一下，沒想到：

jQuery.extend = jQuery.fn.extend = function() {
  var options, name, src, copy, copyIsArray, clone,
    target = arguments[0] || {},
    i = 1,
    length = arguments.length,
    deep = false;

  // Handle a deep copy situation
  if ( typeof target === "boolean" ) {
    deep = target;
    target = arguments[1] || {};
    // skip the boolean and the target
    i = 2;
  }

  // Handle case when target is a string or something (possible in deep copy)
  if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
    target = {};
  }

  // extend jQuery itself if only one argument is passed
  if ( length === i ) {
    target = this;
    --i;
  }

  for ( ; i < length; i++ ) {
    // Only deal with non-null/undefined values
    if ( (options = arguments[ i ]) != null ) {
      // Extend the base object
      for ( name in options ) {
        src = target[ name ];
        copy = options[ name ];

        // Prevent never-ending loop
        if ( target === copy ) {
          continue;
        }

        // Recurse if we're merging plain objects or arrays
        if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
          if ( copyIsArray ) {
            copyIsArray = false;
            clone = src && jQuery.isArray(src) &#63; src : [];

          } else {
            clone = src && jQuery.isPlainObject(src) &#63; src : {};
          }

          // Never move original objects, clone them
          target[ name ] = jQuery.extend( deep, clone, copy );

        // Don't bring in undefined values
        } else if ( copy !== undefined ) {
          target[ name ] = copy;
        }
      }
    }
  }

  // Return the modified object
  return target;
};

這貨也是 else if ( copy !== undefined ) {target[ name ] = copy;} 就交代了，我的親娘啊。

最後迫不得已，只好自己寫了一個。

總結：當你要使用$.extend的時候，不要輕易在Array.prototype和Object.prototype掛上你自訂的屬性和方法，不然，你以後可能要去找bug了。

以上所述就是本文的全部內容了，希望大家能夠喜歡。