javascript - Array.prototype 的方法在使用 jQuery.extend 深度克隆后显示为数组的键

Question

假设数组原型(prototype)已通过一些辅助函数进行了增强:

Array.prototype.doSomething = function() { ... }

当我将一个简单的数组注销到控制台时......

console.dir([1,2,3]);

...我得到:

Array [3]
    0: 1
    1: 2
    2: 3
    length: 3
    __proto__: Array[0]
       doSomething: function()

到目前为止一切看起来都很好。

但是一旦我使用 $.extend 深度克隆数组(深度克隆是因为我的实际数据更复杂 - 一个以数组作为属性的对象，但它在任何情况下都会发生)...

$.extend(true, [], [1,2,3]);

我突然明白:

Array [3]
    0: 1
    1: 2
    2: 3
    doSomething: function()     // ???
    length: 3
    __proto__: Array[0]
       doSomething: function() 

看起来原型(prototype)方法已作为数组实例的实际项添加。

JQuery.extend 在复制之前没有测试 hasOwnProperty() 吗？还是我在这里做错了什么？

Answer 1

Does JQuery.extend not test for hasOwnProperty() before copying

不，没有。从源代码来看，它使用 for ... in 循环来迭代正在克隆的任何内容的属性，但在设置属性之前不会执行 hasOwnProperty 检查。

https://github.com/jquery/jquery/blob/7103d8ef47e04a4cf373abee0e8bfa9062fd616f/src/core.js#L120

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;

      // Skip the boolean and the target
      target = arguments[ i ] || {};
      i++;
  }

  // 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 ( i === length ) {
      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;
};

它会影响你的数组数据吗？取决于您如何使用阵列，可能不会。只要使用正确的循环过程，迭代数组元素仍然是相同的。含义为 for(;;)、for ... of 或 .forEach。并且执行 JSON.stringify 仍然会为您提供正确的 JSON。