DEV Community

loading...
Cover image for Can't Touch "this"

Can't Touch "this"

icecoffee profile image atulit023 Updated on ・2 min read

can't touch this

'this' is a special variable that is created for every execution context (i.e. it is a part of the execution context).
It takes the value of the owner of the function in which the 'this' keyword is used.

The 'this' keyword is not a static variable actually it depends totally on which type of execution context and with which type of environment variable it is defined.

Now, 'this' can broadly be divided into four types:
1) For Methods
2) Function declarations and Function expressions.
3) Arrow functions
4) Event listeners

Methods

this= object that is calling the method

'use strict';

const duck = {
  name: 'donald',
  getName: function(){
    console.log(this);
  }
};

duck.getName();
Enter fullscreen mode Exit fullscreen mode
Output:

Alt Text
Now ain't that great this= Direct parent, which in this case is duck Object.


Function declarations and Function expressions

For sloppy mode this= window object
and for strict mode this= undefined.
But you gotta understand, this 'this' that we are logging to the console is actually part of this function.
I mean there is some memory in its execution context exclusively dedicated to this 'this'.
i.e every function expression and function decleration have its own 'this'

const strict = function(){
  'use strict';
  console.log(this);
};

const sloppy = function(){
  console.log(this);
};


strict();
sloppy();
Enter fullscreen mode Exit fullscreen mode
Output:

Alt Text


Arrow functions

Arrow functions don't have their own 'this' keyword so they inherit the value of 'this' keyword from their direct parent when it is called.

'use strict';

const arrow = () =>{
  console.log(this);
};

arrow();

const duck = {
  name: 'donald',
  getName: function(){
    const arrow = () =>{
      console.log(this);
    };
    arrow();
  },
  gogetter: ()=>{
    console.log(this);
  }
};

duck.getName();
duck.gogetter(); // pay attention to this part

Enter fullscreen mode Exit fullscreen mode
Output:

Alt Text
Look at the third output, why is that?
Same as I explained before 'this' is dynamic and for arrow functions points to value of its direct parent hence called lexical 'this'.


Event Listeners:

this= DOM element that the handler is attached to.

'use strict';

const body = document.querySelector('body');
body,addEventListener('click', function(){
  alert("Hello World!");
  console.log(this); 
});
Enter fullscreen mode Exit fullscreen mode

Paste this code in your console and click see what happens

Output:

Alt Text

Why window object?
Because in DOM window is the direct parent of the body element.


Take aways

  1. 'this' has a dynamic value.
  2. Never use arrow functions as methods of an object. Why because arrow functions have no memory allocated for 'this'.
  3. Always prefer strict mode. "personal opinion"

Fun Fact:
JavaScript was developed by Brendan Eich in just 10 days.
excited

I hope this might have helped you a little.

Comments "this" if you got any doubt or suggestions?

Have a beautiful day.

Discussion (0)

pic
Editor guide