What is this?

This always refers to and holds the value of an object.

In the browser

console.log(this);
this in browser window

From the browser, this refers to the window object.

'This' in Methods

From a method, this refers to the instance of object which has been created.

index.js
1
classPerson{
2
constructor(name='Marilyn'){
3
this.name=name;
4
}
5
6
greeting(){
7
console.log('hello',this.name);
8
}
9
}
10
11
constanonymousPerson=newPerson();
12
13
constpersonOne=newPerson('Davina');
14
15
anonymousPerson.greeting();
16
personOne.greeting();
17
18
//helloMarilyn
19
//helloDavina
20

'This' in Functions

From a function, this refers to the value of the object that invoked the function. In the example below, we are runnning our script using Node.js. Scripts run using Node have an object called global as their global object.

index.js
1
constbakeCake=()=>{
2
returnthis;
3
}
4
5
consttastyCake=bakeCake();
6
7
console.log(tastyCake);
8
9
//{}
10

'This' in event handlers

In event handlers, this refers to the value of the element which fired the event.

This element can be an html element such as a button, an anchor link etc

Consider this React component

index.js
1
importReact,{Component}from'react';
2
3
classAppextendsComponent{
4
5
handleClick=()=>{
6
console.log(this)
7
}
8
9
render(){
10
11
const{profiles}=this.state;
12
13
return(
14
<divclassName="App">
15
<buttononClick={(event)=>this.handleClick(event)}>Whatisthis?</button>
16
</div>
17
)};
18
}
19
20
exportdefaultApp;
21
event handler React.js

This refers to App, which is the dom element which fired the event.

Call, Bind and Apply

Call, bind and applyare JavaScript methods.

Bind

We have already been using the bind method in our examples.

In the example below, we bind 'name' to the instance of the object which is created. This is called implicit binding.

index.js
1
classAnimal{
2
constructor(name){
3
this.name=name;
4
}
5
}
6
7
constbelovedPet=newAnimal('Crookshanks');
8
9
console.log(belovedPet.name);
10
//Crookshanks
11

We can bind explicitly by using the bind keyword

index.js
1
varmyHouse=function(){
2
console.log(this.carpetColor);
3
};
4
5
varroomOne={
6
carpetColor:'grey'
7
};
8
9
varroomTwo={
10
carpetColor:'cream'
11
};
12
13
myHouse.bind(roomOne);
14
15
//atthispoint,myHouseisboundtoroomOnebutthefunctionisnotinvoked.
16

In the example given above, at the point of line 14, myHouse is bound to roomOne but the function is not invoked. Nothing will be logged to the console.

Call

Call allows you to specify the context of this, and immediately invokes that function.

index.js
1
varmyHouse=function(){
2
console.log(this.carpetColor);
3
};
4
5
varroomOne={
6
carpetColor:'grey'
7
};
8
9
varroomTwo={
10
carpetColor:'cream'
11
};
12
13
myHouse.call(roomOne);
14
//grey
15

Apply

Apply works in the same way as call.

The difference between call and apply is that call will accept the first agument to be the context, then the rest of the expected arguments to be passed one by one

Apply expects the first argument to be the context, then the second argument will be an array of the expected arguments.

index.js
1
varmyHouse=function(length,width){
2
console.log(this.carpetColor);
3
};
4
5
varroomOne={
6
carpetColor:'grey'
7
};
8
9
myHouse.call(roomOne,2,4);
10
myHouse.apply(roomOne,[3,6])
11
12
//greygrey
13