We'll introduce the this
keyword and use it in various ways.
- Explain how
this
refers to the "owner" of a function - Use
this
to refer to an object that called a function - Use
this
to refactor event handlers - Explain how
this
refers to different objects based on scope
It's often important in programming to know what the "owner" of a function is so that we can operate on some specific object or data safely.
For instance, consider an event handler that fires when someone clicks on a link in the DOM. When that event handling function is invoked, we might want to know which specific link was clicked so that we can manipulate it in some way.
That's where the this
keyword comes into play. Every function is automatically assigned a this
value when called, and that represents "who" called the function. This value can be an object, an event, or even another function.
The value of this
is determined by the execution context, or scope, of the function call.
Code running outside of a function is in the Global Scope. Every JavaScript runtime has a default global object that will be the value of this
when a function is called in global scope. In the browser, if we're referencing this
in the global scope, we're referencing the window
object.
Try adding the following code to script.js
and then run index.html
in your browser with the JavaScript console open:
console.log(this === window);
// returns true
Here, we called this
in the global scope, so the value of this
was set to the default global object, window
, when the function was invoked.
Inside of a function, the value of this
will be set based on how the function is called.
Add the following to script.js
and refresh the page with the console open:
function checkThis(){
console.log(this);
}
checkThis();
// outputs window object
This will also output the window
object because this simple function call doesn't set the this
value. Because we aren't in strict mode, the value of this
must be an object, so the default global object window
is used.
Advanced: Strict mode is a setting that enables better error-checking in your code by prohibiting the use of implicitly declared variables, duplicate parameter names, and other potentially bug-causing behavior. Strict mode also converts some silent execution errors into not-so-silent ones. For more information, check out the MDN documentation.
Let's put our function in strict mode:
function checkThis(){
'use strict';
console.log(this);
}
checkThis();
// outputs "undefined"
In strict mode, this
remains at whatever it's set to when entering the execution context. If it's not defined, it remains undefined rather than being assigned the default window
object.
When we use the constructor function pattern to create objects, we make use of this
to assign property values to the instance of the object being constructed.
function Chair(style, color) {
console.log(this);
this.style = style;
this.color = color;
}
var sofa = new Chair("sofa", "green");
Here, because we're calling Chair()
with the new
keyword, this
refers to the new Chair
object. So when you see this.style = style;
you can think of it as saying "set the style property of THIS current instance of a Chair."
In your console, this
will be an empty Chair object because we haven't assigned the property values yet when we output this
, but try moving that console.log(this)
to the end of the function and see what you get!
Objects can have functions as well as properties. When a function is an attribute of an object, this
is set to the object instance that contains the function, similar to how it works with a constructor function.
var couch = {
color: 'green',
f: function() {
return this;
}
};
console.log(couch.f());
// outputs object
Top-tip: Notice that this only outputs an Object
and not something called couch
? That's because this
is just an instance of the base Object
type here, and couch
is just the name of the variable holding that object instance. The object itself is the owner of the function and has no idea what you named it.
We can also make use of this
when handling events on the DOM. If our index.html
has three image elements with the same CSS class, we might need to know which specific img
was clicked.
<img class="pix" src="http://i.giphy.com/S1phUc5mmaZqM.gif">
<img class="pix" src="http://i.giphy.com/eGe59ekUJEll6.gif">
<img class="pix" src="http://i.giphy.com/l41lNT5u8hCI92nQc.gif">
<script type="text/javascript" charset="utf-8">
var els = document.getElementsByClassName("pix");
function handleClick(e) {
console.log(this);
}
for(var i=0 ; i < els.length ; i++){
els[i].addEventListener("click", handleClick, false);
}
</script>
Here, when we click a given image, we see that this
refers to that specific DOM element, so, if we wanted to do something like hide it or apply some other class to it, we could safely do so on just that one element.
We learned that we can use the this
keyword to understand who the "owner" of a function is, and how the execution context of the function call affects the value of this
. We also saw how to use this
in objects and when manipulating the DOM to ensure that we are operating on only the specific objects that we intend to.
View JavaScript This on Learn.co and start learning to code for free.