Another brick in the JS wall

Question

I must confess, JavaScript has -sometimes- strange behaviors.

var Npc = function() {
    this.name='Hello world';
}

Npc.attr='my new attribute';

console.log('>>>>'+Npc.attr);               // my new attribute
console.log('>>>>'+Npc.name);               // '' ????

var data = new Npc();

console.log('>>>>>' + data.attr);           // undefined
console.log('>>>>>' + data.name);           // Hello world

Sounds weird to me. If I can understand the .name difference (instance vs literal), I cannot understand the "attr" behavior.

Is it a COW ? But with the node.js debugger I really see the attr atribute !?

Waw...

`attr` is a property of the constructor function, not of any of the instances created through it. The opposite is true for `name`. — Frédéric Hamidi, Mar 21 '14 at 14:45
What are you asking? This looks like correct behaviour to me. Perhaps you should read the documentation for object creation. "Javascript: the good parts" is a good book on the subject. — Joe, Mar 21 '14 at 14:45
As a C++ programmer, I'm sorry this code sounds strange :) But now thanks to CONSTRUCTIVE answers, I understand. — Stef, Mar 21 '14 at 14:49
Don't be fooled by the syntax. Apart from `if` statements and `for` loops, JavaScript has huge differences with C and friends. — Joe, Mar 21 '14 at 14:52
Yes, the Npc function is an object in itself (instance of Function) and you can add members on an object instance on the fly. You can try running the code in Chrome and do a console.log(Npc) to see what kind of object Npc is. Because it's a function you can call it with `new` and use it as a constructor. More about constructors and prototype can be found here: http://stackoverflow.com/a/16063711/1641941 — HMR, Mar 21 '14 at 16:34

score 3 · Answer 1 · answered Mar 21 '14 at 14:47

It's perfectly normal.

var Npc = function() {
    this.name='Hello world';
}

is a function constructor,until you execute the function nothing happens and name doesnt exist,makes sense.

so at this point only attr is defined.

var data = new Npc();

console.log('>>>>>' + data.attr);           // undefined
console.log('>>>>>' + data.name);

var data = new Npc(); returns a new object, makes sense because you are using new.

if you want to access attr you need to find a reference to Npc inside that new object

data.constructor.attr is where you will find attr

Edit

little mistake on data.constructor.attr corrected

Ok, I see... But basically, what is the purpose of the constructor object ? — Stef, Mar 21 '14 at 18:37

score 1 · Answer 2 · answered Mar 21 '14 at 14:46

1

Nothing strange here.
attr is the attribute of Npc function.
name is the attribute of object created when Npc is used as a constructor.
Therefore Npc function has no attribute name and object created by Npc has no attribute attr.

answered Mar 21 '14 at 14:46

ElmoVanKielmo

10,907
2
32
46

score 1 · Answer 3 · answered Mar 21 '14 at 14:47

Don't confuse constructor function with objects it produces. If you want property to automatically propagate to all created objects - prototype it:

Npc.prototype.attr='my new attribute';

var data = new Npc();
console.log('>>>>>' + data.attr);           // 'my new attribute';

score 1 · Answer 4 · answered Mar 21 '14 at 14:49

In your 1st call you call Npc() directly (i.e not as a constructor). In this case the this inside the body of the function refers to the global object, which in your browser is the window object and in node is the global object. Either way, you assigned the .name property to the global object and thus you cannot see it as a property of the function object (don't forget that functions are ordinary objects as well in JavaScript and unless used with the new operator, they are not constructors)

In the 2nd case you actually use the function as a constructor since you use it in conjunction with the new operator. Here the this.name=... inside the body actually adds a name property to the newly instantiated object of type Npc. It is the magic of the new operator that gives the meaning of "the instantiated object" to the "this" keyword in the 2nd case.

Lee Jenkins · Accepted Answer · 2014-03-21T22:51:01.927

If you're coming from a class-keyword language like Java or C++, then this might help you.

In JavaScript a function can be used as a constructor for an object, as you did here:

var Npc = function() {
    this.name='Hello world';
}
var data = new Npc();

By way of loose analogy to a class-keyword language, the "name" property is an instance variable defined in a "class" called Npc. So the expression data.name is perfectly logical.

In JavaScript a function is also an object, which is how you used it here:

Npc.attr='my new attribute';

Again by way of loose analogy to a class-keyword language, Npc.attr is like a static class member. So attr is a member of Npc and not a member of any instance of Npc.

Another brick in the JS wall

5 Answers5