Understanding “this” in JavaScript


Function in javascript have properties, Just like javascript Object have properties. And when function get execute, It get the this property

Lets Take a closer look at “this”. this is a special character/keyword in javascript, As we know working with this is little tricky because it can change value when you and you are not expecting

Let see how we can track this

First we check this in global context

When we use this in global context that’s mean its not written inside a function scope. It refers to window object in browsers because window object is the top level global object in browser

console.log("This is: ", this);

It will return the window object in browser

Whenever you create a global variable its added to a property of window object. Let see an example these both methods will work same

var myVar = 5;
console.log("My var is: ", this.myVar);
console.log("My var is: ", myVar);
var myVar = 5;
function myFunction(){
  myVar++;
  console.log("My var is: ", this.myVar);
  console.log("My var is: ", this);
}

myFunction();

In that example the value of this will refer to the window object.

Lets see the value of this when we use constructor function

function MyObject() {
  var myVar = 300;
  this.obj1 = 100;
  this.obj2 = 200;
  this.obj3 = function(){
  return this.obj1 + this.obj2;
 }
}
var newObject = new MyObject();
console.log(newObject.myVar); // undefined
console.log(newObject.obj1); // 100
console.log(newObject.obj2); // 200
console.log(newObject.obj3()); // 300

Now in the first case we have created a variable myVar, Which is local to MyObject function. But in other cases this keyword refers to any of the instance we create with “MyObject” constructor function using new keyword. Basically instance is a Object which created by a Constructor Class.

In “MyObject” function this is refers to object which is created from new keyword of constructor class. As i said myVar variable in local to MyObject function. So when we are accessing newObject.myVar it returns undefined because myVar can only be accessable through MyObject function means myVar scope is only for MyObject function scope and it cannot be access by any other object which we create new of MyObject.

This entry was posted in AJAX, AngularJS, AngularJs2.0, HTML, JavaScript, jQuery, knoldus and tagged . Bookmark the permalink.

10 Responses to Understanding “this” in JavaScript

  1. Nikhil Kumar says:

    Spelling mistake in “Character/…” and “this” isn’t a character, in the myObject function myVar is created as a “private variable” and that is not accessible to outer scope unless it is not getting accessed using the public method of myObject function.

  2. harishgadiya says:

    No, In my examples i am trying to explain reference of this. And in my constructor method i am also targeting to this reference.

  3. zetoooo says:

    Nice post! I am wondering if the ‘new’ statement has any bad performance issues, do you know? I usually just use
    window.somefunction = function(){
    var obj = {};
    obj.a = ‘d’;
    return obj;
    }
    to initiate a new object.

  4. Yeah this is also a nice way to initiate Objects 🙂 Thanks for reading, Yes you are correct myVar is private to MyObject method that why we are getting “undefined” and this thing is already mentioned 🙂

  5. Operating Systems says:

    somefunction = function(){
    var obj = {};
    obj. Thanks for reading, Yes you are correct myVar is private to MyObject method that why we are getting “undefined” and this thing is already mentioned 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s