If you are working with javascript for a while, you will agree with me. This ‘this’
keyword is very confusing when you are writing code, especially when you read others code.
This may be controversial, but for me it's the this
keyword.
➡️ this
has a different values depending on where it is used.
➡️ Inside a method this
refers to the owner object.
➡️ When alone this
refers to the global object.
➡️ Inside a function this
this refers to the global object too.
➡️ In a function, in strict mode this
is undefined.
➡️ In a event this
refers to the element that received the event.
However, since 2019 I've been using React Hooks, I haven't had to use the this
keyword once.
Learn More About React Hooks On official website.
React Hooks.
Do you like React Hooks too?
Let's discuss it more in the comments section. If you agree don't forget to like ❤️ and save 📌
😎Keep Focused And Just Code It!
Top comments (21)
I see
this
as an implicit zeroth parameter of a function.You can explicitly assign its value by using the
.call
or.apply
or.bind
methods.Event listeners provide the event object as the first argument and the receiving element as the zeroth argument
this
.But I get that it is confusing, by its implicitness and by having many rules associated with it.
However, I don't know why have you suggested React Hooks as a remedy for
this
. You know that React isn't everything, right? People use JS for other things than React.It's literally very easy concept 😉
Quote:
By moving from classes to hooks React simply moved from one stateful system to another - from objects to closures.
Deep dive: How do React hooks really work?
Interestingly the Elm community has pretty much come to the conclusion that "components" don't work in a functional system - i.e. Model, Update, and View are three separate systems. While each can be broken down into smaller units, it's a mistake to throw a little piece of model, update and view into an aggregating whole.
So React's claim to being functional is only skin deep - at its core it's still object-oriented even if it prefers to use closures.
While I don't know if I'd say it's the most confusing part,
this
can certainly take on a lot of complexity once we start taking arrow functions and other peculiar little things into account.That said, even new developers should have a grasp of
this
, and the things that can impact it. I don't see hooks as a "solution" becausethis
isn't a problem. Using it can give you all the power, knowing nothing about it could take all that power away.Thanks for writing and starting a conversation!
Thanks for share your thoughts
No. For a regular function it depends on how it's invoked - not where it is used. For arrow and bound functions 'this' is fixed permanently.
Only when called through the object reference either with dot notation
obj.fn
or index notationobj['fn']
. A function isn't owned - it can merely be used in the manner of a method. Unless you are using arrow or bound functions explicitly, objects constructed viaclass
still use regular functions as methods to facilitate implementation inheritance. For regular functions 'this' is bound dynamically at runtime when the function is invoked. So the same function instance can see different values of 'this' during its lifetime just like any of its other arguments can vary from one invocation to the next.This is only true in React when a regular function is bound in the constructor or render or with an arrow function (automatically bound to the object inside the constructor or the render function). Function expressions (regular or arrow) created inside functional components use the references returned by hooks (instead of 'this') to reference data inside the closures that React is managing on the component's behalf.
React's synthetic event system didn't bother implementing event-handling-by-object as it is implemented in the DOM via the EventListener.handleEvent() method. In his usual enterprising manner Andrea Giammarchi (WebReflection) found a way around that.
With regular DOM events Event.target is the element on which the event occurred while Event.currentTarget identifies the current target element for the event as the it traverses the DOM during the event bubbling or capturing phase.
Hello Everyone,
This topic is so controversial and I'm already mentioned this point in my post. And with
this
keyword every developers has different opinions with there knowledge or some experience but my request to everyone just comment your opinion regarding this. So, don't argue with each other and don't say that anyone will feel inferior as he is sharing his experiences. So don't argue with anyone because in the end we're all developers.Stay Happy ❤️🤗 Stay Focused ❤️
😎Keep Claim And Just Code It!
If you know oops then
this
is no more confusing for you, but the way we use this inJS
is confusing.Approaching JavaScript with a classical object oriented mindset sets you up for failure and familiarity with class-based OO programming sets you up for confusion with 'this' in JavaScript.
Forget about what 'this' means in OOP languages and approach 'this' as an entirely new and independent concept. Remember JavaScript didn't get classes until ES2015 and even then those "classes" aren't "classical":
Quote
Objects aren't members of the creating
class
for life (they can be augmented at runtime) and neither do objects even need aclass
to be created. So whileclass
is more than syntax sugar it's not about classical OOP.Pre-
class
(ES5.1 and earlier)11.1 The 'this' Keyword
That's it. Nothing about objects and
class
didn't even exist yet. If you felt compelled to practice classical OO with JS you had to learn about prototype chaining, constructor stealing and combination, prototypal, parasitic and parasitic combination inheritance.Under 10.3 Execution Contexts
In practical terms this means that in general inside a
function fn()
the ThisBinding is determined by the way the function is called:fn()
then 'this' is the same as it would be for code at the top-level:undefined
in a strict environment orglobalThis
in a non-strict environment.record['fn']()
orrecord.fn()
then the object will be bound to 'this'.Function.prototype.bind() creates an entirely new function which has its ThisBinding permanently bound to the specified context.
ES2015 introduced arrow function expressions not as a shorthand for
function ()
but as abind
-ing convenience as arrow functions will always bind their 'this' to the 'this' of the context that creates them.Aside: JavaScript is Function-Oriented
I’m learning react now and I’m excited about it since it seems like it’s really powerful.
Thank you and Nicely explained, even I have been using React hooks and hadn't used 'this' yet, but while writing in plain JavaScript using Classes i have a bit confused about 'this'.
My problem with the 'this' keyword is that you basically go against what is normally considered best coding practices.
'This' can refer to different elements or objects in the code, where with functions, objects etc. you always strive to use descriptive unique naming. I know 'this' is an integrated part of modern Javascript, but I can't shake the feeling that it introduces some level of confusion and decrease readability of the code. This is not bad practice, but to me it will never really feel like the cleanest solution either.