Proxying

So far, you may have interacted with a Vue application and thought to yourself: How does this work the way it does? Before looking into how Vue.js handles this, let's have a look at how it works within JavaScript.

How 'this' works within JavaScript

Within JavaScript, this has varying contexts that range from the global window context to eval, newable, and function contexts. As the default context for this relates to the global scope, this is our window object:

/**
 * Outputting the value of this to the console in the global context returns the Window object
 */
console.log(this);

/**
 * When referencing global Window objects, we don't need to refer to them with this, but if we do, we get the same behavior
 */
alert('Alert one');
this.alert('Alert two');

The context of this changes depending on where we are in scope. This means, that if we had a Student object with particular values, such as firstName, lastName, grades, and so on, the context of this would be related to the object itself...