Javascript: creating an object from an already created object compared to the prototype

Question

I have a pretty academic question that doesn't particularly apply to everything I do, I just want to know the answer!

Let's say we have a simple definition of an object in the global namespace as such:

TestObject = function(){}; 

He adds a prototype to it that can be created in a new object:

 TestObject.prototype.AnotherObject = function() {}; 

Create the first object:

 var myObject = new TestObject(); 

Now my question is this:

how

 myObject.myProperty = new myObject.AnotherObject(); 

differ from

 myObject.myProperty = new TestObject.prototype.AnotherObject(); 

Or are they exactly the same?

The difference I see is this: I could use the second method to create objects in the context of TestObject, without knowing the name of the object-object itself, i.e.

 TestObject.prototype.createAnObject = function() { this.anotherProperty = new TestObject.prototype.AnotherObject(); } 

And finally:

What are the implications of using the prototype method to create an object with the same name? Why does this lead to an infinite loop? (What is actually going on inside ..)

 TestObject.prototype.AnotherObject = function () { this.AnotherObject = new TestObject.prototype.AnotherObject(); }; myObject.AnotherObject(); 

But it is not...

 TestObject.AnotherObject = function() {}; TestObject.prototype.createAnObject = function() { this.AnotherObject = new TestObject.prototype.AnotherObject(); }; myObject.createAnObject(); 

...

I have a deep desire to understand the relationship between objects here! Thanks!

The reason I ask these questions is because I want to do something like this when there is a 1: 1 ratio between objects:

 ClientObject = function () { this.objectname = "a client class"; } ClientObject.prototype.loginUser = function(name) { this.loggedin = true; if (typeof this.User === 'undefined') { this.User = new ClientObject.User(name); } } ClientObject.User = function (name) { this.username = name; } ClientObject.User.prototype.getProfile = function() { return 'user profile'; } var testClient = new ClientObject(); console.log('testClient.User = ' + (typeof testClient.User)); // should not exist testClient.loginUser('Bob'); // should login 'bob' console.log('testClient.User = ' + (typeof testClient.User)); // should exist now Bob is logged in console.log(testClient.User.username); // should be bob testClient.loginUser('Tom'); // should not do anything as User object already created console.log(testClient.User.username); // bob still console.log(testClient.User.getProfile()); // new functionality available 

I'm just not sure that I violate any best practices or agreements here involuntarily.

Answer 1

myObject.myProperty = new myObject.AnotherObject ();

differ from

myObject.myProperty = new TestObject.prototype.AnotherObject ();

There is no difference. Remember that objects in JavaScript have a prototype chain. When you call new myObject.AnotherObject(); , the engine first checks for AnotherObject on myObject . Not finding it, he will check the prototype myObject , which he will find. Second version

 myObject.myProperty = new TestObject.prototype.AnotherObject(); 

Just coming to the place where AnotherObject is AnotherObject .

---

 TestObject.prototype.AnotherObject = function () { this.AnotherObject = new TestObject.prototype.AnotherObject(); } myObject.AnotherObject(); 

Just go through the code. When you say: myObject.AnotherObject(); , AnotherObject will be called, and this is myObject . The first line will try to create a new property on myObject (which is this ) by setting it to the result

 new TestObject.prototype.AnotherObject(); 

which then re-introduces the same AnotherObject function, but this time with this sets up a new object whose prototype is installed in the prototype TestObject.prototype.AnotherObject . And so on ad infinitum

---

Finally,

 TestObject.prototype.createAnObject = function() { this.AnotherObject = new TestObject.prototype.AnotherObject(); } myObject.createAnObject(); 

Will it not lead to an infinite loop, as far as I can tell, and as far as I can check: FIDDLE

Basically, createAnObject will be entered with this set to myObject . Inside which a new AnotherObject property will be created on myObject, which will be configured to a new call to the AnotherObject function which you previously configured.

Note that after making this call, the AnotherObject function will exist, but , it will be obscured by the AnotherObject that you just created. So now you can never tell

 var f = new myObject.AnotherObject() 

Since you now have AnotherObject property sitting right on myObject, which will be found and returned before anything is tested on the prototype.

Well, I mean, you can always say delete myObject.AnotherObject and remove this property from the object, which will then open you up to AnotherObject , which is in the prototype, but in fact you should avoid name conflicts like this to start with.

---

Regarding your last bit of code

A) Why not make User its own function?
B) Why not configure this.User = new ...() directly in the ClientObject constructor function? This way you will not need to check undefined C) ClientObject should be defined as

 function ClientObject(){...` 

you now have the impression of an implicit global.