The this keyword in a class
Name:
Date:
Class:
A
Quick Questions
Shade in the A or B circle for each question.
1. Inside a constructor, which line stores the name parameter on the new object?
2. What does this refer to inside a class method?
3. Which method correctly reads the object's own name?
4. A method uses console.log(score) instead of console.log(this.score). What happens?
5. You create a pet with new Pet('Milo') and the constructor runs this.name = name;. What is pet.name?
B
Match the Pairs
Draw a line connecting each item on the left to its match on the right.
| Left column | Right column | |
|---|---|---|
| 1this.name = name; | AThe assignment is backwards. It copies the empty this.name into the parameter instead of storing the parameter on the object. It should be this.name = name; | |
| 2return this.name + ' barks'; | BInside a constructor, stores the name value on the new object as its own name property | |
| 3Inside a class, this means the object being worked on, so each object keeps its own data | CLeaving out this means JavaScript looks for a plain variable called name and throws a ReferenceError. It should be return this.name; | |
| 4A method uses this to read one of its own object's properties | Dthis.score = score; | |
| 5constructor(name) { name = this.name; } | EInside a method, reads the name property of the object the method was called on | |
| 6describe() { return name; } | Fgreet() { console.log(this.name); } |
C
Definitions
this.name
D
Fill in the Blanks
Complete each line of code by filling in the missing parts.
1.
constructor(name) {
____.name = name;
}
2.
speak() {
console.log(`I am ${____.name}`);
}
3.
constructor(pet) {
this.name = ___;
}
4.
___________(name) {
this.name = name;
}
5.
addPoints() {
this.points __ 5;
}
E
Spot the Error
Shade in the letter of the line that contains an error.
Question 1
A
class Pet {
B
constructor(this.name) {
C
this.name = name;
D
}
E
}
Question 2
A
class Cat {
B
constructor(name) {
C
this.name == name;
D
}
E
}
Question 3
A
class Hero {
B
constructor(name, hp) {
C
this.name = name;
D
hp = hp;
E
}
F
}
Question 4
A
showScore() {
B
console.log(score);
C
}
Question 5
A
class Player {
B
constructor(name, pts) {
C
This.name = name;
D
this.pts = pts;
E
}
F
}
Answer Key
The this keyword in a class
Section A: Quick Questions
Q1
A — this.name = name;
Q2
B — The object the method was called on
Q3
B — speak() { console.log(this.name); }
Q4
A — ReferenceError: score is not defined
Q5
A — 'Milo'
Section B: Match the Pairs
Q1
this.name = name; → Inside a constructor, stores the name value on the new object as its own name property
Q2
return this.name + ' barks'; → Inside a method, reads the name property of the object the method was called on
Q3
Inside a class, this means the object being worked on, so each object keeps its own data → this.score = score;
Q4
A method uses this to read one of its own object's properties → greet() { console.log(this.name); }
Q5
constructor(name) { name = this.name; } → The assignment is backwards. It copies the empty this.name into the parameter instead of storing the parameter on the object. It should be this.name = name;
Q6
describe() { return name; } → Leaving out this means JavaScript looks for a plain variable called name and throws a ReferenceError. It should be return this.name;
Section C: Definitions
Q1
this.name — Inside a class, this means the object being worked on, so this.name is that object's own name property. Leaving out this causes a ReferenceError.Section D: Fill in the Blanks
Q1
constructor(name) {
this.name = name;
}Q2
speak() {
console.log(`I am ${this.name}`);
}Q3
constructor(pet) {
this.name = pet;
}Q4
constructor(name) {
this.name = name;
}Q5
addPoints() {
this.points += 5;
}Section E: Spot the Error
Q1
B — A constructor parameter must be a plain name like name. this.name belongs inside the constructor body, where it stores the value on the object. It should be constructor(name).
Q2
C — == compares two values, so nothing is stored. To give the object its own name property you need the assignment operator: this.name = name;
Q3
D — Without this, hp = hp only assigns the parameter to itself, so the object never gets an hp property. It should be this.hp = hp;
Q4
B — Inside a method, score on its own is not a variable, so JavaScript throws a ReferenceError. The object's own property needs this: console.log(this.score);
Q5
C — this must be all lowercase. This is not defined, so it causes a ReferenceError. It should be this.name = name;