Question

I have worked with oop style scripting before and trying to get some kind of system with javascript. I wanted to try the most basic pattern, Constructor Pattern.

So I setup one js file called ImageView with a constructor matching the name of the js file.

    function ImageView(){
    alert( 'this is working');
}

Then I set up another js file called Main.js which will be the main instantiation class.

    $(document).ready(function(){
    var imageViewer = new ImageView();
    //ImageView();
});

Now what I don’t get is I can call this object ImageView without even the new constructor call. For example ImageView(). From what I gather this is just another global function and not a encapsulated class. I’m trying to get away from global crap and separate my methods and properties to their own class. What am I missing her.

Answer 1

Others have already answered what the difference is between using new and not using it, so I’ll answer your entirely separate question: how do I avoid globals in JS?

The answer is that you can’t entirely. You will always have at least one, in which you can stuff your other stuff. So for example if you wanted a “namespace” of xyz, you would do:

// global:
var xyz = {}; // or, window.xyz = {} if you are in a browser and want to be more explicit.

// "encapsulated" within the xyz "namespace":
xyz.ImageView = function () { alert("This is working"); };

There is a better solution: use the emerging concept of JavaScript modules. These are not language features (at least not in the current version of JavaScript), so they are really just hacks introduced by very clever libraries that overwrite a couple of global variables to let you avoid creating any more than the ones provided by those libraries. A good example is RequireJS, where you could do something like the following:

// In xyz.js, define the xyz module (name automatically derived from filename).
// Whatever is returned from the function you pass to define is "the xyz module"
define(function () {
    return {
        ImageView: function () { alert("This is working"); }
    };
});

// In other code, in a different file, you can say "I require the xyz module
// to do my work," and pass require a function saying "once you've got the xyz module
// for me, here's the work I will do with it".
require(["xyz"], function (xyz) { // dependency array maps to callback arguments
    // I got the xyz module, including the ImageView function it exported. Use it!
    var imageViewer = new xyz.ImageView();
});

Here the clever globals RequireJS introduces are the functions define and require, but if you use them right, you can avoid ever introducing any further globals beside those two.