Different Ways To Add Functions To Javascript Object

In Javascript is there any difference between these two ways of adding a function to an object? Is one preferable for any reason? function ObjA() { this.AlertA = function()

Solution 1:

Sure there is a difference. If you define this.AlertA, you are defining a method that is local for the instance of ObjA. If you add AlertA to the prototype of the ObjAconstructor, it is defined for every instance of ObjA. The latter is, in this case, more efficient, because it's only assigned once, whilst a local method is assigned every time you create an instance of ObjA.

So using this.AlertA in:

var A = new ObjA, 
    B = new ObjA,
    C = new ObjA;

for A, B and C the constructor has to add the method AlertA. AlertB on the other hand, is only added once. You can check that using:

functionObjA() {
        alert('adding AlertA!');
        this.AlertA = function() { 
            alert("A"); 
        };

        if (!ObjA.prototype.AlertB) {
            alert('adding AlertB!');
            ObjA.prototype.AlertB = function() { 
                alert("B"); 
            };
        }
}

var A = newObjA,  //=>  alerts adding AlertA! and alerts adding AlertB!
    B = newObjA,  //=>  alerts adding AlertA!
    C = newObjA;  //=>  alerts adding AlertA!

Solution 2:

Using the object constructor will assign a copy of that function to every new instance of your object. Using prototyping will result in one function being shared across all instances.