Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

6.1 The `this` Object

The this object is often confusing to JavaScript beginners. Depending on the context in which it’s used, this can be bound to different objects. In this lesson, we’ll look at some of the ins and outs.

Syntax

  • this

1.Introduction
2 lessons, 07:42

1.1
Introduction
02:12

1.2
Setup
05:30

2.Language Fundamentals
8 lessons, 1:00:53

2.1
Variables
06:33

2.2
Data Types
11:28

2.3
Arithmetic, Assignment, and Comparison Operators
10:24

2.4
Unary, Logical, Comma, and Spread Operators
09:02

2.5
Operator Precedence
03:50

2.6
Reserved Words
04:17

2.7
Strict Mode
04:34

2.8
Functions
10:45

3.Data Structures
5 lessons, 22:52

3.1
Arrays
04:29

3.2
Objects
04:30

3.3
Sets
04:57

3.4
Maps
04:21

3.5
Weak Maps and Weak Sets
04:35

4.Controlling Program Execution
7 lessons, 37:06

4.1
Conditionals
07:49

4.2
Switch Statements
04:41

4.3
The For Loop
06:39

4.4
The `for .. in` Loop
05:17

4.5
The `for .. of` Loop
04:02

4.6
Iterators
05:03

4.7
While Loops
03:35

5.Using JavaScript
13 lessons, 1:44:36

5.1
Working With Strings
09:32

5.2
Template Literals
05:46

5.3
Working With Numbers
06:57

5.4
Working With Arrays
12:53

5.5
Iterating and Transforming Arrays
07:33

5.6
Working With the Object Type
13:55

5.7
Object Literal Extensions
06:45

5.8
Working With Object Instances
06:45

5.9
Getters and Setters
05:00

5.10
Custom Objects
11:28

5.11
The `Math` API
04:54

5.12
Working With Dates and Times
08:10

5.13
The `Array` Constructor
04:58

6.Functions
8 lessons, 56:07

6.1
The `this` Object
06:15

6.2
Working With Functions
10:11

6.3
Scope
07:37

6.4
Arrow Functions
06:59

6.5
Generator Functions
08:13

6.6
Closures
05:00

6.7
Prototypes
06:26

6.8
Default and Rest Parameters
05:26

7.Miscellaneous
6 lessons, 52:39

7.1
Destructuring Assignments
08:09

7.2
AJAX
08:30

7.3
Regular Expressions
10:51

7.4
More About Regular Expressions
08:38

7.5
Classes
06:48

7.6
ES Modules
09:43

8.Working With the DOM
6 lessons, 37:39

8.1
Selecting HTML Elements
05:02

8.2
Manipulating HTML Elements
07:40

8.3
DOM Traversal
05:25

8.4
Adding and Removing Elements
04:45

8.5
Creating Elements and Other Nodes
04:39

8.6
DOM Events
10:08

9.Web APIs
4 lessons, 17:41

9.1
The Selector API
03:03

9.2
Geolocation
05:29

9.3
Web Storage
05:24

9.4
Web Workers
03:45

10.Asynchronous JavaScript
5 lessons, 26:23

10.1
Promises
09:52

10.2
Promise Chaining
05:11

10.3
The async Keyword
03:21

10.4
The await Keyword
04:04

10.5
More About async and await
03:55

11.Conclusion
1 lesson, 00:43

11.1
Conclusion
00:43


6.1 The `this` Object

Hi folks, in this lesson we're going to take a look at the this Object in JavaScript. The value of this Object is usually, but not always an Object. But it can refer to different Objects depending on where it is used. Inside a function, the value of this varies depending on how the function is called. For example, we are inside an immediately invoked function expression at the moment. So let's just try logging out the value of this to see what it refers to. And we can see that it is actually undefined inside a function. So when we use this inside a function and the function is invoked in the normal way that a function is invoked, with the double parenthesis at the end of it, this will be undefined in strict mode. Now the value will change if we're not in strict mode. And if we're not running in strict mode, inside a function, this will point to the global window object. And that can actually be quite dangerous. This is another reason why we need to always use strict mode, when applicable. If we are inside of a function which is the property of an object, so a method, this will point to that object. So in the second console log you can see that the object itself has been logged to the console, which means that the this Object points to the Object that the method is within. Now, we've called the function in a different way. We have used a set of parenthesis after the function to invoke it like we would do a regular function, but because the function is called as the method of an object, the value of this changes. And in this case it changes to the object that the method belongs to. Whenever we are outside of the function, the this object will still point to the window object, regardless of whether or not we're running in strict mode. So now we're outside of the immediately invoked function expression and as use strict is within the immediately invoked function expression, strict mode will only be applied inside the IFFE. We've now added a log outside of it. So let's just go back to the browser again. And you can see that we're logging the window once again. So use strict won't protect us in this case. As we saw in a previous lesson, there's also another time that the this object can point to something different. And that is when we are inside a constructor function. Now, we did already go over this but because that was in a different section of the course, I just want to recap over that once again. So it's a very similar example to the last time we looked at this topic. So we're using a constructor once again and the constructor accepts a name, arguments and inside of the constructor we just set a property of this to equal the name that gets passed into the constructor. So even though the constructor function is defined as a regular function, when we call it, as long as we're calling it properly, we will be calling it in a different way. We will be calling it like this. So the difference in how we are invoking the function this time is we are using the new keyword. And that's how JavaScript knows to invoke the function as a constructor. And when it invokes a function as a constructor, the this object inside the function will point to instances created by the constructor. It won't point to the constructor itself, like you might expect. So in this case where we have created a variable called Bob, when we invoke the person constructor, the Bob variable will end up containing and instance created by the passing constructor. And so in this case, this will point to the instance object. There is another time that the this object can change what it points to as well, and that's when we're inside the function which is being used as an event handler. In this case, the function will be invoked when an element triggers it from the UI, like when a button is clicked. In this case, the this object will be set to the element that triggered the event. So if it was a button that was clicked, which triggered the event, the this object will point to that button. We're gonna come back and look at event handlers in much more detail in the dom events lesson later in the course. For now, just understand that this is one more time when the this object might change what it points to, and that's when the function it is within is being used as an event handler. There are some different ways in which we can control what the this object points to, such as when we're using methods like call or apply. We did see the call method very briefly in an earlier lesson. But we're gonna come back and look at both of these methods in much more detail in the next lesson. So in this lesson, we looked at the different values that the this object can have in JavaScript depending on the context. We saw that in the global context, this points to the window object. And while we're inside a function, this is undefined. If we are inside the method of an object, this will point to the object itself. And when we use this inside a constructor, this will point to instance object. It's created by the constructor. In the next lesson then, we're going to move on and look at some methods and properties of function objects, including the call and apply methods. Thanks for watching.

Back to the top