Create class dynamically in javascript

Question

If I define and create instance of class dynamically like below:

var type = 'Animal';
window[type] = function() {};
var animal1 = new window[type]();
var animal2 = new Animal();

Then animal1 will be shown in Chrome debugger as instance of Object (but with correct properties) while animal2 will have type window.Animal.

When Animal is defined statically:

function Animal() {}

both objects are seen as instances of Animal.

How can I achieve this while defining functions dynamically (without using eval) ?

Cannot reproduce. i.imgur.com/68DUI.png .. for me they're both shown as instances of window.Animal — James
– James, Commented Aug 29, 2012 at 15:44
My bad, I've oversimplified. Seems like you need to have the type name in variable to reproduce. Can you try again ? — Marcin Wisnicki
– Marcin Wisnicki, Commented Aug 29, 2012 at 16:48
Also cannot reproduce, after your update. For me, both variables have type window.(anonymous function). — Steve Campbell
– Steve Campbell, Commented Aug 29, 2012 at 17:19
I think this is an interesting phenomenon, but like Steve, I can't reproduce your first case. The second case (static vs dynamic definitions) I am seeing, and I think it's interesting. — apsillers
– apsillers, Commented Aug 29, 2012 at 17:32

apsillers · Accepted Answer · 2012-08-29 18:21:49Z

The cosmetics of what the Chrome console shows you seem to be determined by:

the name property of the constructor function, or
the variable name that the constructor function is initially assigned to (if name is not set).

Case #1:

var ClassA = function ClassB() {};
new ClassA();
// reports a `ClassB` object

The constructor function has its name property set to ClassB, so that's what Chrome reports. A function's name is only settable at definition time, so function funcName(){} sets the name, whereas func=function(){}; f.name='funcName'; does not.

Case 2:

var ClassA = function() {};
ClassB = ClassA;
new ClassB();
// reports a `ClassA` object

The constructor was initially assigned to ClassA, so that name seems to be burned into the constructor function, even if it is used under another variable alias. In fact, doing delete window.ClassA does not stop newly constructed objects from reporting themselves as ClassA objects:

var ClassA = function() {};
ClassB = ClassA;
delete window.ClassA;
new ClassB();
// still reports a `ClassA` object
// even though `ClassA` is no longer a defined variable name

This is what is happening in your "dynamically defined" case. The initial window[type] = function() {}; line is permanently marking that constructor's resulting object to identify as type "anonymous function that's a property of window".

Note that these console cosmetics will not affect the functionality of your program, as all object/prototype functionality still works as expected.

Collectives™ on Stack Overflow

Create class dynamically in javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related