Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Vue.js Basics What a Beautiful Vue! Basic Event Handling

can you use the es6 arrow syntax and use the bind() method to force the context of "this"?

can you use the es6 arrow syntax and use the bind() method to force the context of "this"?

kat bal
kat bal
590 Points

Question: on the tutorial, the tutor put (this.title) but when i put (book.title) it works as well. Any explanation on that?

// new instance book: //

const book = new Vue ({ el: '#book', data: { title: "The Sirens of Titan", message: "Kurt Vonnegut", name: "This is a summary of the Sirens of Titan!!" }, methods: { sayHello: function(){ alert(book.title); } } });

Steven Parker
Steven Parker
229,732 Points

That's not good practice, and it works only because the object name happens to be "book".

But "this" will work no matter what name is given to the object.

2 Answers

Steven Parker
Steven Parker
229,732 Points

If you want to use "bind", "apply" or "call", then you need a conventional function. Arrow functions don't define "this", so you don't have an opportunity to supply a new one.

For more details, see the MDN page on Arrow Functions.

Chris Shaw
Chris Shaw
26,676 Points

Arrow functions don't define "this", so you don't have an opportunity to supply a new one.

Just to clarify, arrow functions bind context using a concept known as lexical this. Technically, arrow functions do define this from the parent context but it is done implicitly compared to bind, apply and call which are explicit.

Steven Parker
Steven Parker
229,732 Points

The MDN explanation is that the enclosing scope is used because the arrow function does not have it's own "this". But otherwise, we're saying the same thing. The important factor is that their behavior is significantly different from conventional functions in this regard.

kat bal
kat bal
590 Points

" Steven Parker

That's not good practice, and it works only because the object name happens to be "book".

But "this" will work no matter what name is given to the object."

@Steven: Thanks for the explanation!