Geeks With Blogs
Annie Bougie
Being a new Javascript developer coming from a C# background, I'm finding out the this keyword is a lot more nuanced (confusing?) than in C#. In C#, this means the current instatiation of the class you are in. In VB.NET, they don't have a this, they only have a Me. VB.NET has this kind of weird throwback to old VB, the module. In the module, you are executing in the global context, so there is no Me. The Me keyword is undefined. Java is very similar in giving you a C#-style, instance-scoped this, except you get the added goodness of the super keyword, which is the parent of the current instantiated object. With Python, you don't even get a this. You only get a self, and only if you define it. Why so stingy, Python?

Anyway, back to Javascript and this.

this in Javascript is really a strange beast. Since there are no classes, this can mean many different things. By itself, this refers to the global context. Anything that is global, such as Array or console, is accessible. Of course, they are accessible without the this keyword too; that's why we call them global!

<!DOCTYPE html><html><body><script>
this.console.log("This is the global context");
</script></body></html>

Within the context of an object, this refers to that object.

var box = {
  length: 465,
  width: 373,
  depth: 243,
  getVolume: function() {
    return this.length * this.width * this.depth;
  }
};

In this example, this.length refers to the box property named length. What happens to this when you have nested objects?

var box = {
  length: 465,
  width: 373,
  depth: 243,
  frameCount: 10,
  getFrames: function() {
    var frames = [];
    for (var i = 0; i < this.frameCount; i++) {
      var frame = {
        length: 480,
        width: 29,
        depth:  230,
        getArea: function() {
          return this.length * this.width;
        }
      };
      frames.push(frame);
    }
    return frames;
  },
  getVolume: function() {
    return this.length * this.width * this.depth;
  }

};

In the previous example, this.frameCount, the this refers to the box object. In the getArea function, this refers to frame. If you needed a reference to the box object within frame, you would need to create a new variable and store the current value of this.
Posted on Tuesday, April 9, 2013 7:30 AM | Back to top


Comments on this post: What is this, Javascript?

# re: What is this, Javascript?
Requesting Gravatar...
Hi Anne,

The value of `this` in javascript is very useful... but due to it's syntactic similarity to various other languages - often times people are confused about why it is the value that it is.

There was recently a good article written on Tech.Pro on this exact issue called "Avoiding the 'this' problem in JavaScript":

http://tech.pro/tutorial/1192/avoiding-the-this-problem-in-javascript
Left by Leland Richardson on Apr 09, 2013 7:42 AM

# re: What is this, Javascript?
Requesting Gravatar...
Nice post!thank you :)
Left by Naziur Rahman on Apr 10, 2013 6:05 AM

# re: What is this, Javascript?
Requesting Gravatar...
Thanks, Leland,

I am just learning Javascript, and knowing all the intricacies of the 'this' keyword will take some time.
Left by Me on Apr 11, 2013 3:39 AM

# re: What is this, Javascript?
Requesting Gravatar...
Java script is an essential elements for web development. Its work like a automated tools that are automating your site.
Left by chato stewart on Apr 11, 2013 4:37 AM

# re: What is this, Javascript?
Requesting Gravatar...
In javascript everything is an object, so this is the same has in other languages.
'this' represents the current context.

a function is an object so:
var Person = function(options){
this.name = options.name;
this.age = options.age;
}

in the previous the this is for the function Person.

you can change the context for example:

function setAge(age){
this.age = age;
}

var p = new Person();

setAge.call(p, 18);


in the previous example the function setAge will be called in the Person context so this will represent a Person object.
Left by Rui Lima on Apr 16, 2013 10:08 PM

# re: What is this, Javascript?
Requesting Gravatar...
"In VB.NET, they don't have a this, they only have a Me. VB.NET has this kind of weird throwback to old VB, the module. In the module, you are executing in the global context, so there is no Me. The Me keyword is undefined. "

Hi Annie, not exactly sure what you are driving at there. For starters, VB.Net modules are just the same as static classes in C#. So there's no 'Me' (or this) because there's no instance to refer to. The difference between Me and this is just syntax, functionally they are the same. Access modifiers can be applied to module methods, so you're not necessarily "executing in the global context". Personally I don't use modules, they're a bit of a VB6 code smell IMHO.
Left by Richard on Dec 28, 2016 10:42 PM

Your comment:
 (will show your gravatar)


Copyright © Annie Bougie | Powered by: GeeksWithBlogs.net