Skip to content

Commit 99087f7

Browse files
elfgoddelfgodd
committed
Section 19: Constructor Functions
1 parent 11c32dc commit 99087f7

5 files changed

Lines changed: 168 additions & 1 deletion

File tree

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

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,40 @@ console.log('Factory Functions')
55
console.log('\n')
66

77
// Example 1
8+
function hex(r, g, b) {
9+
return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)
10+
}
11+
12+
function rgb(r, g, b) {
13+
return `rgb(${r}, ${g}, ${b})`
14+
}
15+
16+
// console.log(hex(255, 100, 25))
17+
// ;('#ff6419')
18+
// rgb(255, 100, 25)
19+
20+
console.log('\n')
21+
// Example 2
22+
function makeColor(r, g, b) {
23+
const color = {}
24+
color.r = r
25+
color.g = g
26+
color.b = b
27+
color.rgb = function () {
28+
const { r, g, b } = this
29+
return `rgb(${r}, ${g}, ${b})`
30+
}
31+
color.hex = function () {
32+
const { r, g, b } = this
33+
return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)
34+
}
35+
return color
36+
}
37+
38+
makeColor(355, 255, 255)
39+
40+
const firstColor = makeColor(35, 255, 150)
41+
firstColor.hex()
42+
firstColor.rgb()
43+
44+
// firstColor.r = 255

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
<meta charset="UTF-8" />
55
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<meta http-equiv="Permissions-Policy" content="interest-cohort=()">
8+
79
<title>JavaScript</title>
810
</head>
911
<body>

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

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
// ******************************
2+
// Constructor Functions ******************************
3+
4+
console.log('Constructor Functions')
5+
console.log('\n')
6+
7+
// Example 1
8+
// function makeColor(r,g,b) {
9+
// const color = {}
10+
// color.r = r
11+
// color.g = g
12+
// color.b = b
13+
// color.rgb = function() {
14+
// const {r, g, b} = this
15+
// return `rgb(${r}, ${g}, ${b})`
16+
// }
17+
// color.hex = function () {
18+
// const {r, g, b} = this
19+
// return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)
20+
// }
21+
// return color
22+
// }
23+
24+
// makeColor(355,255,255)
25+
26+
// const firstColor = makeColor(35,255,150)
27+
// firstColor.hex()
28+
// firstColor.rgb()
29+
30+
// // firstColor.r = 255
31+
32+
// const black = makeColor(0, 0, 0)
33+
// black.rgb()
34+
// black.hex()
35+
36+
// console.log(black.hex === firstColor.hex) // false
37+
// console.log('hello'.slice === 'bye'.slice) // true
38+
39+
// Example 2
40+
// Creates a blank, plain JavaScript object
41+
// Links (sets the constructor of) this object to another object
42+
// Passes the newly created object from Step 1 as the this context
43+
// Returns this if the function doesn't return its own object
44+
function Color(r, g, b) {
45+
this.r = r
46+
this.g = g
47+
this.b = b
48+
console.log(this)
49+
}
50+
51+
Color.prototype.rgb = function () {
52+
const { r, g, b } = this
53+
return `rgb(${r}, ${g}, ${b})`
54+
}
55+
56+
Color.prototype.hex = function () {
57+
const { r, g, b } = this
58+
return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)
59+
}
60+
61+
Color.protoype.rgba = function (a = 1.0) {
62+
const { r, g, b } = this
63+
return `rgba(${r}, ${g}, ${b}, ${a})`
64+
}
65+
66+
const color1 = new Color(40, 255, 60)
67+
// console.log(color1);
68+
69+
const color2 = new Color(0, 0, 0)
70+
// console.log(color2);
71+
72+
console.log(color1.rgb === color2.rgb)
73+
console.log(color1.hex === color2.hex)
74+
75+
// Run this in the browser console
76+
document.body.style.backgroundColor = color1.rgb()
77+
78+
document.body.style.backgroundColor = color1.rgba(0.4)

‎19-Prototypes-Classes-And-The-New-Operator/04/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: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,4 +22,40 @@ Basic object oriented concepts in JavaScript. Things like factory functions, con
2222

2323
But it all has to do with this one central idea, which is organizing our code, designing and structuring our applications by breaking things up into distinct patterns of objects.
2424

25-
## 3. Factory Functions
25+
## 3. Factory Functions
26+
27+
```javascript
28+
function makeColor(r,g,b) {
29+
const color = {}
30+
color.r = r
31+
color.g = g
32+
color.b = b
33+
color.rgb = function() {
34+
const {r, g, b} = this
35+
return `rgb(${r}, ${g}, ${b})`
36+
}
37+
color.hex = function () {
38+
const {r, g, b} = this
39+
return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)
40+
}
41+
return color
42+
}
43+
```
44+
45+
## 4. Constructor Functions
46+
47+
- Creates a blank, plain JavaScript object
48+
- Links (sets the constructor of) this object to another object
49+
- Passes the newly created object from Step 1 as the this context
50+
- Returns this if the function doesn't return its own object
51+
52+
```javascript
53+
function Color(r, g, b) {
54+
this.r = r
55+
this.g = g
56+
this.b = b
57+
console.log(this);
58+
}
59+
60+
const color1 = new Color(255,0,0)
61+
```

0 commit comments

Comments
 (0)