19 lines
2.1 KiB
Plaintext
19 lines
2.1 KiB
Plaintext
---
|
|
title: Explain how `this` works in JavaScript
|
|
---
|
|
|
|
There's no simple explanation for `this`; it is one of the most confusing concepts in JavaScript. A hand-wavey explanation is that the value of `this` depends on how the function is called. Having read many explanations on `this` online, [Arnav Aggrawal](https://medium.com/@arnav_aggarwal)'s explanation was the clearest. The following rules are applied:
|
|
|
|
1. If the `new` keyword is used when calling the function, `this` inside the function is a brand new object.
|
|
1. If `apply`, `call`, or `bind` are used to call/create a function, `this` inside the function is the object that is passed in as the argument.
|
|
1. If a function is called as a method, such as `obj.method()` — `this` is the object that the function is a property of.
|
|
1. 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 is the `window` object. If in strict mode (`'use strict'`), `this` will be `undefined` instead of the global object.
|
|
1. If multiple of the above rules apply, the rule that is higher wins and will set the `this` value.
|
|
1. 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 is created.
|
|
|
|
For an in-depth explanation, do check out his [article on Medium](https://codeburst.io/the-simple-rules-to-this-in-javascript-35d97f31bde3).
|
|
|
|
#### Can you give an example of one of the ways that working with this has changed in ES2015?
|
|
|
|
ES2015 allows you to use [arrow functions](http://2ality.com/2017/12/alternate-this.html#arrow-functions) which uses the [enclosing lexical scope](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#No_separate_this). This is usually convenient, but does prevent the caller from controlling context via `.call` or `.apply`—the consequences being that a library such as `jQuery` will not properly bind `this` in your event handler functions. Thus, it's important to keep this in mind when refactoring large legacy applications.
|