this keyword in javascript

VIJAY KUMAR REDDY BOLLAVARAM — Sun, 12 Jan 2025 06:15:04 +0000

One of the most confused keyword in JavaScript is the this keyword. It's a special identifier keyword that's automatically defined in the scope of every function, but what exactly it refers to confuse even seasoned JavaScript developers.

The this keyword refers to the context where a piece of code, such as a function's body, is supposed to run. Most typically, it is used in object methods, where this refers to the object that the method is attached to, thus allowing the same method to be reused on different objects.

The value of this can be identified where the function is executed not where the function is declared

We will examine different rules to identify the this in javascript

Default binding

The default rule we will apply most common case of function calls: standalone function execution. Think of this this rule as the default catch-all rule when none of the other rules apply.

In standalone functions call this value will be globalObject (in browser env it is window object, in node env it will be global)

function bar() {
    console.log(this) // this will be global object (window)
}
bar()

But......

the value of this can be different how the code is running in strict mode or non strict mode

If When function invoked as standalone function this typically refer to global object in non strict mode and undefined in strict mode

"use strict"
function bar() {
    console.log(this) // undefined
}
bar()

Subtle but important, the global object is only eligible for the default binding if the contents of bar() are not running in strict mode;

function bar() {
    console.log(this) // global object (window)
}
(function() {
    "use strict"
    bar()
})()

Implicit binding

When a regular function is invoked as a method of an object (obj.method()), this points to that object.

function bar() {
    console.log(this)
}
const obj = {
    name: "javascript",
    bar,
}
obj.foo() // this here is object owing the function

Firstly, notice the manner in which bar() is declared and then later added as a reference property onto obj. Regardless of whether bar() is initially declared on obj, or is added as a reference later (as this snippet shows), in neither case is the function really "owned" or "contained" by the obj object.

Implicit lost:
When using callbacks, implicitly bound function loses that binding, which usually means it falls back to the default binding, of either the global object or undefined, depending on strict mode.

function bar() {
    setTimeout(function() {
        console.log(this) // this will be global object
    }, 1000);
}
const obj = {
    name: "javascript",
    bar
}
obj.bar() // this will be global object

function bar() {
    console.log(this)
}
const obj = {
    name: "javascript",
    bar
}
const a = obj.bar
a() // this will be global object

Explicit binding

With implicit binding as we just saw, we had to mutate the object in question to include a reference on itself to the function, and use this property function reference to indirectly (implicitly) bind this to the object.

But, what if you want to force a function call to use a particular object for the this binding, without putting a property function reference on the object?

Yes its possible, javascript provide many methods like .map, .filter for array we have few methods in function. These are apply , call and bind

Here is the syntax for these methods
call

fn.call(context, arg1, arg2, arg3)

apply

fn.apply(context, [arg1, arg2, arg3])

Subtle different between apply and call. The syntax is same but we pass arguments as array in apply method

function bar() {
    console.log( this.a );
}
var obj = {
    a: 2
};
bar.call( obj ); // 2

Invoking bar with explicit binding by bar.call(..) allows us to force its this to be obj.

new Binding

When a function is used as a constructor (with the new keyword), its this is bound to the new object being constructed, no matter which object the constructor function is accessed on. The value of this becomes the value of the new expression unless the constructor returns another non–primitive value.

function C() {
  this.a = 37;
}

let o = new C();
console.log(o.a); // 37

function C2() {
  this.a = 37;
  return { a: 38 };
}

o = new C2();
console.log(o.a);

this in arrow function

Arrow-functions adopt the this binding from the enclosing (function or global) scope.

ex:

const obj1 = {
    name: "Vijay", 
    getName: function foo() {
        const a = () => {
            console.log(this) // this will be its enclosing scope this means foo this
        }
        a()
    }
}

obj1.getName()

const a = () => {
    console.log(this) // this will be global object. 
}
const obj1 = {
    name: "Vijay", 
    getName: function() {
        a()
    }
}

obj1.getName()