OOP JavaScript: Usage of "this" necessary within methods?

Question

Shall one use the "this" keyword when accessing object-properties from within the object which has the property.

I've made this demo. Both way worked fine.

So, is there a good reason to add the "this" or can one leave it out?

function CalcCircle(radius) {
  this.radius = radius;

  this.getCircle = function () { 
    // Accessing the property "radius" WITH "this".
    return (Math.PI * this.radius * 2); 
  };
}

// Without the "this" keyword.
function CalcCircle2(radius) {
  this.radius = radius;

  this.getCircle = function () { 
    // Accessing the property "radius" WITHOUT "this".
    return (Math.PI * radius * 2); 
  };
}

var o1 = new CalcCircle(10);
var o2 = new CalcCircle2(10);

console.log('With "this": ' + o1.getCircle());
// With "this": 62.83185307179586
console.log('Without "this": ' + o2.getCircle());
// Without "this": 62.83185307179586

score 3 · Answer 1 · answered Jan 06 '16 at 11:08

3

The difference is that when you just refer to radius, you are referring to the value that was passed in when the object was created.

If the value of radius changes on the circle during run time, the value you get back from getCircle is not going to be updated in the second one.

answered Jan 06 '16 at 11:08

thgaskell

12,772
5
32
38

You're perfectly right. If you change the name of the property to let's say 'this.rad' and then try to access to access 'rad' without 'this' => Error because undefined. Understand it now. Thanks to all. – bo256 Jan 06 '16 at 16:52

Nick Zuber · Answer 2 · 2016-01-06T11:17:09.527

The reason that you can get away with not using the this keyword in the second implementation is because your function getCircle is accessing the radiusfrom the parameter passed in from CalcCircle2.

// Without the "this" keyword.
function CalcCircle2(radius) {

  this.getCircle = function () { 
    return (Math.PI * radius * 2);
    //                ^^^^^^
    // radius is searched for in this function scope...
    // was not found.
    // checks next scope chain...
    // radius is found!
  };

}

The purpose of the this keyword is to bind certain variable to an instance of an object.

In this particular implementation, you don't need to use the this keyword, however it's good practice to start using it in OOP when defining properties of an object.

Side Note:

The this keyword becomes much more useful when creating objects using prototypical inheritance. This is when you create objects and give them properties that can be inherited from any instance of that object.

var CalcCircle = function(radius){
  this.radius = radius;
}

CalcCircle.prototype.getCircle = function(){
  return (Math.PI * this.radius * 2); 
  //                ^^^^
  // Now we need this
};

In this example, we need to use this to reference the variable associated with the object within other functions we are defining.

your explanation is vague, you can correct it with example from @thgaskell — Vitaliy Terziev, Jan 06 '16 at 11:16

score 1 · Accepted Answer · answered Jan 06 '16 at 11:10

Whether or not you use this in your example of CalcCircle2 only differetiates which variable you actually use. With this you use the property. Without this you are using the argument of the constructor function (through JS closure).

Generally speaking it's better to use the argument once and then rely on your field that you created.

You may also want to check out attaching methods through prototype instead of creating them in constructor, in which case you'll be forced to use the field:

function CalcCircle2(radius) {
    this.radius = radius;
}

CalcCircle2.prototype.getCircle = function () { 
    // Accessing the property "radius" WITHOUT "this".
    return (Math.PI * this.radius * 2); 
};
var o2 = new CalcCircle2(10);
o2.getCircle();

Is there an advantage in defining the methods upon prototype-object instead of attaching them to "this"? — bo256, Jan 06 '16 at 11:25
@bo256 Here's a better link http://stackoverflow.com/questions/816071/prototype-based-vs-class-based-inheritance — Nick Zuber, Jan 06 '16 at 11:28

score 0 · Answer 4 · answered Jan 06 '16 at 11:12

Both radios is different

In function one where you are using this.radius

function CalcCircle(radius) {
  this.radius = radius;

  this.getCircle = function () { 
    // Accessing the property "radius" WITH "this".
    return (Math.PI * this.radius * 2); 
  };
}

You are accessing the property of Object.

whereas in Second function

function CalcCircle2(radius) {
  this.radius = radius;

  this.getCircle = function () { 
    // Accessing the property "radius" WITHOUT "this".
    return (Math.PI * radius * 2); 
  };
}

when you are you are using parameter of CalcCircle2 function.

OOP JavaScript: Usage of "this" necessary within methods?

4 Answers4