Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 9f7547d

Browse files
remarcmijremarcmij
committed
OOP fundamentals updates
1 parent 20e95c1 commit 9f7547d

File tree

2 files changed

+68
-4
lines changed

2 files changed

+68
-4
lines changed

‎fundamentals/assets/prototype.png

22 KB
Loading

‎fundamentals/oop_classes.md

Lines changed: 68 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Object-Oriented Programming & Classes
22

3-
### Object literals and Imperative Programming
3+
### Object Literals and Imperative Programming
44

55
In earlier JavaScript lectures we saw that we can define object literals and use functions to access and manipulate their properties. A typical example is shown below, where we have defined an array of objects, in this case each representing the name of a month and its associated number of days.
66

@@ -63,6 +63,70 @@ months
6363
.forEach(string => console.log(string));
6464
```
6565

66+
### Constructor Functions (pre-ES6)
67+
68+
```js
69+
function Month(name, days) {
70+
this.name = name;
71+
this.days = days;
72+
}
73+
74+
const months = [
75+
new Month('January', 31),
76+
new Month('February', 28),
77+
new Month('March', 31),
78+
new Month('April', 30),
79+
new Month('May', 31),
80+
new Month('June', 30),
81+
new Month('July', 31),
82+
new Month('August', 31),
83+
new Month('September', 30),
84+
new Month('October', 31),
85+
new Month('November', 30),
86+
new Month('December', 31)
87+
];
88+
89+
months
90+
.filter(month => month.days === 31)
91+
.map(month => `${month.name} has ${month.days} days.`)
92+
.forEach(string => console.log(string));
93+
```
94+
95+
### JavaScript Functions and `this`
96+
97+
[Understanding JavaScript Function Invocation and "this"](http://yehudakatz.com/2011/08/11/understanding-javascript-function-invocation-and-this/), by Yehuda Katz.
98+
99+
### ES6 Classes vs pre-ES6 Constructor Functions
100+
101+
```js
102+
class Month {
103+
constructor(name, days) {
104+
this.name = name;
105+
this.days = days;
106+
}
107+
}
108+
109+
const months = [
110+
new Month('January', 31),
111+
new Month('February', 28),
112+
new Month('March', 31),
113+
new Month('April', 30),
114+
new Month('May', 31),
115+
new Month('June', 30),
116+
new Month('July', 31),
117+
new Month('August', 31),
118+
new Month('September', 30),
119+
new Month('October', 31),
120+
new Month('November', 30),
121+
new Month('December', 31)
122+
];
123+
124+
months
125+
.filter(month => month.days === 31)
126+
.map(month => `${month.name} has ${month.days} days.`)
127+
.forEach(string => console.log(string));
128+
```
129+
66130
### ES6 Classes and Object-Oriented Programming
67131

68132
The remaining style of programming we will discuss here is called Object-Oriented Programming.
@@ -113,11 +177,11 @@ months
113177
.forEach(month => month.toConsole());
114178
```
115179

116-
### The prototype chain
180+
### The Prototype Chain
117181

118182
![prototype](assets/prototype.png)
119183

120-
### Pre-ES6 constructor functions and prototypes
184+
### Pre-ES6 Constructor Functions and Prototypes
121185

122186
```js
123187
function Month(name, days) {
@@ -161,7 +225,7 @@ months
161225
.forEach(month => month.toConsole());
162226
```
163227

164-
### Bonus: Array.prototype.map & Array.prototype.filter implementations
228+
### Bonus: Array.prototype.map & Array.prototype.filter Implementations
165229

166230
```js
167231
Array.prototype.myMap = function (mapFn) {

0 commit comments

Comments
 (0)