Question

I’ve never really used JavaScript, but I know roughly what it’s about. Now I’m looking through some examples of chrome extensions, and I see this “pattern” quite a lot.

var Main = {
    enable: function(){ window.addEventListener('mousemove', onMouseMove, false); },
    onMouseMove: function(event){ _onMouseMove(event) },
    _onMouseMove: function(event){
        ...lenghty implementation...
    }
}

My question is, why? Is this some kind of optimization?

Answer 1

You’re question is a little vague; but I am guessing you’re asking why the developer has two onMouseMove methods instead of just doing all the work in one, ie:

var Main = {
    onMouseMove: function(event) { 
        // Why not just have the implementation here?
        // Why are we delegating it to the other method?
        _onMouseMove(event) 
    },
    _onMouseMove: function(event){
        // ...length implementation...
    }
}

The answer is because of how scope is handled in JavaScript. In a nutshell, the this keywork in most classical OOP languages (like Java) always refers to the parent class (Main) in the scope of a Function – JavaScript doesn’t work like this.

As there are no classical classes in JavaScript, the this keyword actually refers to the function which invoked it; that’s why the new keyword makes such a difference when creating a new object via its constructor function; for example:

function MyConstructor = function () { 
    // Assign a member property
    this.aProperty = "An Example";
}

// Using the new keyword; a new scope is created for the call which refers to the
// object about to be created (and returned).
var withNew = new MyConstructor();
console.log(withNew.aProperty);  // 'An Example'

// Without the new keyword...
var withoutNew = MyConstructor();
console.log(withoutNew.aProperty);  // undefined

// Because we didn't use new, the calling function scope was applied, so 
// the `this` keyword resolves caller's scope.
console.log(this.aProperty)  // 'An Example'

By delegating from onMouseMove to _onMouseMove the scope remains bound to the Main object instead of being bound to the object which triggered the mouse event. Another, more readable way of achieving this is to use a delegate, or if you’re using ES5, Function.bind

var Main = {
    enable: function() {
        window.addEventListener('mousemove', onMouseMove.bind(this), false); 
    },
    onMouseMove: function(event) { 
        // ...lengthy implementation...
    }
}