Question

My code is very simple. Ans to me it should work.

var preview = WinJS.Class.define(
   function (el, options) {
       el.winControl = this;
       this.el = el;

       this.textarea = d.getElementById('preview-input');
       this.preview = d.getElementById('preview-text');
       this.form = d.getElementById('perview-form');

       this.preview.addEventListener('click', this.click, false);
       //WinJS.Utilities.query("button", this.form)
       //this.preview.addEventListener('', this.save, false);

   },

   {
       click: function (e) {
           this.form.style('display', 'block');
       }
   }
);

WinJS.Namespace.define('RegCtrl', { preview: preview });

But when click occurs this.form seems to be undefined of null. Why? I do not want to initialize objects in every method of the class.

New tests

I made additional test very small

var preview = WinJS.Class.define(
   function (el, options) {
       var test = 1;
       this.test = 1;
       this.test1();
   },

   {
       test1: function () {
           console.log(this.form, test);
       }
   }

);
WinJS.Namespace.define(‘RegCtrl’, { preview: preview });

This test fails on line this.test1();. What I think now that this class is called RegCtrl.preview() rather than new RegCtrl.preview().

How do I shek inside the function that this called as new but not a simple function?

Answer 1

The other answers aren’t explaining what’s going on, and as such are giving incorrect advice.

JavaScript has first-class function objects – you can pass them around as values. That’s exactly what you’re doing when you set up this callback:

this.preview.addEventListener('click', this.click, false);

You’re taking the contents of the this.click property, which happens to be a function, and handing it to the addEventListener function to do whatever it wants with it.

I was very specific about terminology there – note I specifically said function, not method. JavaScript doesn’t really have a method construct, it just has methods as properties on an object.

So where does the “this” member come from? It’s determined at the caller – the object you use on the left side of the ‘.’ is the one that becomes the value of this. For example,

function exampleFunc() { console.log("this.myName = " + this.myName); }

var a = { myName: "Chris", doSomething: exampleFunc };
var b = { myName: "Bob", doSomething: exampleFunc };

Note I’ve assigned the exact same function to the doSomething properties. What what happens:

a.doSomething(); // Outputs "this.myName = Chris"
b.doSomething(); // Outputs "this.myName = Bob"

The exact same function object, called through two different objects, has a different this pointer.

exampleFunc is a global function, let’s call it:

exampleFunc() // Outputs "this.myName = undefined"

So where’d the undefined come from? In a global function, “this” is set to window (the global scope), which didn’t have the myName property defined. Which also means that you could do this instead:

myName = "Global Name"; // note, no var - we want this global
exampleFunc(); // Outputs "this.myName = Global Name"

Ok, so what’s going on with the original question? Basically, you’ve passed the function this.click to be the callback, but you haven’t passed the “this” pointer that you want it called through. Actually, addEventListener doesn’t have a way to pass the this pointer. As a result, when the function is invoked this is not pointing at your object. I don’t remember off the top of my head what it’s pointing at – it’s either window or the element that was clicked on, check the DOM documentation to verify.

To get it to call the right function with the right context (context = the correct “this”), the traditional approach is to use a closure. Capture “this” in a variable, then pass in an anonymous function that calls your actual callback with the right this pointer. The code looks like this:

var preview = WinJS.Class.define(
   function (el, options) {

       // Capture your current this pointer in a global variable
       // Using "that" as the name comes from JavaScript: The Good Parts book
       var that = this;

       el.winControl = this;
       this.el = el;

       this.textarea = d.getElementById('preview-input');
       this.preview = d.getElementById('preview-text');
       this.form = d.getElementById('perview-form');

       // Note what gets passed instead of this.click:
       this.preview.addEventListener('click', 
           function (e) {
               // NOTE: Calling through "that": "this" isn't pointing to the right object anymore
               // Calling through "that" resets "this" inside the call to click
               that.click(e);
           }, false);    
   },

   {
       click: function (e) {
           this.form.style('display', 'block');
       }
   }
);

This is a common enough pattern that ECMAScript 5 has a utility function to build these wrappers for you – function.bind. Do this:

       this.preview.addEventListener('click', 
           this.click.bind(this),
           false);    

The construct this.click.bind(this) will construct a new function that, when called, will set the “this” reference to whatever you passed (in this case “this”), and then invoke the function you called it on.

Yes, there are a lot of different values for “this” floating around. Keeping track of what “this” is pointing at is an important part of mastering JavaScript programming.