The this
keyword is an object that represents the context of an executing function. Regular functions can have their this
value changed with the methods call()
, apply()
and bind()
. Arrow functions implicitly bind this
so that it refers to the context of its lexical environment, regardless of whether or not its context is set explicitly with call()
.
Here are some common examples of how this
works:
this
refers to the object itself inside regular functions if the object precedes the invocation of the function.
Properties set as this
do not refer to the object.
var myObject = {
property: this,
regularFunction: function() {
return this
},
arrowFunction: () => {
return this
},
iife: (function() {
return this
})()
}
myObject.regularFunction() // myObject
myObject["regularFunction"]() // my Object
myObject.property // NOT myObject; lexical `this`
myObject.arrowFunction() // NOT myObject; lexical `this`
myObject.iife // NOT myObject; lexical `this`
const regularFunction = myObject.regularFunction
regularFunction() // NOT myObject; lexical `this`
this
refers to the element listening to the event.
document.body.addEventListener("click", function() {
console.log(this) // document.body
})
this
refers to the newly created object.
class Example {
constructor() {
console.log(this) // myExample
}
}
const myExample = new Example()
With call()
and apply()
, this
refers to the object passed as the first argument.
var myFunction = function() {
return this
}
myFunction.call({ customThis: true }) // { customThis: true }
Because this
can change depending on the scope, it can have unexpected values when using regular functions.
var obj = {
arr: [1, 2, 3],
doubleArr() {
return this.arr.map(function(value) {
// this is now this.arr
return this.double(value)
})
},
double() {
return value * 2
}
}
obj.doubleArr() // Uncaught TypeError: this.double is not a function
- In non-strict mode, global
this
is the global object (window
in browsers), while in strict mode globalthis
isundefined
. Function.prototype.call
andFunction.prototype.apply
set thethis
context of an executing function as the first argument, withcall
accepting a variadic number of arguments thereafter, andapply
accepting an array as the second argument which are fed to the function in a variadic manner.Function.prototype.bind
returns a new function that enforces thethis
context as the first argument which cannot be changed by other functions.- If a function requires its
this
context to be changed based on how it is called, you must use thefunction
keyword. Use arrow functions when you wantthis
to be the surrounding (lexical) context.