Why do the arrow functions won't return "this" object in a jquery event handler?
Consider the following simple jquery event handler code I've been using since ages: $("body").on("click", ".dome .btn", function() { console.log(".dome .btn onclick::"); console.log($(this)); });...
Consider the following simple jquery event handler code I've been using since ages:
$("body").on("click", ".dome .btn", function() {
console.log(".dome .btn onclick::");
console.log($(this));
});
The this object here returns the button element in question which is the proper way. But today, I decided to use arrow function just to upgrade myself with the modern times:
$("body").on("click", ".dome .btn", () => {
console.log(".dome .btn onclick::");
console.log($(this));
});
But in this case, the this object won't return the button element. It will return the window object instead which is the parent of all parents! What kind of atrocious quirk is this? Few days ago, someone on the /r/webdev subreddit told me that arrow function is just a modern way of writing the old function(){} syntax.
10
votes