JavaScript: that vs this - Stack Overflow

admin管理员组

文章数量:1183204

I am trying to understand better the use of that and this in JavaScript. I am following Douglas Crockford's tutorial here: .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.

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.

• javascript
• this

Share Improve this question Follow edited Jul 8, 2014 at 14:37 FranXh asked Jul 8, 2014 at 14:30 FranXhFranXh 4,7712020 gold badges6060 silver badges7878 bronze badges 7

• 1 Simple: that is not a keyword, but an ordinary variable name. – Bergi Commented Jul 8, 2014 at 14:34
• 2 Before voting to close the question, please explain what you don't like about it so I have a chance to improve in the future. – FranXh Commented Jul 8, 2014 at 14:35
• "that" is just a variable used to store the current value of "this", which changes as the execution context of your program changes - ie when you enter a new scope – Mark Sherretta Commented Jul 8, 2014 at 14:36
• that is used to save the value of this because this of getB function is not the same than ObjectB – guy777 Commented Jul 8, 2014 at 14:36
• this is a keyword, that is just some variable name (it could be sausages). In ObjectB you attempt to pass that to ObjectA before you have defined that. In all of your examples, you could eliminate the use of that entirely and use this. The only reason to use that is if your usage will be in a scope where this points to something else. – James Commented Jul 8, 2014 at 14:36

 |  Show 2 more comments

4 Answers 4

Sorted by: Reset to default 24

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...

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.

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
     }

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".

本文标签： JavaScript that vs thisStack Overflow