If you define an object in an anonymous function -- how do you use it?

Question

I am looking at this tutorial. I know that it is using an anonymous function, from this answer: Why do you need to invoke an anonymous function on the same line?

I understand that the () at the end of the function will autoexecute the prior function -- passing (this) as the parameter. I understand that the (this) in the function refers to the global this.

I understand that people use this anonymous function pattern to protect against pollution in the global namespace.

However, I do not understand how you would USE the cow defined in the anonymous function. For instance, in python, if you imported a class cow from cow import cow, you could do Cow(name). Or in java you could do new Cow (name)

If you define a cow in an anonymous function (to protect the global namespace) -- how do you use it?

Ted Hopp · Accepted Answer · 2014-03-23T19:10:58.340

Note the line

exports.Cow = Cow;

That adds a Cow property to exports, which in the calling code is this. Thus, whatever this is when the anonymous function is called will have a Cow property (which is the constructor function) when the function returns.

EDIT: For those who want the example directly in front of them, here's the code from OP's link that is relevant to the question:

(function(exports) {
  "use strict";

  function Cow(name) {
    this.name = name || "Anon cow";
  }
  exports.Cow = Cow;

  Cow.prototype = {
    greets: function(target) {
      if (!target)
        throw new Error("missing target");
      return this.name + " greets " + target;
    }
  };
})(this);

The result would be used in exactly the same way that one would use Cow after the following code executed:

var Cow = function (name) {
    this.name = name || "Anon cow";
}

Cow.prototype = {
    greets: function(target) {
        if (!target)
            throw new Error("missing target");
        return this.name + " greets " + target;
    }
};

The only difference being (in this case) that the anonymous function function is evaluated in strict mode regardless of the global setting, without changing the global setting. In both cases you could do:

var aCow = new Cow("Buttercup");
aCow.greet("Farmer Johnson");

Output:

Buttercup greets Farmer Johnson

Maybe an example if it is global this of saying `var myCow = new Cow();` would be helpful? — Hogan, Mar 23 '14 at 14:58

score 1 · Answer 2 · answered Mar 23 '14 at 14:58

What that code is doing is defining a Cow object, and then by the following line:

exports.Cow = Cow;

The line above adds a Cow property to the window object, and the value of this property is the object constructor.

At this point, because window is global in a browser, you can create new Cow objects by the following in another file:

var cow = new Cow();

score 0 · Answer 3 · answered Mar 23 '14 at 15:10

An anonymous function is allowed to return results, just like any other function. If you need to export items you create to the global namespace, you can just return them, like so:

var newglobal = (function() {
  var foo = {

   };
  return foo;
}());

This is the standard method when you are not using a package that supports the concept of exports.

Alternately, if you know that you are going to run in a browser context, you also have the option of creating properties on the window object, since they are always added to the global object.

If you define an object in an anonymous function -- how do you use it?

3 Answers3