Make the statement less definitive

[phanan]

The current statement reads:

Since arrow functions are bound to the parent context, this will not be the Vue instance as you'd expect and this.a or this.myMethod will be undefined.

which is true in most, but not all, of the cases. If the parent context by any chance has a or myMethod, this.a and this.myMethod won't be undefined: https://jsfiddle.net/phanan/Lwh1sye2/1/

This PR aims to make the statement less definitive.

[chrisvfritz]

Hmm, I worry that this change doesn't actually help anyone and simply increases the complexity of the sentence. This warning is really only for people who don't understand context in JavaScript and those people lack the background information to answer the questions this qualifier raises:

• "Does this mean sometimes the property will be defined with what we expect?"
• "In what situations will it be defined?"
• "Does this mean there's a technique I could use to make everything defined on the parent context?"

Our target audience can't answer these questions for themselves and we're not interested in answering them in the docs, so it ends up just being a distraction from the central point: that they shouldn't use arrow functions in these cases, because properties on this won't work.

Does that make sense?

[phanan]

While I understand the point of not fixing something not broken, the technical knowledge of the tip is IMO, strictly saying, incorrect. Let's review what we have here:

Since arrow functions are bound to the parent context, this will not be the Vue instance as you'd expect and this.a or this.myMethod will be undefined.

We're definitively saying this.a and this.myMethod will be undefined when it's not necessarily the case. Technically speaking, this makes the statement wrong.

How about tweaking the expression a bit to maintain both the correctness and simplicity? Something like:

Since arrow functions are bound to the parent context, this will not be the Vue instance as you'd expect and this.a or this.myMethod will refer to the parent's property or method, which is unlikely what you'd want.

Thoughts?

[chrisvfritz]

I agree that your revision is more technically correct. 🙂 I just worry that it raises more questions than answers for anyone the paragraph is relevant to. I like where you're going with the compromise though!

One missing detail I think is important is the note about "undefined", because the property will be undefined 99.9% of the time and I've seen students do a Google or in-page search that includes undefined when they see a TypeError in these cases. Removing it would make these notes less searchable.

So now that you have me thinking, what would you think about the following?

Since arrow functions are bound to the parent context, this will not be the Vue instance and this.a or this.myMethod will not be defined as you'd expect, often resulting in errors such as:

Uncaught TypeError: Cannot read property of undefined
Uncaught TypeError: this.myMethod is not a function

I think that might improve the clarity, accuracy, and searchability.

[phanan]

Sounds good to me. If we could somehow eliminate one instance of "as you'd expect" it would be perfect!

[chrisvfritz]

Good catch! I just updated my comment. 🙂

[phanan]

Reworded as such. I've made the errors inline, as our p.tip doesn't support code blocks.