JavaScript this Keyword

Compared with other languages, the behavior of the this keyword in JavaScript is slightly different.

In JavaScript, the this keyword refers to its own object.

Depending on the position of use, it has different values:

• In the method, this refers toOwner object

• Individually, this refers toglobal object

• In a function, this refers toglobal object

• In a function, in strict mode, this isUndefinedof

• In an event, this refers to theelement

• Methods like call() and apply() can be used to bind it toany object

method context

In an object method, this refers to the method'suser.

In the following example, when callinguser.getName()When, the function binds this inside the function touserObject:

var user = {
firstName: "Vishal",
lastName : "Choudhary",
age :　22,
getName : function() {
　return this.firstName　+　" "　+　this.lastName;
}
});
document.write(user.getName());　　　//　"Vishal Choudhary"

HereuserThe object is the ownergetNamemethod.

Global context

In the global execution context (outside any function), this refers to the global object regardless of whether it is in strict mode or not.

//　In a web browser, the window object is also a global object:
console.log(this === window);　　//　true
a =　50;
console.log(window.a);　//　50
this.b = "w3codebox";
console.log(window.b)　　//　"w3codebox"
console.log(b)　//　"w3codebox"

In the browser window, the global object is[object Window].

Function context

Inside a function, the value of this depends on how the function is called.

Since the following code is not in strict mode, this is therefore set to the global object, that is, the global object in the browser:[object Window]:

function myFunc() {
return this;
}

In strict mode, however, the value of this isundefined:

function myFunc() {
"use strict";
return this;
}

Therefore, in strict mode, if the execution contextUndefinedIt, then it will remainUndefined state.

thisIn DOM event handlers

When a function is used as an event handler, this is set to the element that triggered the event:

let btn = document.querySelector("button");
btn.onclick = function() {
this.style.display = "none";
});

When calling code from inline event handlers, this is set to the element where the listener is placed:

<button onclick="this.style.display='none'">Click to Delete Me</button>

This is another example:

<button onclick="alert(this)">Click</button>

Explicit Function Binding

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

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

function add(c, d) {
return this.a　+　this.b　+　c　+　d;
}
var obj = {a:5, b:10});
add.call(obj,　5,　7);　　//　27
add.apply(obj, [10,　20]);　//　45

Arrow Functions (=>)

In arrow functions (=>), this always points to the lexical scope in which it was created.

In global code, it is set to the global object:

var globalObj = this;
var myFunc = (() => this);
document.write(myFunc() === globalObj);　　　//　true