An Interest In:
Web News this Week
- March 22, 2024
- March 21, 2024
- March 20, 2024
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
Why you cannot pass location.reload as an argument
Let's say we have a function named blockUser
which looks something like this
const blockUser = (afterBlock = window.location.reload) => { // Some code to block the user afterBlock()}
The interesting thing about this function is the afterBlock
argument which defaults to window.location.reload
. We basically want to reload the page after a user is blocked. But not always. Hence, the argument.
Lets use our pretty function:
blockUser()
Oops
Firefox gives us a more descriptive error.
Why does this happen?
location.reload
requires that this
should point to location
. When we are using javascript functions, this
is bound to the scope from which the function was called.
if we call window.location.reload()
directly, then the reload function is getting called through the location object. But lets say we do:
const test = window.location.reloadtest()
We will still get the same error.
Let's try to create our own reload function to see what's going on.
const fakeWindow = { location: { reload: function() { console.log(this) } } }fakeWindow.location.reload()// Re-assigninglet test = fakeWindow.location.reloadtest()
Whoa, looks like this
is not the same anymore when we assign the reload function to a variable. If you remember the Firefox error, the reload function requires that it should be called from the context of Location
. When we assign it to a variable, it gets called from the context of Window
.
How can we fix it?
The fix is pretty simple, you can just wrap a function around your re-assignment.
const blockUser = (afterBlock = () => window.location.reload()) => { // Some code to block the user afterBlock()}const test = () => window.location.reload()
It works now!
Bonus
Can you guess what will happen if we defined our fakeWindow
object a little differently?
const fakeWindow = { location: { reload: () => { console.log(this) } } }fakeWindow.location.reload()
Have you ever come across this problem in a real project? Drop your thoughts and experiences in the comments. Don't forget to answer the question in Bonus section :)
Original Link: https://dev.to/anshsaini/why-you-cannot-pass-locationreload-as-an-argument-26n1
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To