The Simple Rules to ‘this’ in Javascript
Determining what this
is is actually rather simple. The overarching rule is that this
is determined at the time a function is invoked by inspecting where it’s called, its call site. It follows these rules, in order of precedence.
Rules
If the new
keyword is used when calling the function, this
inside the function is a brand new object.
function ConstructorExample() {
console.log(this);
this.value = 10;
console.log(this);
}
new ConstructorExample();
// -> {}
// -> { value: 10 }
2. If apply
, call
, or bind
are used to call a function, this
inside the function is the object that is passed in as the argument.
function fn() {
console.log(this);
}
var obj = {
value: 5
};
var boundFn = fn.bind(obj);
boundFn(); // -> { value: 5 }
fn.call(obj); // -> { value: 5 }
fn.apply(obj); // -> { value: 5 }
3. If a function is called as a method — that is, if dot notation is used to invoke the function — this
is the object that the function is a property of. In other words, when a dot is to the left of a function invocation, this
is the object to the left of the dot. (ƒ symbolizes function in the code blocks)
var obj = {
value: 5,
printThis: function() {
console.log(this);
}
};
obj.printThis(); // -> { value: 5, printThis: ƒ }
4. If a function is invoked as a free function invocation, meaning it was invoked without any of the conditions present above, this
is the global object. In a browser, it’s window
.
function fn() {
console.log(this);
}
// If called in browser:
fn(); // -> Window {stop: ƒ, open: ƒ, alert: ƒ, ...}
*Note that this rule is the same as rule 3 — the difference is that a function that is not declared as a method automatically becomes a property of the global object, window
. This is therefore an implicit method invocation. When we call fn()
, it’s interpreted as window.fn()
, so this
is window
.
console.log(fn === window.fn); // -> true
5. If multiple of the above rules apply, the rule that is higher wins and will set the this
value.
6. If the function is an ES2015 arrow function, it ignores all the rules above and receives the this
value of its surrounding scope at the time it’s created. To determine this
, go one line above the arrow function’s creation and see what the value of this
is there. It will be the same in the arrow function.
const obj = {
value: 'abc',
createArrowFn: function() {
return () => console.log(this);
}
};
const arrowFn = obj.createArrowFn();
arrowFn(); // -> { value: 'abc', createArrowFn: ƒ }
Going back to the 3rd rule, when we call obj.createArrowFn()
, this
inside createArrowFn
will be obj
, as we’re calling it with dot notation. obj
therefore gets bound to this
in arrowFn
. If we were to create an arrow function in the global scope, this
would be window
.
*For an in-depth explanation, do check out Arnav Aggrawal's article on Medium
Join Aman on Peerlist!
Join amazing folks like Aman and thousands of other people in tech.
Create ProfileJoin with Aman’s personal invite link.
0
1
0