JavaScript: Function "this" keyword

This

this

this keyword refers to an object.

Which object? Depends on how this is being invoked/used/called.

• In an object method: this refers to the object.
• Alone: this refers to the global object.
• In a function: this refers to the global object.
• In a function in strict mode: this is undefined.
• inan event: this refers to the element that received the event.
• Methods like call(), apply(), and bind() can refer this to any object.

this is not a variable, it is a keyword. The value can't be changed.

const template = [template];

"this" in a method

In an object method:

this refers to the object.

const person = {
    firstName   : "John",
    lastName    : "Doe",
    id          : 1234,
    fullName    : function() {return this.firstName + " " + this.lastName;}
};

In here:

• person is an object.
• fullName is a method of the person object.
• this refers to the person object.

Results

person;    // {firstName: 'John', lastName: 'Doe', id: 5566, fullName: ƒ}
person.fullName();      // 'John Doe'

"this" alone

Alone:

this refers to the global object.

• Alone is when this is in global scope.
• The global object of browser window is [object Window]
• This is the same for strict and non-strict mode.

let x = this;
x;      // Window

Strict mode

"use strict"
let x = this;
x;      // Window

"this" in a function

In a function:

• Default binding for this is to the global object
  • The global object of browser window is [object Window]
• Strict mode doesn't allow default binding: this is undefined.

function defaultF () { return this; }
defaultF();   // Window

Strict mode

"use strict"
function strictF () { return this; }
strictF();    // undefined

"this" in HTML event handlers

In HTML event handlers:

this refers to the HTML element that received the event.

Pink me up!

Code

<button onclick="this.style.backgroundColor='pink'">
    Pink me up!
</button>

Object method binding

Object method binding

Back to the example above: this is the person object.

const person = {
    firstName   : "John",
    lastName    : "Doe",
    id          : 1234,
    whatIsThis  : function() {return this;},
    fullName    : function() {return this.firstName + " " + this.lastName;}
};

this.firstName is the firstName property of this (the person object).

person;               // {firstName: 'John', lastName: 'Doe', id: 1234, whatIsThis: ƒ, fullName: ƒ}
person.whatIsThis();  // {firstName: 'John', lastName: 'Doe', id: 1234, whatIsThis: ƒ, fullName: ƒ}
person.fullName();    // 'John Doe'

Explicit function binding

Call and apply methods

Explicit function binding

• call()
• apply()
• These methods call an object method and use it with another object as argument.

call()

It calls an object method and use it with another object as argument.

object1.method1()                 // Calling function 1    
object1.method1.call(object2)     // Calling function 1 but on object 2

call() example:

const person1 = {
    fullName: function() {
        return this.firstName + " " + this.lastName;
    }
}

const person2 = {
    firstName: "John",
    lastName: "Doe",
}

person1.fullName.call(person2);     // "John Doe"

Breakdown and result:

• person1.fullName()
  • this refers to person1 object.
  • this.firstName and this.lastName
    • this refers to person1 object.
    • person1 object doesn't have firstName and lastName properties.
    • person2 object does have the firstName and lastName properties.
    • person2 object has to be called: .call(person2), replacing ()

// person1.fullName()
//                 .call(person2)
// person1.fullName.call(person2);     // "John Doe"

Function borrowing

Bind methods

bind()

With bind method, an object can borrow a method from another object.

object1.method1                 // is function 1    
object1.method1.bind(object2)   // is function 1 bound to object 2

Getting the function and return value:

object1.method1()     // Calling function 1

const method2 = object1.method1.bind(object2);
// Assigning function 1 that is bound to object 2 into a new function

method2               // is function 2
method2()             // Calling function 2

call() vs bind()

object1.method1      // is function 1
object1.method1()    // Calling function 1

object1.method1.call(object2)  // Calling function 1 on object 2
object1.method1.bind(object2)  // is function 1 bound to object 2

let method2 = object1.method1.bind(object2);
// Assigning function 1 that is bound to object 2 into a new function

method2      // is function 2
method2()    // Calling function 2

Similarities:

• Allowing a method of an object to be used with a different object

Differences:

• call: Calling a method to be executed. Result: the return value and other consequences of the code being executed.
• bind: Creating a new method, but not to execute. Result: a new function.

bind() example

const person1 = {
    firstName: "John",
    lastName: "Doe",
    fullName: function() {
        return this.firstName + " " + this.lastName;
    }
}

const person2 = {
    firstName: "Michael",
    lastName: "Scott",
}

let fullName2 = person1.fullName.bind(person2);

person1.fullName();     // "John Doe"  
fullName2();            // "Michael Scott"

this precedence

Which object this refers to? Use this order of precedence

1. bind()
2. call() and apply()
3. Object method
4. Global scope

References

• w3schools: JS this