Can someone explain what is this?


#1

Can someone explain what is a "this" keyword for and how do you use it.


#2

Hey @codejumper43323! So its preety hard to understand this, in javascript at first but youll understand it as you write it more often in your code.

I explained it clearly here :.

This is basically "This".

Defintion: the value of this is determined by how a function is called. It can't be set by assignment during execution, and it may be different each time the function is called

I dont normally understand by defintion, but by examples so let me give you examples, in each category (From MDN)

Diffrent Methods of appling "This"


As an object method

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

In the following example, when o.f() is invoked, inside the function this is bound to the o object.

var o = {
  prop: 37,
  f: function() {
    return this.prop;
  }
};

console.log(o.f()); // logs 37

Note that this behavior is not at all affected by how or where the function was defined. In the previous example, we defined the function inline as the f member during the definition of o.


this on the object's prototype chain

The same notion holds true for methods defined somewhere on the object's prototype chain. If the method is on an object's prototype chain, this refers to the object the method was called on, as if the method was on the object.

var o = {f:function(){ return this.a + this.b; }};
var p = Object.create(o);
p.a = 1;
p.b = 4;

console.log(p.f()); // 5

In this example, the object assigned to the variable p doesn't have its own f property, it inherits it from its prototype. But it doesn't matter that the lookup for f eventually finds a member with that name on o; the lookup began as a reference to p.f, so this inside the function takes the value of the object referred to as p. That is, since f is called as a method of p, its this refers to p. This is an interesting feature of JavaScript's prototype inheritance.


As a constructor

When a function is used as a constructor (with the new keyword), its this is bound to the new object being constructed.

Note: while the default for a constructor is to return the object referenced by this, it can instead return some other object (if the return value isn't an object, then the this object is returned).

function C(){
  this.a = 37;
}

var o = new C();
console.log(o.a); // logs 37


function C2(){
  this.a = 37;
  return {a:38};
}

o = new C2();
console.log(o.a); // logs 38

In the last example , because an object was returned during construction, the new object that this was bound to simply gets discarded. (This essentially makes the statement "this.a = 37;" dead code. It's not exactly dead, because it gets executed, but it can be eliminated with no outside effects.)


call and apply

Where a function uses the this keyword in its body, its value can be bound to a particular object in the call using the call or apply methods that all functions inherit from Function.prototype.

function add(c, d){
  return this.a + this.b + c + d;
}

var o = {a:1, b:3};

// The first parameter is the object to use as
// 'this', subsequent parameters are passed as 
// arguments in the function call
add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16

// The first parameter is the object to use as
// 'this', the second is an array whose
// members are used as the arguments in the function call

add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34
Note that with call and apply, if the value passed as this is not an object, an attempt will be made to convert it to an object using the internal ToObject operation. So if the value passed is a primitive like 7 or 'foo', it will be converted to an Object using the related constructor, so the primitive number 7 is converted to an object as if by new Number(7) and the string 'foo' to an object as if by new String('foo'), e.g.



My explanation at stack:

Let me show you what is happening in both of the codes:

First:

var setAge = function (newAge) {
  this.age = newAge;
};
// now we make bob
var bob = new Object();
bob.age = 30;
// and down here we just use the method we already made
bob.setAge = setAge;

// change bob's age to 50 here
bob.setAge(50);

Basically this.age = newAge is doing is that when he says Bob.setAge , you can change the actual age of the Object. Its like a setter. Getters and Setters are more explained here:

Second Code:

var square = new Object();
square.sideLength = 6;
square.calcPerimeter = function() {
  return this.sideLength * 4;
};
// help us define an area method here
square.calcArea = function() {
    return this.sideLength * this.sideLength
};

var p = square.calcPerimeter();
var a = square.calcArea();

Here when it says return this.sideLength, it is getting the sideLength of the square that is defined in that Object. You cant just say sideLength since it is not a global variable.

Hope this helped! :evergreen_tree:


#3

Does this code work? Here is what I think "this" is and can you explain if I am correct. We have a function called setAge and inside it we have this.age. This means that when an object call the method. Like object bob it becomes bob.age . "setAge" is still a function and we need to turn it into a method. That is why we put bob.hi=setAge; Then we put bob.hi() because it calls the function.

Also does this work:


#4

Both of them do work! And your terminology is correct! Those are specific types called getters and setters.

Getters are when you want to "GET" values, so an example of that is:

var getAge = function () {
  return this.age;
};
// now we make bob
var bob = new Object();
bob.age = 30;
// and down here we just use the method we already made
bob.getAge; //What this does is it returns 30, so you GET His previous age.

Setters are the one we were working on:

var setAge = function (newAge) {
  this.age = newAge;
};
// now we make bob
var bob = new Object();
bob.age = 30;
// and down here we just use the method we already made
bob.setAge = setAge; // We set them to setAge so we can change it.

// change bob's age to 50 here
bob.setAge(50) // Here we "SET" his age, same as changing it

Comprende? :smile:


#5

Thank you! I understand it now :smiley: