JavaScript: this Binding
Purpose of thisBinding
In JavaScript, when a function is called, it has a associated value called “this binding”. (Except Arrow Function.)
In function body, the “this binding” is represented by the keyword this
.
The purpose of “this binding” is to allow function to implicitly work with a object. (without actually passing the object as argument.)
For example, when you call
arrayX.push()
,
the function push
's
“this binding” is
arrayX. That's how push
knows about arrayX.
A function may or may not make use of “this binding”. For example, if a user defined function body does not contain this
keyword, then the associated “this binding” does nothing.
What is the Value of thisBinding?
The “this binding” is designed for use with method only. Typically, for method call of the form obj.method_name()
, where the method method_name
's “this binding” will be obj.
When this
is evaluated outsite a function, its value is the Global Object.
When this
is used inside a function and the function is called, the value of this
depends on how the function is called. Here's a summary:
- When a function is called by property access, for example,
obj.f()
, the value ofthis
is the object obj. - When a function is called with the keyword
new
, as innew f()
ornew y.f()
, the value ofthis
is the newly created object. [see Operator “new”] - When a function is called in a global context as a function, such as
f()
, the value ofthis
isundefined
if Strict Mode is on, else the Global Object. - In a nested function (for example, g is nested inside f), when g is called inside f, the value of g's
this
isundefined
if Strict Mode is on, else the Global Object.
Following are details.
thisBinding in Method Call
The most common use is calling a function as a method of some object. e.g. obj.f()
.
In such case, the value of this
is the object that the method f
is a property of.
(the xobj
)
let jj = { k1: function () { return this; }, }; console.log(jj === jj.k1());
thisBinding in Constructor Call (new f())
When a function is invoked as a constructor
(for example, new F()
or
new obj.F()
), its this
value is the newly created object. (similar to this = Object.create(F.prototype)
)
[see Operator “new”]
// typical example of using thisBinding function F1(x) { this.kk = x; } const x = new F1(4); console.log(x.hasOwnProperty("kk"));
thisBinding in Global Function Call
When a function is called in a global context and not as a method of another object, the this
evaluates to undefined
if strict mode is on, else it's the Global Object
.
"use strict"; function F1() { return this; } console.log(F1() === undefined);
// in non-strict mode, in browser, thisBinding is the Global Object window "use strict"; function F2() { return this; } console.log(F2() === window);
[see What is Strict Mode and How to Determine Strict Mode?]
thisBinding in Nested Functions
In a nested function (for example, g is nested inside f), when g is called inside f, the value of g's this
is undefined
if strict mode is on, else the Global Object
.
// thisBinding is in nested function has value undefined, if under use strict "use strict"; function ff() { const gg = function () { return this; }; return gg(); } console.log(ff() === undefined); // if in non strict mode, it returns the Global Object.
Call Function with any thisBinding
You can call a function with its this
set to any object you want. You can do this by using the method “call” or “apply”. See: Function Call, Apply, Bind
.