JavaScript模块模式的差异

Question

Very simple question, not sure if there are any differences in these ways of creating a javascript "module". I'm hoping somebody can clarify it for me.

A)

var foo = function() {
    var bar = function() {
        console.log('test');
    };

    return {
        bar: bar
    };
};

B)

var foo = function() {
    function bar() {
        console.log('test');
    };

    return {
        bar: bar
    };
};

C)

var foo = function() {
    this.bar = function() {
        console.log('test');
    };

    return {    
        bar: this.bar
    };
};

Answer 1

A and B are essentially the same, though there is a very minor difference between A and B due to function/variable hoisting, theoretically you could write code which would work in B but break in A, but practically speaking you'd have to really write weird code to do so.

C will work, but is conceptually wrong. The point of using this.funcName in a function is as a constructor (creating lots of objects using new Thing() . If you aren't using the function as a constructor you shouldn't be using that style as someone scanning the code may mistake the function as a constructor instead of its actual purpose which is a module.

Answer 2

At first, you forgot to execute the function expression: the module pattern is an IEFE. You just create a function.

Your last example is nonsense, it looks like a constructor function when assigning properties to this - and when executed as a IEFE it breaks (and using it with new has undesired effects; an when returning an object it's useless).

For the difference between the first and the second snippet see var functionName = function() {} vs function functionName() {} . In context of the module pattern, the function declaration is recommended.

Answer 3

 //Javascript Module Pattern var person = (function() { var cname = 'CheapFlight'; return { name: "Santosh Thakur", getAge: function() { return cname; }, growOlder: function() { return cname + " Updated"; } }; }()); person.cname = "New Company" console.log(person.cname); console.log(person.name); console.log(person.getAge()); console.log(person.growOlder()); 

Answer 4

prefix var before a function makes it a "class"-ish, this means you can make many versions of it. This goes for A

For example:

  var hi = function()
  {
    var bye = function()
    {
        alert("bye");
    }   
    bye(); // this will call bye
    var something = new bye(); // this will create a new instance of bye();
  }

  var something = new hi();
  something();

B means you can only call bar, not make a new instance of it inside the function.

C is the same as bar because of its scope

Class-ish:

var Dog = function( hair, type )
{
     this.hair = hair;
     this.type = type;
}

var fred = new Dog( "long", "Dalmation" );
alert( fred.hair );    

var dave = new Dog( "short", "Poodle" );
alert( dave.type);

This is a class ^