My final assessment has been a smashing success. This is very exciting! This is in the context of me finishing my boot camp journey. This is very exciting! could be referencing a trip to Antarctica, getting a new car or seeing old friends for dinner. The exact same phrase could be referencing thousands of possible contexts. 'This' in JavaScript is behaving in a similar way, as the context of my phrase has a relationship with what is going on around it. 'This' could be referencing many different objects in your code. ...this is where it can get tricky. The context of 'this' is defined by the scope of how and where it is referenced in the code. The object in the currently executing code, owns 'this'. My goal is to define 'this' as concise as possible without being verbose as other tutorials and posts can get confusing with all the examples. As these examples are important and guide us, basic understanding brings light, to more complex models.
The global executing context 'this' references the global object (outside of a function or object). Also referred to as the window. Functions, function expressions, variables declared at the global scope and with 'var' inside a function become part of the window object, automatically, implicitly. Any variable declared without let, const or var will also be available globally. As a warning setting variables with 'var' is not recommended as it can lead to Name Collision. When different parts of your code, that are interconnected and are using variables of the same name( the names of these variable collide ). Leading to weird and unpredictable behavior.
The window object can be referenced with 'this' or 'window' outside of a object or function. Within an object or method the window can be accessed with 'window'. In a function or function expression that doesn't have an object to the left of it, references 'this' as the window. Inside of our friend the arrow functions 'this' always references the window object. These edge cases keep showing up which make it difficult to grasp the logic. So be careful.
Local context references 'this' as the object or function that it is called in. 'This' declared inside a function or class constructor by using this dot notation( this.variable = "YO" ), sets the variable to the local 'this', explicitly pointing to the object. 'This' can reference an object key with this dot notation( this.key ), will equal the value of the key referenced in that object. Objects implicitly set key value pairs to 'this', allowing methods access to the properties of the object.
The context of 'this' can be passed down into an inner function, by setting 'this' to a new variable( let _this = this ). Now '_this' can be accessed by the inner function as a reference to the 'this' of the outer function. The reverse can't be said, the 'this' of an inner function cannot be accessed by an outer function or the window object.
This is just the beginning, learning JavaScript can be confusing. Context is everything, it points to whatever piece of information you are working with. Learn context, learn JavaScript.
Top comments (0)