What does this means in javascript

The JavaScript this Keyword

In JavaScript, the this keyword refers to an object.

Which object depends on how this is being invoked (used or called).

The this keyword refers to different objects depending on how it is used:

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 .

In an event, this refers to the element that received the event.

Methods like call() , apply() , and bind() can refer this to any object.

Note

this in a Method

When used in an object method, this refers to the object.

In the example on top of this page, this refers to the person object.

Because the fullName method is a method of the person object.

this Alone

When used alone, this refers to the global object.

Because this is running in the global scope.

In a browser window the global object is [object Window] :

Example

In strict mode, when used alone, this also refers to the global object:

Example

this in a Function (Default)

In a function, the global object is the default binding for this .

In a browser window the global object is [object Window] :

Example

this in a Function (Strict)

JavaScript strict mode does not allow default binding.

So, when used in a function, in strict mode, this is undefined .

Example

this in Event Handlers

In HTML event handlers, this refers to the HTML element that received the event:

Example

Object Method Binding

In these examples, this is the person object:

Example

const person = firstName : «John»,
lastName : «Doe»,
id : 5566,
myFunction : function() return this;
>
>;

Example

const person = firstName: «John»,
lastName : «Doe»,
id : 5566,
fullName : function() return this.firstName + » » + this.lastName;
>
>;

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

Explicit Function Binding

The call() and apply() methods are predefined JavaScript methods.

They can both be used to call an object method with another object as argument.

See Also:

The example below calls person1.fullName with person2 as an argument, this refers to person2, even if fullName is a method of person1:

Example

const person1 = <
fullName: function() <
return this.firstName + » » + this.lastName;
>
>

const person2 = firstName:»John»,
lastName: «Doe»,
>

// Return «John Doe»:
person1.fullName.call(person2);

Function Borrowing

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

This example creates 2 objects (person and member).

The member object borrows the fullname method from the person object:

Example

const person = <
firstName:»John»,
lastName: «Doe»,
fullName: function () <
return this.firstName + » » + this.lastName;
>
>

const member = firstName:»Hege»,
lastName: «Nilsen»,
>

let fullName = person.fullName.bind(member);

This Precedence

To determine which object this refers to; use the following precedence of order.

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

Is this in a function being called using bind()?

Is this in a function being called using apply()?

Is this in a function being called using call()?

Is this in an object function (method)?

Is this in a function in the global scope.

Источник

What Does ‘this’ Mean in JavaScript? The this Keyword Explained with Examples

Kingsley Ubah

To understand what this truly means in JavaScript, let’s take a look at a very similar concept in the English Language: Polysemy.

Let’s consider the word «run«. Run is a single word which could mean many different things depending on the context.

• “I will run home” – means to move quickly on foot
• “She ran the 1500m” – means to run in a race
• “He is running for president” – means vying for an official position
• “The app is running” – means the software application is still open and active
• “Go for a run” – means running as a form of exercise

A similar scenario plays out when you use the this keyword in your JavaScript code. When you do so, it automatically resolves to an object or scope depending on the context at which is was defined.

What are the possible contexts? And how can we use that information to deduce which object a this call will resolve to?

this Context

When used in a function, the this keyword simply points to an object to which it is bound. It answers the question of where it should get some value or data from:

If you liked or benefited from this article and would like to support me, you can buy me a coffee here.

You can also reach me on Twitter. Be sure to check out my blog for more JavaScript and programming related content.

Источник