Javascript 101: What is “this”
If there has ever been a more tricky subject in Javascript, “this” would be it(see what I did there 😏). I can’t count the number of times I’ve had to guess the “this” binding for a particular function to make sense of a coding challenge all to no avail. As elusive as it may be, understanding it is sure to bring more clarity. Here is a simple overview;
The THIS reference in javascript is a runtime binding and is based on the conditions of its enclosing function’s invocation or call.
Confused? Let's go deeper.
When a function is invoked, an activation record, otherwise known as an execution context is created. This record contains information about;
- Where the function was called from (Call-stack)
- How the function was invoked
- And what parameters were passed. etc
One of the properties of the record is the “This” reference. Function foo’s call-site is in the global object and hence binds to it when “this” is referenced within foo. Since variable a is defined in the global object as 2, a call to foo would check the global object for a and print out 2 to the console. This method of resolving a “this” reference is called Default binding and is the most common case of function calls.
Resolving “THIS” in an Executing Function
Now to the Bone of Contention. Default binding is the most common(weakest) of Four ways to determine the “this” binding for a particular function. Below are the other methods to do so.
- Implicit Binding
Here the call-site uses the obj context to reference the function. The obj owns the function reference at the time the function is called. A call to foo emits 2 by looking up the value of a in its “this” binding which is currently is obj.
One common frustration with this binding type is that a this reference can be implicitly lost through function callbacks. In the case of events in javascript, the this context is directly overridden to point to the DOM instance the event was called against.
2. Explicit Binding
Invoking foo with explicit binding by foo.call(..) allows us to force its “this” to be obj. A downside to this method is that it can only be enforced at the call site which sometimes is not in our control like in the case of callbacks where a “this” context can get lost or replaced. To circumvent this hindrance we apply a stricter variation of explicit binding called hard binding
In hard binding we create a function bar() which, internally, manually calls foo.call(obj), thereby forcibly invoking foo with obj binding for this. No matter how you later invoke the function bar, it will always manually invoke foo with obj. This binding is both explicit and strong.
Since hard binding is such a common pattern, it’s provided with a built-in utility as of ES5 — Function.prototype.bind. And is used like so: foo.bind(obj)
3. New Operator
When a function is invoked with new in front of it, otherwise known as a constructor call, the following things are done automatically:
- A brand new object is created (aka constructed) out of thin air.
- The newly constructed object is [[Prototype]]-linked.
- The newly constructed object is set as the “this” binding for that function call.
Unless the function returns its own alternate object, the new-invoked function call will automatically return the newly constructed object which serves as the “this” binding for the function.
Lexical This
In situations where identifying a “this” reference could prove to be a hassle, ES6 does give us a way to escape the guessing game entirely. Instead of the four standard binding rules, ES6 arrow-functions use lexical scoping for “this” binding, which means they inherit the “this” binding (whatever it is) from its enclosing function call.
It’s important to note that arrow-functions are essentially disabling the traditional this mechanism in favor of more widely understood lexical scoping. by providing an alternative to using bind(..) on a function.
Conclusion
That was enlightening right? Not only have we understood “THIS” we’ve also learned how to use arrow functions to make use of the enclosing scope’s “this” via lexical scoping. I hope you never find yourself guessing what “this” is anymore. Ciao 👋
Next stop — Prototypes
References
You Don’t Know JS: this & Object Prototypes — https://www.amazon.com/You-Dont-Know-JS-Prototypes/dp/1491904151
