'this' keyword in JavaScript simple explanation with call(), apply(), bind()

'this'

First write a simple code on your browser console ,
console.log(this);
wow! You see a window object, right ?! but why?

For discussion, I divided this topic into 4 parts --

• Implicit binding
• Explicit binding
• new binding
• window binding

Implicit binding :

const student = {
    name: 'Sabbir',
    dept: "CSE",
    namePrint: function(){
        console.log(`My name is ${this.name} Ahmmed`);
    }
}

student.namePrint();

from above code we can see that, we are printing name from object using ‘this’ keyword. ‘this’ actually reference a nearest object and that’s why here nearest object is student and inner this object namePrint is a property which is a function and print name of student. So, here ‘this’ holds properties of student

Another,

const student = {
    name: 'Sabbir',
    dept: "CSE",
    namePrint: function(){
        console.log(`My name is ${this.name} Ahmmed`);
    },
    student2: {
        name: 'Jubayer',
        dept: "EEE",
        deptPrint: function(){
            console.log(`Department name is ${this.dept}`);
        }
    }
}

student.namePrint();
student.student2.deptPrint();

here, student2 is a property of student but student2 itself is an object. So, we know that ‘this’ holds nearest object. That’s why here ‘this.dept’ prints EEE not CSE.

Simple and bonus Tricks : look at your calling function deptPrint(), this function is calling using dot(.), before dot(.) you see an object ( student2 ) right ? Yes, for deptPrint function ‘this’ holds student2 properties ! nearest properties !

So, can you tell me which object actually reference for namePrint()’s ‘this’ ? comment please

Explicit binding : Call(), apply(), bind()

call() : call method is helper function of this. 'this' keyword by default reference a nearest object. But using call() method we can set that which object we can call for a function. call() can take parameter and 1st is an object and 2nd multiple parameter for function .
For example : functionName.call(objectName, p1, p2, .... );

var printName = function(v1, v2, v3){
    console.log(`${this.name} is ${v1}, ${v2} & ${v3}`);
}

var sabbir = {
    name: "Sabbir",
    dept: "CSE"
};

var v1 = 'good';
var v2 = 'boy';
var v3 = 'in the class';

printName.call(sabbir, v1, v2, v3);

apply(): Same as call() but call() can take parameter individually, On the other hand apply() can take array as a parameter. For example :
const p = [p1, p2, p3,...]
functionName.apply(objectName, p );

var v1 = 'good';
var v2 = 'boy';
var v3 = 'in the class';
const v = [v1, v2, v3]

printName.apply(sabbir, v);

bind(): Same as call() but doesn't call immediately. It stores values in a variable. After that, we have to call that variable as a function. For example :
const newFunc = printName.bind(sabbir, v1, v2, v3);
newFunc();

var printName = function(v1, v2, v3){
    console.log(`${this.name} is ${v1}, ${v2} & ${v3}`);
}

var sabbir = {
    name: "Sabbir",
    dept: "CSE"
};

var v1 = 'good';
var v2 = 'boy';
var v3 = 'in the class';

const newFunc = printName.bind(sabbir, v1, v2, v3);
newFunc();

new binding :

function Student(name, dept){
    // let this = Object.create(null);

    this.name = name;
    this.dept = dept;
    console.log(`${this.name} is now ${this.dept} student.`);

    // return this
}

const sabbir = new Student('Sabbir', 'CSE');

'new' keyword creates an object and ‘this’ keyword just reference that object’s properties. So, ‘this’ actually holds new Student’s properties.

window binding:

At the beginning , we print ‘this’ keyword that we found a window object. Because, I already told you that ‘this’ actually points to the nearest object, right? so, when ‘this’ does not find any of our custom-defined objects, it points to window object for browser and global object for Nodejs. Because we know that by default every browser has a window object.

Bonus Tricks :

• If you confuse about the reference of ‘this’, just do console.log(this) and find out its object.
• You may use “use strict” to the beginning of a script or a function.