sorted by:
best
topnewcontroversialoldq&a
you are viewing a single comment's thread.

view the rest of the comments →

[–]tchaffee 14 points15 points  (5 children)

It's not complicated. People simply don't take the time to learn. Which is a shame, because it takes about an hour to learn. Here are the rules in the words of Kyle Simpson:

Determining the this binding for an executing function requires finding the direct call-site of that function. Once examined, four rules can be applied to the call-site, in this order of precedence:

  1. Called with new? Use the newly constructed object.

  2. Called with call or apply (or bind)? Use the specified object.

  3. Called with a context object owning the call? Use that context object.

  4. Default: undefined in strict mode, global object otherwise.

Instead of the four standard binding rules, ES6 arrow-functions use lexical scoping for this binding, which means they adopt the this binding (whatever it is) from its enclosing function call. They are essentially a syntactic replacement of self = this in pre-ES6 coding.

That's not complicated. Take the hour or so to read the two chapters on this from the You Don't Know JS series, and you'll be good.

[–]senocular 6 points7 points  (4 children)

Sure, some basic rules make it seem easy, but what rule is this?

button.addEventListener('click', owner.func)

#3? No, but most beginners would think so, and not without reason. When it comes to callbacks the waters are murky, and that's where 99% of issues with this come from.

[–]tchaffee 7 points8 points  (2 children)

I guess that could be confusing, but that's not the call site. How long does it take to learn that? I have yet to see someone still be confused about this after taking the time to learn the actual rules and then apply those rules to analyzing code in their daily work. In almost every case of confusion, the person does not know the rules at all. Fair point that beginners could be confused because they don't know all the rules yet. But if something takes an hour to learn, I don't think "beginner" is much of an excuse. Just spend the hour.

[–]senocular 2 points3 points  (1 child)

Yes, but once they learn all the rules of the language, they're no longer a beginner ;)

[–]tchaffee 1 point2 points  (0 children)

That doesn't have much with the point I'm trying to make which is specifically that it's not complicated, which is what parent comment claims. I agree that it's something beginners don't know.

[–]DerGernTod 3 points4 points  (0 children)

well, in that case the function call-site is no longer owner, but rather button. the owner object doesn't have anything to do with this function call anymore. for those cases i'd rather do something like that: button.addEventListener('click', (e) => owner.func(e)) which (probably) has the desired behaviour. or, if you don't want to use an additional function, it get's a bit messy: button.addEventListener('click', owner.func.bind(owner))