Closure vs 'this' in object method

1

I’m going through the Udacity course Object Oriented Javascript. We just wrote this simple decorator:

var carlike = function(obj, loc) {
    obj.loc = loc;
    obj.move = function() { this.loc++; }
    return obj;
}

And then the instructor had us refactor to this:

var carlike = function(obj, loc) {
    obj.loc = loc;
    obj.move = function() { obj.loc++; }
    return obj.
}

The difference being the use of a closure rather than a method using this. He seems to imply that the closure is preferable, but does not explain why (at least not in detail).
So can anyone tell my why (if) the closure is preferable? :slight_smile:

EDIT: All I can think of so far is that when passed as a callback, the version which uses this will break, whereas the closure will not. To my understanding this happens because although the method is looked up on its object, when it is invoked as a callback it is not invoked by that object, and so the value of this defaults to the global object. The closure, however, retains the value of the scope in which it was called and so it works.
So I seem to have found one advantage for the closure. Is there anything else?

1 Like
2

I can’t think of a technical reason, at least not for the course’s simple carlike example. this can be a confusing thing for some developers, especially those new to the language or who use it infrequently. Making use of the closure scope is more readable, IMO.

There are a lot of opinions about how JavaScript should be written, and more than anything, the OOJ course intends to be an introduction to some of the hairier concepts rather than a style guide.

1 Like
3

Javascript is pretty “loose” language written in old days of web in just 2 weeks. Therefore, there are many issues but also many freedom using it. In “full” languages like C# or Java there is so called scope visibility. So everything between { } is local to that scope - block. However in Javascript that is not the way. You can access variables outside scopes like for example functions ::
var a = 4;

function abc(){
// can access variable a
var a = 3; // conflict
console.log(this.a); // what it points to ? (not what you think :slight_smile: )
}

So, same applies to objects. If you have nested scopes Javascript climbs up parent scopes to find variable declaration. This is very problematic if you use 3rd party libraries because of possible conflicts. So it is necessary if you want avoid hard to find errors to somehow restrict scope where variable can be used. This - as keyword can be very confusing in some cases like you stated where that keyword might trick you to be pointing at something completely different. So if you use local variables like in your case obj you are pretty sure that it points actually to obj. In case of this keyword that might not be the case. So if you want to protect yourself from tricky hard to find errors and code to make more clear you should always use closures.

4

This was very helpful to me in understanding this.

Key takeaway is that this is assigned an object where and when the function is called or invoked, not where and when the function is defined when parsed by the interpreter.

This distinction seems to require attention when one passes a function that uses this from one scope/object context to another. One way to explicitly associate a function with a specific object is through the use of bind, call, or apply function methods.