add method with dot and with prototype

Question

I have the following code

(function() {

    var sayHello;

    sayHello = (function() { 
        //add method to SayHello?
        SayHello.load = function() {
            var s = new SayHello();
            return s;
        };
        //SayHello constructor
        function SayHello() {
            this.text = "hello";
        }
        //add method to SayHello
        SayHello.prototype.print = function(selector){
            var elm = document.querySelector(selector);
            elm.innerHTML = this.text;
        };

        return SayHello;

    })();

    window.s = sayHello;

})();

I don't understand why the code works when assigning function to "SayHello.load" but not to "SayHello.prototype.load". And assigning function to "SayHello.prototype.print" can work but to "SayHello.print" cannot.

Have you checked this: http://stackoverflow.com/questions/7115594/defining-prototype-methods-inside-the-constructor ? — Gene R, Mar 07 '16 at 13:36

score 1 · Accepted Answer · answered Mar 07 '16 at 13:40

1

I don't understand why the code works when assigning function to "SayHello.load" but not to "SayHello.prototype.load".

SayHello.load is not same as SayHello.prototype.load since in the first one you are adding the property to the SayHello object and in the second one you are adding it to the prototype of SayHello.

So when you do

var obj1 = new SayHello();

In the first case (SayHello.load) obj1 will not have load property, but in second case (SayHello.prototype.load) it will have.

Now this means when you did SayHello.load, you basically worked on a variable whose initialization was hoisted to the top of the function. In other words, variable SayHello was already initialized but the constructor SayHello wasn't defined yet.

Which is why you cannot do SayHello.prototype.load before

function SayHello() 
{
    this.text = "text";  
}

but you can do SayHello.load since it doesn't involve constructor of SayHello.

answered Mar 07 '16 at 13:40

gurvinder372

66,980
10
72
94

I have a line `return SayHello;` , could you let me know what is returned? It seems like a `SayHello` object, but the only `SayHello` object (assigned to variable `s`) I initialised in the code is inside the `SayHello.load` method. – Ting Lee Mar 07 '16 at 15:08
@TingLee: `return SayHello` returns *the* `SayHello` function object. It doesn't create an instance. – Bergi Mar 07 '16 at 15:09
@Bergi: do you mean the `SayHello` constructor function? So when I assign a function to `SayHello.load`, I am assigning a method to a constructor function? Super confused. But thanks! – Ting Lee Mar 07 '16 at 15:18
@TingLee: Yes, exactly. It's the equivalent of a static method. – Bergi Mar 07 '16 at 15:23
@TingLee did your question got answered? – gurvinder372 Mar 08 '16 at 05:16
@gurvinder372 yes! I think the key is functions are objects in JavaScript. And my question was about adding method to a function object and to an object prototype. – Ting Lee Mar 08 '16 at 07:26
@TingLee didn't my post answer these question? What am I missing? – gurvinder372 Mar 08 '16 at 07:28
1

You answered my question, nothing missed. Thank you very much~ – Ting Lee Mar 08 '16 at 10:16
I now have another question that is ther any advantage to add a method to a constructor function to create an object constructed by the function? When do we need this? – Ting Lee Mar 08 '16 at 11:08
@TingLee that depends on what you need. If you need to be able to use that method on other instances then use prototype else use the simple property binding. – gurvinder372 Mar 08 '16 at 11:09

add method with dot and with prototype

1 Answers1