(jQuery||Zepto).extend 的一个小问题

最近一直在搞移动端，也由于自己对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) ? src : [];



                    } else {

                        clone = src && jQuery.isPlainObject(src) ? 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了。