CODEWITHSUNDEEP
javascript
Leif Andersen
Leif Andersen

Reputation: 22332

Creating functions for an object in javascript

As far as I can tell, there are two main ways of creating functions for an object in javascript. They are:

Method A, make it in the constructor:

function MyObject() {
    this.myFunc1 = function() {
        ...
    }
    this.myFunc2 = function() {
        ...
    }
    ...
}

Method B, add it to the prototype:

function MyObject() {
    ...
}

MyObject.prototype.myFunc1 = function() {
    ...
}

MyObject.prototype.myFunc2 = function() {
    ....
}

Obviously if you did:

MyObject.myFunc3 = function() {
    ....
}

then myFunc3 would become associated with MyObject itself, and not any new objects created with the new keyword. For clarity, we'll call it method C, even though it doesn't work for creating new objects with the new keyword.

So, I would like to know what the differences between the two are. As far as I can tell they have the same effect logically, even if what's happening on the machine is different.

If I were to guess I would say that the only real difference is when you're defining them in the constructor like in method A, it creates a whole new function object for each object that's created, and Method B only keeps one copy of it (in MyObject), that it refers to any time it's called. if this is the case, why would you do it one way over the other. Otherwise, what is the difference between method A and method B.

Upvotes: 5

Views: 150

Answers (3)

lia ant
lia ant

Reputation: 408

The MyObject in method A is an instance for inner functions. You cannot call its functions explicitly outside of it unless object (you can call it a class) was instantiated.

Assume this:

MyObject.MyFunc1(); // will not work
var obj = new MyObject();
obj.MyFunc1(); // will work

so this is the same as any class in other languages. Describing usefulness of classes and their usages goes beyond that question though.

Also to notice:

    function MyObject() {
        var privateVar = "foo";

        this.publicProperty = "bar";

        // public function
        this.publicFunc = function() {
            ...
        }

        // private function
        function privateFunc () {
            ...
        }
    }

For method B it's same as with method A, the only difference is prototyping is a style of creating object. Some use prototypes for readability or out of preference. The main advantage in prototypes is that you can extend existing object without touching the original source. You need to be careful with that though. (as example Prototype framework)

For method C you can call them a static functions. As you said they can be called explicitly by referring through object like:

MyObject.MyFunc1();

So which one to use depends on situation you're handling.

Upvotes: 0

buritos
buritos

Reputation: 598

The idea is that you can modify the prototype at any time and all objects of the type (even those created before the modification) will inherit the changes. This is because, as you mentioned, the prototype is not copied with every new instance.

Upvotes: 2

hugomg
hugomg

Reputation: 69934

The advantage of giving a separate function to each object is that you can close over variables in the constructor, essentially allowing for "private data".

function MyObject(a,b) {
    var n = a + b; //private variable
    this.myFunc1 = function() {
        console.log(n);
    }
};

vs

function MyObject(a,b) {
    this.n = a + b; //public variable
}

MyObject.prototype.myFunc1 = function() {
    console.log(this.n);
}

Whether this is a good idea or not depends on who you ask. My personal stance is reserving constructor functions for when I actually use the prototype, as in option #2 and using plain functions (say, make_my_object(a,b)) when using closures, as in option #1.

Upvotes: 4

Related Questions