DEV Community

Cover image for 'this' keyword in JavaScript simple explanation with call(), apply(), bind()
SABBIR AHMMED
SABBIR AHMMED

Posted on

'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();
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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();

Enter fullscreen mode Exit fullscreen mode

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');
Enter fullscreen mode Exit fullscreen mode

'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.

Discussion (0)