5

I'm new to Javascript and just want to make sure I'm understanding how it handles the this keyword, since... well, it seems like it's pretty messy. I've checked out similar questions on StackOverflow and want to make sure I'm not moving forward with the wrong idea.

So I'm defining a class like so, and want to process every point received in the constructor.

function Curve(ptList) {
  this.pts = [];

  if(ptList.length > 2) {
    // I want to call "addPoint" for every item in ptList right here
  }
}

Curve.prototype.addPoint = function(p) { 
  this.pts.push(p);
  /* some more processing here */ 
}

So, initially I thought I could just do:

ptList.forEach(this.addPoint);

but I can't, because that is simply passing a pointer to the prototype function, which means this in addPoint refers to the global object.

Then I tried:

ptList.forEach(function(p) { this.addPoint(p); });

but I can't, because this refers to the global scope as soon as I enter that internal function (it no longer refers to the Curve object being constructed), so addPoint is undefined.

The way to get around that is to make a variable that refers to this in a scope I can still talk to in the subfunction:

var _this = this;
ptList.forEach(function(p) { _this.addPoint(p); });

And this finally works (but looks really weird to someone without JS experience). But then I found out about the bind function, which lets me not define a trivial function wrapper:

ptList.forEach(this.addPoint.bind(this));

and it seems like, finally, this is the best and most concise way to do it, even thought it looks silly. Without the bind function, addPoint has no understanding of which object it was called on, and without the first this, I can't even find my addPoint function.

Is there a better way to do this seemingly simple thing, or is that last line of code the recommended way?

XenoScholar
  • 187
  • 3
  • 10
  • 1
    For complete illumination on this in Javascript, check out this free book: https://github.com/getify/You-Dont-Know-JS/tree/master/this%20%26%20object%20prototypes It will answer all of your questions. – Tad Donaghe Jan 22 '15 at 00:09
  • 3
    This question is asked at least once a day. The solution is really understanding how `this` works, then you'll have an aha moment and realize why it is not silly. But there's another way `.forEach(this.addPoint, this)` – elclanrs Jan 22 '15 at 00:09
  • Depends on your viewpoint. For instance, in knockoutjs it's a common idiom to capture a copy of `this` with the line `var self=this`. Lately, `.bind` is more commonplace. – spender Jan 22 '15 at 00:10
  • If `forEach` did not provide the convenience then yes, one of your solutions would be the way to go. – Jon Jan 22 '15 at 00:10

1 Answers1

8

The forEach() method and other similar array methods like map() and filter() provide an optional parameter called thisArg specifically for this purpose.

This serves as the this "argument" that is provided to the function when it is called:

ptList.forEach(this.addPoint, this);

When such a parameter isn't available, then choosing between using a closure variable (the variable name self is often used for this) or .bind() is mostly a matter of preference. Note that another option is to define functions inside your constructor and capture everything in a closure:

function Curve(ptList) {
  var pts = [];
  function addPoint(p) {
      pts.push(p);
  }

  if(ptList.length > 2) {
    ptList.forEach(addPoint);
  }

  this.addPoint = addPoint;
}

This requires a bit more memory than putting the functions on a prototype since every instance gets its own copy (and also rules out some of the things a prototype allows you to do), but Douglas Crockford (the inventor of JSON and JSLint) recently said that he doesn't even use this anymore, with the rationale that memory is cheap, but CPU cycles are not (traversing the prototype chain requires a fair amount of processing).

JLRishe
  • 99,490
  • 19
  • 131
  • 169
  • 2
    IMO `this` is a dangerous thing in JS. Given that it can be very difficult to identify, at-a-glance, what `this` is, I think Crockford has got it right. – spender Jan 22 '15 at 00:34
  • 1
    @spender I would pretty much agree with that. Lately I've been trying to use `this` as little as possible. The arrow functions in ES6 seem like an attempt to remedy `this`'s weird behavior, but I think they're just going to cause a whole new wave of confusion. – JLRishe Jan 22 '15 at 00:39
  • Thanks for your comments, makes me think that I should probably redesign my (as of now, short) program to do the closure idea, rather than make a mess of it with `this`. – XenoScholar Jan 22 '15 at 00:59