CODEWITHSUNDEEP
javascriptjquery
DRobertE
DRobertE

Reputation: 3508

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

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/

Upvotes: 2

Views: 165

Answers (2)

Nelson Benítez León
Nelson Benítez León

Reputation: 50573

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');

Upvotes: 1

David G
David G

Reputation: 96810

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.

Upvotes: 1

Related Questions