CODEWITHSUNDEEP
javascriptthis
FranXh
FranXh

Reputation: 4771

JavaScript: that vs this

I am trying to understand better the use of that and this in JavaScript. I am following Douglas Crockford's tutorial here: http://javascript.crockford.com/private.html but I am confused regarding a couple of things. I have given an example below, and I would like to know if I am making a correct use of them:

function ObjectC()
{
   //...
}

function ObjectA(givenB)
{
   ObjectC.call(this); //is the use of this correct here or do we need that?

   var aa = givenB;
   var that = this;

   function myA ()
   {
      that.getA(); //is the use of that correct or do we need this?
   }

   this.getA = function() //is the use of this correct?
   {
       console.log("ObjectA");
   };


}

 function ObjectB()
 {

    var that = this;

    var bb = new ObjectA(that); //is the use of that correct or do we need this?

    this.getB = function()
    {
        return bb;
    };

    that.getB(); //is the use of that correct or do we need this?


 }

Note this is just an example.

Upvotes: 5

Views: 22210

Answers (4)

dt0xff
dt0xff

Reputation: 1563

this in JavaScript always refers to current object, method of which was called. But sometimes you need to access this of your object in deeper. For example, in callbacks. Like so:

function MyClass() {
    this.a = 10;
    this.do = function() {
        http.get('blablabla', function(data) {
            this.a = data.new_a;
        });
    };
}

It will not work, because this in callback may refer to http, to some dom element or just window(which is really common). So, it is common solution to define self or that, an alias for this or your object, so you can refer it anywhere inside.

function MyClass() {
    var self = this;
    this.a = 10;
    this.do = function() {
        http.get('blablabla', function(data) {
            self.a = data.new_a;
        });
    };
}

This should give you vision why it is used and how it should be used.

There is no other reasons(currect me if I'm wrong) to create special variable, you can use this to send your object to other objects and do things, many assignments, such logic, wow...

Upvotes: 24

Bergi
Bergi

Reputation: 664599

ObjectC.call(this); //is the use of this correct here or do we need that?

The first thing you need to understand is how the this keyword works. It's value depends on how the function/method/constructor is called.

In this case, function ObjectA is a constructor, so you can just use this inside the code of it. In fact, with var that = this; you declare them to be absolutely identical (unless you use that before assigning to it).

function myA() {
    that.getA(); //is the use of that correct or do we need this?
}

Again, it depends on how the function is called - which you unfortunately have not show us. If if was a method of the instance, this would have been fine; but but it seems you will need to use that.

this.getA = function() //is the use of this correct?

As stated above, using that would not make any difference.

var bb = new ObjectA(that) //is the use of that correct or do we need this?
var that = this;

that is undefined when it is used here. And it would be supposed to have the same value as this anyway. Better use this.

that.getB(); //is the use of that correct or do we need this?

Again, both have the same effect. But since you don't need that, you should just use this.

Upvotes: 3

RageCage
RageCage

Reputation: 740

What "that" is in this context is simply a variable that is equal to "this". That means saying "that" is exactly the same as saying "this", which makes in unnecessarily complicating.

This code:

var that=this;
that.getA();

Will yield the same result as this code:

this.getA();

Having a variable to represent "this" just complicates things when you can just say "this".

Upvotes: 0

Elfayer
Elfayer

Reputation: 4561

Everything is correct except for :

function ObjectB()
 {
    var bb = new ObjectA(that) //this is wrong
    var that = this;

    this.getB = function()
    {
        return bb;
    };

    that.getB();
 }

You are missing ; and that isn't declare.

You need that (in your case, this is the variable name you use) when you want to use this in another scope :

function ObjectB()
     {
        var that = this;

        // here 'this' is good
        function()
        {
            // Here 'this' doesn't refer to the 'this' you use in function ObjectB()
            // It's not the same scope

            // You'll need to use 'that' (any variable from the ObjectB function that refers to 'this')
        };

        // Here 'that' = 'this', so there is no difference in using one or another
     }

Upvotes: 3

Related Questions