CODEWITHSUNDEEP
javascriptthis
TKD
TKD

Reputation: 41

Redundant Javascript this in object method?

Noob question, searched but don't find an answer to this particular question. I'm constructing an object, and referencing the parameters of the argument using the 'this' keyword:

function Obj(a, b, c) {
  this.a = a;
  this.b = b;
  this.c = c;
  this.addMe = function() {
    alert(this.a + this.b + this.c);
  };
}

My question is a simple one: if a, b, and c exist solely within the object (in other words, there are no global variables declared using the same names), is the 'this' keyword required when using them within the addMe() method? Could the method not simply be written as:

this.addMe = function() {
  alert(a + b + c);
};

When I run this code by creating a new instance of Obj, it works exactly the same either way. And (not that I would do this) if I create global variables for a, b, and c different in value from the arguments I use when instantiating the new Obj, these have no bearing on the results from the method call. So, am I missing something that will come back to bite me if I don't use 'this' in the method?

Upvotes: 3

Views: 267

Answers (3)

Carcigenicate
Carcigenicate

Reputation: 45806

If you know that this.a (for example) will never be reassigned, then yes, they should effectively be the same.

That's a big if though. What if you forget later that you intended to never reassign them? Then you have a weird bug that may be difficult to track down.

Example:

function Obj(a) {
  this.a = a;

  this.show = function() {
    console.log(this.a);
    console.log(a)
  };
}

var obj = new Obj(1);
obj.show();

obj.a = 2;
obj.show(); // OOPS!

Note that the second call to show will give two different values. The show function creates a closure around the original value of a; essentially saving it. It remains unchanged when this.a is reassigned.

Unless you have good reason not to, just use this. Explicitly stating your intentions is usually the way to go when in doubt. Saving yourself a few keystrokes is rarely worth the potential headache down the road.

Upvotes: 1

Jaromanda X
Jaromanda X

Reputation: 1

To demonstrate the difference/problem of using a + b + c

function Obj(a, b, c) {
  this.a = a;
  this.b = b;
  this.c = c;
  this.addMe = function() {
    console.log('addMe', this.a + this.b + this.c);
  };
  this.brokenAddMe = function() {
    console.log('brokenAddMe', a + b + c);
  };
}
var o = new Obj(1,2,3);
o.addMe(); // should be and is 6
o.brokenAddMe(); // should be and is 6
o.a = 4;
o.addMe(); // should be and is 9
o.brokenAddMe(); // should be 9 but still is 6

Upvotes: 1

user1726343
user1726343

Reputation:

With the way you've defined your addMe function, yes; you could simply close over a, b and c and use them. However the problem is that this is generally a wasteful way to define your methods, because every instantiation of an Obj will involve construction of a new addMe function.

In general, people tend to attach reusable methods to the prototype outside of the constructor function, either by relying on the ES6 class syntax or doing Obj.prototype.addMe = .... In both cases the a, b and c constructor parameters are not in scope, so you must rely on the properties available in this.

Upvotes: 0

Related Questions