Discussion on: Rethinking JavaScript: The complete elimination and eradication of JavaScript's this.

View post

Replies for: this is a complicated concept to grasp and I'm sure there is room for improvement in its design; however, it is not broken and especially not broke...

"Having difficulties" is part of learning process. That's how you grow.

I do not know a single developer that hasn't had to debug a this problem by writing console.log(this). It is not accepted that as a JavaScript developer, at some point you will have to debug `this.

it doesn't have to be

Nikita Agafonov • Aug 9 '18

Duh! Ofcourse you will. Just like with any other code that you're not sure about YET. Then as you debug it to get an insight, to see what this points to you'll ask yourself - wait a second how did that happened? Does that mean... OOOH! And then the spoon bends, the matrix code appears and you get it. And that my friend is one of the big pleasures of working with your head.
It aint broken. Case closed.

JavaScript Joel • Aug 9 '18

Just FYI, saying case closed doesn't close the case.

You don't have to use the library. But please remember to think of me the next time you write console.log(this).

JavaScript Joel • Aug 9 '18

Arrow functions solve ONE of the problems with this.

Here's a reference to this that you can't arrow function your way out of.

import { EventEmitter2 } from 'eventemitter2'
const events = new EventEmitter2({ wildcard: true })

events.on('button.*', function() {
  console.log('event:', this.event)
})

events.emit('button.click')

nothis also does more than remove this. It lets you use arrow functions and also argument destructuring. Both of which are not options otherwise.

zeddotes • Aug 10 '18

What is the purpose of trying to access this.event on the 5th line? If this.event was a value declared in the parent scope, the fat arrow would actually save you. The implication of using EventEmitter2 would be so that you can access arguments from the callback of the events.on method (ie. args passed inside the callback).

JavaScript Joel • Aug 10 '18

The code is correct. This is how their API is written. I need the this from the function inside the events.on method, not the parent scope.

It works the same way jQuery's this context works here:

$('p').on('click', function() {
  console.log($(this).text())
})

You can't write an arrow function for these.

zeddotes • Aug 10 '18

Actually, jQuery calls the callback of the element's this passed into it via apply and call. Check it out: code.jquery.com/jquery-3.3.1.js

benwick • Aug 17 '18

In jquerys events this is the same as event.delegateTarget: api.jquery.com/event.delegateTarget/

So you can use the arrow function to get access to the parent context and still access the element you have attached the listener to... Please don't stop using this just because you don't know how a lib works.

$('p').on('click', (evt) => {
  console.log($(evt.delegateTarget).text())
})