jQuery.extend使用自引用引发堆栈溢出异常

Question

I was working on a JavaScript application when I noticed that: using jQuery.extend function has a special behaviour when used with object that have a reference to them self.

If you run this script:

var x = new (function(){ this.self = this });
var y = {}; y.self = y;

console.log($.extend(true, {}, x))
console.log($.extend(true, {}, y))

You will notice that the extending with 'x' works fine, while extending with 'y' throws a stack overflow exception.

Can you explain this behaviour?

Answer 1

The difference is whether the object is a plain object or not. x had a constructor; so when extend comes to the value of self , I suppose jQuery doesn't want to deep copy it, since it doesn't know that it can recreate it properly, and ends up with just a plain, non-deep copy for that attribute.

y , on the other hand, checks out as a POJO, and extend thinks it's okay to deep-copy it, which results in the infinite recursion.

Look at extend code , where it says " // Recurse if we're merging plain objects or arrays "

Answer 2

jQuery's .extend() does a deep copy of plain objects and arrays, but not a deep copy of function objects.

Since x is a function object, it doesn't do a deep copy of that.

But since y is a plain object, it does try to do a deep copy and runs into the infinite loop.

From the jQuery .extend() source:

// 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;
}

You can see that it is checking to see if the property is a plain object or an array. A function object will not be either.