So far, this
has only been described as meaning the thing to the left of the .this
which it was called on. To make this a little less mystifying, I'm going to explain it in terms you may understand with examples. If you haven't already, check out the last article I wrote on new
as we will be building on the knowledge dropped there.
this
refers to the instance of an object that a function has been bound. What does that even mean?
// Introduction To this
Example HTML:
<button class="one">Button 1</button> <button class="two">Button 2 </button>
If you haven't already checked out my article on selecting, I recommend it. We are going to use Javascript to select the individual buttons like this:
//Select the Buttonsconst button1 = document.querySelector('.one');
const button2 = document.querySelector('.two');
//Create a function function tellMeAboutTheButton(){ console.log(this); }; //Create an event listener button1.addEventListener('click', tellMeAboutTheButton); button2.addEventListener('click', tellMeAboutTheButton);
Run that and click on a button. We will see information in the console about the button that was clicked. Now we can call that information in the console log an instance of the object to the left of the addEventListener
. In the example, this
is an instance of button1
on a click to Button 1.
In the example above, if there is no higher level function wrapped around the this
(in this case it's anonymous, then the this
will be an instance of the next higher scope - in this case the window.
// this
+ new
Remember our Pizza example from the last article? Let's modify that a little then break down what is happening.
function Pizza(toppings = [], customer){ console.log('Making a pizza'); //save the toppings that were passed in this.topings = toppings; this.customer = customer; this.id = Math.floor(Math.random()*12345678).toString(16); } const pepperoniPizza = new Pizza(['pepperoni'], 'Drew'); const cheesePizza = new Pizza (['extra cheese'], 'audrey');
When you run this and open the console you will be able to run pepperoniPizza
and cheesePizza
and be able to expand it to see all the information passed to it.
In this case you see that the toppings, customer, and "id" are new
objects who's arrays are passed into the type of pizza's object. The this
is attached (bound) by the Pizza()
function where the type of pizza is an instance of that Pizza()
function.
Final thoughts & My Ask
this
keyword, when creating an object is used to store information about that instance. The pepperoniPizza is a unique object that is an instance of Pizza()
.
If you found this article helpful, share/retweet it and follow me on twitter @codingwithdrewk!
There is a lot more to learn in Javascript, the this
keyword is a tricky one but I hope that this article helps to clear it up!
Drew is a seasoned DevOps Engineer with a rich background that spans multiple industries and technologies. With foundational training as a Nuclear Engineer in the US Navy, Drew brings a meticulous approach to operational efficiency and reliability. His expertise lies in cloud migration strategies, CI/CD automation, and Kubernetes orchestration. Known for a keen focus on facts and correctness, Drew is proficient in a range of programming languages including Bash and JavaScript. His diverse experiences, from serving in the military to working in the corporate world, have equipped him with a comprehensive worldview and a knack for creative problem-solving. Drew advocates for streamlined, fact-based approaches in both code and business, making him a reliable authority in the tech industry.