Skip to content

Commit 70b9b1a

Browse files
elfgoddelfgodd
committed
Section 19: Extends, Super, and Subclasses
1 parent 6594e7a commit 70b9b1a

3 files changed

Lines changed: 137 additions & 0 deletions

File tree

‎19-Prototypes-Classes-And-The-New-Operator/07/app.js‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
// ******************************
2+
// Extends, Super, and Subclasses ******************************
3+
4+
console.log('Extends, Super, and Subclasses')
5+
console.log('\n')
6+
7+
// Example 1
8+
// class Cat {
9+
// constructor(name, age) {
10+
// this.name = name
11+
// this.age = age
12+
// }
13+
14+
// eat() {
15+
// return `${this.name} is eating!`
16+
// }
17+
// meow() {
18+
// return 'MEOWWWW!!'
19+
// }
20+
// }
21+
22+
// const monty = new Cat('monty', 9)
23+
// console.log(monty)
24+
// console.log(monty.meow());
25+
26+
console.log('\n')
27+
// Example 2
28+
// class Dog {
29+
// constructor(name, age) {
30+
// this.name = name
31+
// this.age = age
32+
// }
33+
// eat() {
34+
// return `${this.name} is eating!`
35+
// }
36+
// bark() {
37+
// return 'WOOOF!'
38+
// }
39+
// }
40+
41+
// const wyatt = new Dog('wyatt', 13)
42+
// console.log(wyatt)
43+
// console.log(wyatt.bark());
44+
45+
console.log('\n')
46+
// Example 3
47+
// Parent class
48+
class Pet {
49+
constructor(name, age) {
50+
console.log('IN PET CONSTRUCTOR!')
51+
this.name = name
52+
this.age = age
53+
}
54+
eat() {
55+
return `${this.name} is eating!`
56+
}
57+
}
58+
59+
class Cat extends Pet {
60+
constructor(name, age, livesLeft = 9) {
61+
console.log('IN CAT CONSTRUCTOR!');
62+
// Super is going to reference the class that we are extending from
63+
// Is going to call Pet constructor
64+
super(name, age)
65+
}
66+
meow() {
67+
return 'MEOWWWW!!'
68+
}
69+
}
70+
71+
class Dog extends Pet {
72+
bark() {
73+
return 'WOOOF!'
74+
}
75+
}
76+
77+
const monty = new Cat('monty', 9)
78+
console.log(monty)
79+
console.log(monty.meow())
80+
console.log(monty.eat())
81+
82+
console.log('\n')
83+
const wyatt = new Dog('wyatt', 13)
84+
console.log(wyatt)
85+
console.log(wyatt.bark())
86+
console.log(wyatt.eat())
87+
88+
console.log('\n')

‎19-Prototypes-Classes-And-The-New-Operator/07/index.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<meta http-equiv="Permissions-Policy" content="interest-cohort=()">
8+
9+
<title>JavaScript</title>
10+
</head>
11+
<body>
12+
<script src="app.js"></script>
13+
</body>
14+
</html>

‎19-Prototypes-Classes-And-The-New-Operator/README.md‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -100,3 +100,38 @@ const red = new Color(255, 67, 89, 'tomato')
100100

101101
## 6. A Bit More Practice with Classes
102102

103+
## 7. Extends, Super, and Subclasses
104+
105+
Keyword extend and keyword super, they both have to do with subclassing, essentially inheritance. This is a way of sharing functionality between classes.
106+
107+
```javascript
108+
// Parent class
109+
class Pet {
110+
constructor(name, age) {
111+
console.log('IN PET CONSTRUCTOR!')
112+
this.name = name
113+
this.age = age
114+
}
115+
eat() {
116+
return `${this.name} is eating!`
117+
}
118+
}
119+
120+
class Cat extends Pet {
121+
constructor(name, age, livesLeft = 9) {
122+
console.log('IN CAT CONSTRUCTOR!')
123+
// Super is going to reference the class that we are extending from
124+
// Is going to call Pet constructor
125+
super(name, age)
126+
}
127+
meow() {
128+
return 'MEOWWWW!!'
129+
}
130+
}
131+
132+
class Dog extends Pet {
133+
bark() {
134+
return 'WOOOF!'
135+
}
136+
}
137+
```

0 commit comments

Comments
 (0)