ExtJS / Javascript – Deep Copy

We often need to do deep copies of Javascript objects so that we can modify the copy without it affecting the original. I have created the following clone function that does this quickly and easily; however, it does have limitations. If you clone an instance of, lets say, an Ext.Panel, Javascript’s instanceof function will fail to recognize it as an instance of Ext.Panel. From what I can gather, this is because the Javascript engine has some kind of internal reference to an object’s constructor and instanceof doesn’t actually look at the constructor we are able to modify… lets look at an example so it is more clear:

This will output:

Check #3 fails even though the prototype chain is correct according to check #4. It appears that instanceof relies on some internal magic to do its detection. Once an object is instantiated, it is always a type of that object and cannot be changed. Since our clone function creates an instance of Object it is forever an instanceof Object, even though we changed its prototype chain to match that of an Ext.Panel. I just don’t see another way of doing this. The limitation is not crippling, but you should be cognizant of it.

And without further adieu:


  1. You might also take a look at the Component method cloneConfig() which will make a clone of a Component using the source component’s original config (and also allows new overrides).

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">