Difference between creating an object through the prototype (not prototype framework) property vs jquery namespaced objects?

Question

I just need to know what is the rudimentary difference between creating an object using these two methods, and the effect of using the objects.

//////////////////////////////////////////
myTestObject.prototype.var1 = null;
function myTestObject()
{
    this.var1 = "test me";
}

myTestObject.prototype.action = function()
{
    alert("alertme");
};
// to use
var a = new myTestObject();
a.action();
//////////////////////////////////////////


//////////////////////////////////////////
(function()
{
    $.myTestObject3 = {
      var1 : "test me",
      action : _actionMethod
    };

    function _actionMethod()
    {
        alert("alertme3");
    }

 })();


$.myTestObject3.action();
//////////////////////////////////////////

A few updates... the answers to this question lead me to google for different keys words which lead to two interesting articles which really went into a lot of detail about Constructor vs Literal objects in javascript

http://net.tutsplus.com/tutorials/javascript-ajax/the-basics-of-object-oriented-javascript/

Then as a segue into why to use prototype when using function constructors paying particular attention to the section on Why is Using Prototype Better

http://net.tutsplus.com/tutorials/javascript-ajax/prototypes-in-javascript-what-you-need-to-know/?search_index=1

So as a follow up, you can use a combination of the two like in the guitar example below as a good practice. If only one copy of an object is needed and a change to it, knowing it affects the whole script is ok, then an object literal is fine. However if many objects need be created using the prototype approach is best so all created objects use a reference to the same function rather than having a copy of the function.

Another good article to make better use of namespacing and combining all these approaches http://javascriptweblog.wordpress.com/2010/12/07/namespacing-in-javascript/

LAST FOLLOW-UP I hope others find this useful as these topics threw me for a loop for a while.

Knowing what to look for now, I found two really good urls that describe many design patterns and how to intermix them in javascript using several examples.

This one describes how to use the module pattern in a way that makes use of the prototype notation. This will allow you to compartmentalize code while still making sure that instances are referencing the same objects. http://briancray.com/posts/javascript-module-pattern/

This goes through several design patterns and list advatanges and disadvantages http://addyosmani.com/resources/essentialjsdesignpatterns/book/

score 1 · Answer 1 · answered Oct 31 '12 at 12:19

Objects using $ won't be able to use myTestObject3 because it has not been extended on the jQuert prototype. myTestObject3 is an object literal and not a constructor function.

$('#test').myTestObj3.action(); // wrong

If you wanted it to be on the prototype of jQuery, extend the $.fn object.

You can have an arbitrary amount of "children" deriving from myTestObject (the constructor) using prototypal inheritance.

score 1 · Accepted Answer · edited May 23 '17 at 12:27

1

Take a look at Why is JavaScript prototyping? , some extract from there:

If you add all of your properties and methods to the object function constructor, then create 100 instances of that object, you get 100 copies of all of the properties and methods. Instead, if you add all of your properties and methods to the prototype of the object function constructor, then create 100 instances of that object, you get 100 references to the single (1) copy of the object's properties and methods. This is obviously faster and more efficient and is why prototype is used (aside from altering things like String and Image, as mentioned below)

Another reason to use prototypes is to emulate classical inheritance:

var Instrument = {
    play: function (chord) {
      alert('Playing chord: ' + chord);
    }
};

var Guitar = (function() {
    var constructor = function(color, strings) {
        this.color = color;
        this.strings = strings;
    };
    constructor.prototype = Instrument;
    return constructor;
}());

var myGuitar = new Guitar('Black', ['D', 'A', 'D', 'F', 'A', 'E']);
myGuitar.play('D5');

edited May 23 '17 at 12:27

Community

1
1

answered Oct 31 '12 at 12:21

Nelson

49,283
8
68
81

So in my example if I create 100 of myTestObject3 I'm going to get 100 copies of the same properties and methods... whereas if I create 100 of myTestObject I'm getting 100 objects each referencing the same copy of all the properties and methods. Is that correct? – DRobertE Oct 31 '12 at 12:29
1

Also I've never seen constructor.prototype = Instrument; I've seen ObjectName.prototype.property = value... and the way you've used the prototype property... almost seems like a mix of using a module pattern and an Immediately-invoked Function Expressions and I've definitely never seen the two intermixed. – DRobertE Oct 31 '12 at 12:38
True for the myTestObject case, but for your myTestObjects3 object I can't tell, as you are not using plain object creation with `new` as in the Guitar example in the question I linked. – Nelson Oct 31 '12 at 12:39
I use var a = new myTestObject(); is that not how you've used it in the case of Guitar? – DRobertE Oct 31 '12 at 12:41
sorry misread your comment.... well for myTestObject3 how would I create a "new" object using that notation – DRobertE Oct 31 '12 at 12:48
Does that constructor function have to be integrated into the object literal to be able to use it.... see my edits to the code in the original post. I believe I'm having a hard time getting the concepts of prototypal style object creation vs object literals – DRobertE Oct 31 '12 at 13:08
Please remove that unnecessary IEFE around your `Guitar` constructor to make your code much more readable and understandable – Bergi Nov 01 '12 at 16:33

Difference between creating an object through the prototype (not prototype framework) property vs jquery namespaced objects?

2 Answers2