What is the correct way of calling an internal function using the module pattern in Javascript - Stack Overflow

admin管理员组

文章数量:1357220

I am new to Javascript and am still getting my head round the various ways of creating objects i.e constructor+new, prototypal, functional & parts.

I have created what I think is an object factory using the module pattern and want to know what the correct method of calling an internal method would be. Is it via this or function name.

Here is my module:

function chart() {
    function my() {
        // generate chart here, using `width` and `height`
    }

    my.sayHi = function(){
        console.log('hi');
        my.sayBye();
    };

    my.sayBye = function(){
        console.log('Bye');
    };

    return my;
    }

var test = chart();
test.sayHi();

You can see that the first function calls the second using my.sayBye() or is it better to use this.sayBye(). Both produce the same result and run without error.

I am new to Javascript and am still getting my head round the various ways of creating objects i.e constructor+new, prototypal, functional & parts.

I have created what I think is an object factory using the module pattern and want to know what the correct method of calling an internal method would be. Is it via this or function name.

Here is my module:

function chart() {
    function my() {
        // generate chart here, using `width` and `height`
    }

    my.sayHi = function(){
        console.log('hi');
        my.sayBye();
    };

    my.sayBye = function(){
        console.log('Bye');
    };

    return my;
    }

var test = chart();
test.sayHi();

You can see that the first function calls the second using my.sayBye() or is it better to use this.sayBye(). Both produce the same result and run without error.

• javascript

Share Improve this question Follow asked Jun 20, 2015 at 11:54 timebandittimebandit 83833 gold badges1212 silver badges2727 bronze badges 2

• Depends. Using this can bee... interesting if, say, you "borrow" my.sayHi and call it from another execution context. – Dave Newton Commented Jun 20, 2015 at 11:58
• As, you say, both do work. Use whatever you like better, if you don't expect a specific behaviour in special cases – Bergi Commented Jun 20, 2015 at 12:27

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

The module pattern allows you to dispense with the 'this' variable if you want to. I would probably rewrite the above code to look like this and then the question bees moot.

function chart() {
    var hiCount = 0;

    function sayHi(){
        console.log('hi');
        hiCount++;
        sayBye();
    };

    function sayBye(){
        console.log('Bye');
    };

    return {
       sayHi : sayHi,
       sayBye: sayBye
    };
}

var test = chart();
test.sayHi();

In the above code all is defined within the function chart. As JavaScript's scope is at the function level every time the chart function is called a new set of functions will be defined. And a new set of variables can also be defined that are private to the function as they are defined in the function and are not accessible from outside. I added hiCount as an example of how you could do this. The Module pattern allows privacy in JavaScript. It eats more memory than the prototype pattern though as each time a function is declared it is not shared between other instances of the same class. That is the price you have to pay in Javascript to have class variables that are private. I willingly pay it. Removing 'this' from my code makes it easier to understand and less likely that I will fall into problems of misplaced scope.

Using "this" is better approach because you would be able to bind the function directly to the parent function object.And you dont need to return anything from the function. where as in your case you are explicitly returning another function Here is the use of "this" approach

function chart() {
 this.sayHi = function(){
    console.log('hi'); 
 }
}

var test = new chart();
test.sayHi();

Using this approach you would be able to call anything in the prototype of function "chart" Eg

chart.prototype.hello = function(){
 console.log('hello')
}

So you would be able to call the hello function from the same object(test)

本文标签：