'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.
Top comments (0)