JavaScript Tutorial
JS - Introduction JS - Basic JS - Placement JS - Output JS - Statements JS - Syntax JS - Variables JS - Comments JS - Data Types JS - Operators JS - Operator Precedence JS - Condition JS - Switch JS - Functions JS - Objects JS - Loops For JS - Loops While JS - Break JS - Strings JS - String Methods JS - Numbers JS - Number Methods JS - Arrays JS - Array Methods JS - Array Iteration JS - Events JS - Event Listener JS - Event Propagation JS - Date JS - Math JS - Random JS - Boolean JS - Type Conversion JS - RegExp JS - Exception JS - Scope JS - Debugging JS - Hoisting JS - Strict Mode JS - this Keyword JS - Mistakes JS - Best Practices JS - Performance JS - Form Validation JS - ES6 Features
JS Objects
Object Definitions Object Properties Object Methods Object Constructors Object Prototypes
JS Functions
Function Definitions Function Parameters Function Call Function Apply Function Closures
JS HTML DOM
DOM Introduction DOM Methods DOM Selectors DOM HTML DOM CSS DOM Attributes DOM Navigation
JS Browser BOM
JS - Window JS - Screen JS - Location JS - History JS - Navigator JS - Popup Alert JS - Timing JS - Cookies
JS AJAX
AJAX - Introduction AJAX - XMLHttp AJAX - Request AJAX - Response AJAX - PHP
JS JSON
JSON - Introduction JSON - Syntax JSON - Data Types JSON - Parse JSON - Stringify JSON - Objects JSON - Arrays JSON - PHP JSON - JSONP
JS References
JavaScript Reference JavaScript Methods HTML DOM Reference

JavaScript this Keyword

The this keyword behaves a little differently in JavaScript compared to other languages.

The JavaScript this keyword refers to the object it belongs to.

It has different values depending on where it is used:

  • In a method, this refers to the owner object
  • Alone, this refers to the global object
  • In a function, this refers to the global object
  • In a function, in strict mode, this is undefined
  • In an event, this refers to the element that received the event
  • Methods like call(), and apply() can refer this to any object

Method context

In an object method, this refers to the owner of the method.

In the following example, when user.getName() is invoked, inside the function this is bound to the user object:

Run code

The user object is the owner of the getName method.


Global context

In the global execution context (outside of any function), this refers to the Global object whether in strict mode or not.

Run code

In a browser window the Global object is [object Window].



Function context

Inside a function, the value of this depends on how the function is called.

Since the following code is not in strict mode, this will default to the Global object, which is [object Window] in a browser:

Run code

In strict mode, however the value of this is undefined:

Run code

So, in strict mode, if this was not defined by the execution context, it remains undefined.


this in DOM Event Handlers

When a function is used as an event handler, its this is set to the element the event fired from:

Run code

When the code is called from an inline event handler, its this is set to the element on which the listener is placed:

Run code

Here is another example:

Run code

Explicit Function Binding

The call() and apply() methods are predefined JavaScript methods.

They can both be used to call an object method with another object as argument.

Run code

Arrow functions

In arrow functions, this retains the value of the enclosing lexical context's this.

In global code, it will be set to the global object:

Run code