Why is the 'this' keyword needed in objects

Question

From sololearn

function mathCalc (height, weight) {
  this.height = height;
  this.weight = weight;
  // this.sampleCalc = ; (taken out)
}

Why do I need to do:

this.height = height;

this.weight = weight;

What is the reason behind it?

Answer 1

In short this is the owner object of the function. If you had two objects or elements that called upon a function - how would you place the appropriate value in the appropriate element that called it? Using this can eliminate the need for duplicate code etc.

Technically you don't HAVE to use it; but it has its uses.

You can read more here or here.

Here's a little click test snippet, where I can have one function for alerting this clicked div id rather than having to write one for each div;

var div = document.getElementsByTagName('div');
var i;
for (i = 0; i < div.length; ++i) {
  div[i].onclick = function() {
    alert(this.id);
  }
}

<div id="test1">Click Test 1</div>
<div id="test2">Click Test 2</div>
<div id="test3">Click Test 3</div>

Mind you, this is easier in jQuery - but I didn't feel the need to include the CDN for this example. However, it would look something like this;

$('div').on('click', function() {
  alert(this.id);
})

Answer 2

height and weight are only parameters for the arguments passed into the function. If you're learning, it might help to use different names.

this refers to the function itself. When treated as an object/class, it will retain the values. Notice in the object output below that h and w are not retained, height and weight are. Also notice that one and two have different values, the same value that was passed into the function when they were initialized.

function mathCalc (h, w) {
  this.height = h
  this.weight = w
}

let one = new mathCalc(1,3)
let two = new mathCalc(2,4)

console.log('one:',one)
console.log('two:',two)

Answer 3

For a function that only gets called once, it makes complete sense to avoid this. However, for persistent state, this can be useful. Note that this only gets rebound when the new keyword is used.

function Worm() {
  this.size = 1;
  this.grow = function() {
    ++this.size;
  }
}
const wormy = new Worm();
console.log(wormy.size);
wormy.grow();
console.log(wormy.size);

With ES6 Javascript, there is a much cleaner way to take advantage of this.

class Worm {
  constructor() {
    this.size = 1;
  }
  grow() {
    ++this.size
  }
}

Answer 4

this is a keyword for the function's caller for function expressions and function declarations. For constructor functions (which I will demonstrate below) and object methods, this refers to the object itself. Here are examples of the types mentioned:

function myFunc() { return this; } //function declaration
const myVar = function() { return this; } //function expression
const obj = {a: 1, whatIsA: function() { return this.a } } //whatIsA is an object method

If you call either of the above functions from the global context (not inside another function), this is the Window object. The browser defaults this to the Window (which when you think about it, is the caller of the function since your browser ran the file).

myFunc(); //outputs "Window" obj
myVar(); //also outputs "Window" obj

For constructor functions instantiated with new, this is bound to the newly created object.

I think the best way to show why this is so useful is to give an example. Examine the following code:

function Dog(name) {
    this.name = name;
    this.bones = 0;
    this.addBone = function(numOfBones) {
        this.bones += numOfBones;
        return this;
    }
}

const clifford = new Dog('Clifford');

We have a constructor function (meaning we're going to be creating new objects from this function) called Dog.

Consider what happens when we create a new Dog named "Clifford". The new keyword creates a brand new object in memory for Clifford, which is an instance of the Dog constructor function. So since we created something that didn't exist before, this refers to the object itself. If we replaced this.name = name with let myName = name what would happen? We wouldn't be able to access myName because myName isn't part of our brand new instance of the Dog object.

Let's give Clifford a few bones.

clifford.addBone(1).addBone(2).addBone(3);
console.log(clifford.bones); //outputs 6

How is it possible we can chain methods as we did above? Because the method returns this!

When a function is called as a method of an object, its this is set to the object the method is called on.

So we're returning the object after adding a bone to Clifford's bones. This gives us back the object itself again.

Arrow functions behave slightly differently. this is inherited from the current lexical scope and not the caller.

Answer 5

it's an easier way to write the name of an object, useful for larger programs that have many objects.