Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit cd2884b

Browse files
code-warriorcode-warrior
committedSep 21, 2017
Initial commit
0 parents  commit cd2884b

11 files changed

+362
-0
lines changed
 

‎.gitignore

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
*
2+
3+
!demo/*
4+
!examples/*
5+
!images/*
6+
7+
!.gitignore
8+
!presentation.md
9+
10+
.DS_Store
11+
12+
!*/

‎demo/app.js

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
/*jslint browser:true, es6, single, for, devel */
2+
/*global window */
3+
/*eslint no-console: ["error", { allow: ["log"] }] */
4+
5+
window.onload = function () {
6+
'use strict';
7+
8+
let bold = 'font-weight: bold;',
9+
normal = 'font-weight: normal;',
10+
green = 'color: green;';
11+
12+
console.log(
13+
'%cGreen%c indicates inherited objects in the prototype chain.',
14+
(green + bold), (green + normal));
15+
16+
console.log('\n');
17+
18+
// Create an empty object by explicitly setting [[Prototype]] as the
19+
// inherited base prototype object. This is similar to {} or new Object();
20+
let LX = Object.create(Object.prototype);
21+
LX.wireless = 'Bluetooth HandsFreeLink';
22+
LX.camera = 'Multi-Angle Rearview';
23+
LX['cabin-climate'] = 'Dual-Zone Automatic Climate Control';
24+
25+
// Have the “sport” variable inherit from the “LX” object, which inherits
26+
// from the base prototype.
27+
let sport = Object.create(LX);
28+
sport.engine = '189-HP i-VTEC 4-Cylinder';
29+
sport['drivers-seat'] = '10-Way Power';
30+
sport.wheels = '19-inch Alloy';
31+
32+
// Have the “sportSE” variable inherit from the “sport” object, which
33+
// inherits from the “LX” object, which, in turn, inherits from the base
34+
// prototype.
35+
let sportSE = Object.create(sport);
36+
sportSE.seats = 'Leather-Trimmed';
37+
sportSE.stitching = 'Red accent';
38+
sportSE['front-seats'] = 'Heated';
39+
sportSE.badging = 'Special Edition';
40+
41+
42+
if (Object.prototype.isPrototypeOf(LX)) { // LX inherits from the base
43+
if (LX.isPrototypeOf(sport)) { // sport inherits from LX
44+
if (sport.isPrototypeOf(sportSE)) { // sportSE inherits from sport
45+
console.log('Object.prototype → LX → sport → sportSE');
46+
}
47+
}
48+
}
49+
50+
console.log('\n');
51+
52+
console.log('%cThe LX includes…%c', bold, normal);
53+
for (let property in LX) {
54+
if (LX.hasOwnProperty(property)) {
55+
console.log('— %c' + property + '%c: ' + LX[property],
56+
bold, normal);
57+
}
58+
}
59+
60+
console.log('\n');
61+
62+
console.log('%cThe Sport includes…%c', bold, normal);
63+
for (let property in sport) {
64+
if (sport.hasOwnProperty(property)) {
65+
console.log('— %c' + property + '%c: ' + sport[property],
66+
bold, normal);
67+
} else {
68+
console.log('— %c' + property + '%c: ' + sport[property],
69+
green, normal);
70+
}
71+
}
72+
73+
console.log('\n');
74+
75+
console.log('%cThe Sport Special Edition includes…%c', bold, normal);
76+
for (let property in sportSE) {
77+
if (sportSE.hasOwnProperty(property)) {
78+
console.log('— %c' + property + '%c: ' + sportSE[property],
79+
bold, normal);
80+
} else {
81+
console.log('— %c' + property + '%c: ' + sportSE[property],
82+
green, normal);
83+
}
84+
}
85+
};

‎demo/index.html

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Prototypal Inheritance</title>
6+
</head>
7+
<body>
8+
<div id="msg"></div>
9+
<script src="app.js" defer></script>
10+
</body>
11+
</html>

‎images/honda-accord-models--lx copy.png

215 KB
Loading

‎images/honda-accord-models--lx.png

219 KB
Loading

‎images/honda-accord-models--sport copy.png

215 KB
Loading

‎images/honda-accord-models--sport-special-edition copy.png

217 KB
Loading

‎images/honda-accord-models--sport-special-edition.png

236 KB
Loading

‎images/honda-accord-models--sport.png

239 KB
Loading

‎images/honda-accord-models.png

297 KB
Loading

‎presentation.md

Lines changed: 254 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,254 @@
1+
slidenumbers: true
2+
autoscale: true
3+
build-lists: true
4+
theme: work, 7
5+
6+
[.hide-footer]
7+
8+
# JavaScript Prototypal Inheritance — a Brief Intro
9+
10+
Roy Vanegas
11+
12+
#### GothamSass
13+
#### New York, NY
14+
#### 21 September 2017
15+
16+
^
17+
* Logitech Spotlight
18+
* Projector resolution
19+
* 16:9 (78%, or 1.7 repeating) 1080p/i; 720p/i
20+
* 4:3 (33%, or 1.3 repeating)
21+
* Set aspect ratio under the Presentation menu.
22+
23+
---
24+
25+
## Objectives
26+
27+
We’ll learn
28+
29+
* how to create objects that inherit from other objects;
30+
* about the base prototype and how other objects inherit from it;
31+
* and, how and when to use inheritance.
32+
33+
---
34+
35+
## Agenda
36+
37+
We’ll see
38+
39+
* examples of the five `Object.prototype` methods that all objects inherit from,
40+
* an example of prototypal inheritance in the real world.
41+
42+
---
43+
44+
## Definitions
45+
46+
* **Object**: a composite of data types, including other objects.
47+
* **Method**: a function bound to an object.
48+
* **Prototype**: a template, or model, consisting of methods used by other objects.
49+
* **Inheritance**: properties inherited by a “child” instance of another object.
50+
51+
^
52+
Use markers
53+
54+
---
55+
56+
## Prototypal Inheritance
57+
58+
* Also known as prototype chaining.
59+
* `Object.prototype` is the first in the prototype chain.
60+
* `Object.prototype` is the base prototype from which all objects inherit.
61+
* `Object.prototype` provides **five** methods to all descendants:
62+
63+
^
64+
Make an analogy with human lineage.
65+
66+
---
67+
68+
## Prototypal Inheritance
69+
### `hasOwnProperty`
70+
71+
`hasOwnProperty()` returns `true` on non-inherited properties it owns, or `false` for inherited properties.
72+
73+
---
74+
75+
## Prototypal Inheritance
76+
### `hasOwnProperty`
77+
78+
````javascript
79+
let dog = {
80+
cute: true
81+
};
82+
83+
dog.hasOwnProperty('ugly'); // false
84+
dog.hasOwnProperty('cute'); // true
85+
dog.hasOwnProperty('toString'); // false
86+
Object.prototype.hasOwnProperty('toString'); // true
87+
````
88+
89+
^ toString is another of the five base methods.
90+
91+
---
92+
93+
## Prototypal Inheritance
94+
### `propertyIsEnumerable`
95+
96+
`propertyIsEnumerable()` returns `true` on non-inherited properties defined as `enumerable` (the default), which means it will appear in a `for...in` loop. It returns `false` otherwise.
97+
98+
---
99+
100+
## Prototypal Inheritance
101+
### `propertyIsEnumerable`
102+
103+
````javascript
104+
let dog = {
105+
adoptable: true,
106+
vaccinated: true
107+
};
108+
109+
Object.defineProperty(dog, 'name', {
110+
value: 'Spot',
111+
enumerable: false
112+
});
113+
114+
dog.propertyIsEnumerable('adoptable'); // true
115+
dog.propertyIsEnumerable('vaccinated'); // true
116+
dog.propertyIsEnumerable('name'); // false
117+
118+
console.log('Please adopt ' + dog.name + '. He’s…');
119+
120+
for (let property in dog) {
121+
console.log('— ' + property);
122+
}
123+
````
124+
125+
^
126+
* enumerable is true by default, thus the need to use defineProperty
127+
* Questions?
128+
* Why do you think enumerable is true by default?
129+
130+
---
131+
132+
## Prototypal Inheritance
133+
### `valueOf`
134+
135+
`valueOf()` returns the primitive value associated with an object, or the object itself. Only in the most unique and isolated situations would you modify this method.
136+
137+
---
138+
139+
## Prototypal Inheritance
140+
### `valueOf`
141+
142+
````javascript
143+
// Construct the Dog object
144+
function Dog(name, breed) {
145+
this.name = name;
146+
this.breed = breed;
147+
}
148+
149+
// Create a new Dog instance named dog
150+
let dog = new Dog('Spot', 'mutt');
151+
152+
// Retrieve the object itself
153+
dog.valueOf(); // Dog {name: "Spot", breed: "mutt"}
154+
155+
// Using prototypal inheritance, over-ride how valueOf behaves, returning the name of the dog
156+
Dog.prototype.valueOf = function () {
157+
return this.name;
158+
}
159+
160+
dog.valueOf(); // Spot
161+
````
162+
163+
---
164+
165+
## Prototypal Inheritance
166+
### `toString`
167+
168+
`toString()` converts an object to a string whenever the object is used in a string context. The result, however, many not be useful, so over-riding it using prototypal inheritance can be advantageous.
169+
170+
---
171+
172+
## Prototypal Inheritance
173+
### `toString`
174+
175+
````javascript
176+
let dog = {
177+
adoptable: true,
178+
vaccinated: false
179+
};
180+
181+
dog.toString(); // [object Object]
182+
183+
// Over-ride the inherited toString method in the prototype
184+
dog.toString = function () {
185+
let output = 'This dog is ';
186+
187+
output += ((this.adoptable) ? 'adoptable ' : 'not adoptable ');
188+
output += ((this.vaccinated)? 'and vaccinated.' : 'and not vaccinated.');
189+
190+
return output;
191+
}
192+
193+
dog.toString(); // This dog is adoptable and not vaccinated.
194+
dog.hasOwnProperty('toString'); // true, because toString shadows the inherited prototype method for toString
195+
````
196+
197+
---
198+
199+
## Prototypal Inheritance
200+
### `isPrototypeOf`
201+
`isPrototypeOf()` returns `true` if one object is the prototype of another, or `false` if otherwise. (`isPrototypeFor` is a more appropriate name. You’ll see why in a moment.)
202+
203+
---
204+
205+
## Prototypal Inheritance
206+
### `isPrototypeOf`
207+
208+
````javascript
209+
let dog = {
210+
adoptable: true,
211+
vaccinated: false
212+
};
213+
214+
let puppy = Object.create(dog);
215+
216+
// Is Object.prototype a prototype of dog?
217+
Object.prototype.isPrototypeOf(dog); // true
218+
219+
// Is dog a prototype of puppy?
220+
dog.isPrototypeOf(puppy); // true
221+
222+
// The prototype chain, or prototypal inheritance, looks like…
223+
'Object.prototype → dog → puppy'
224+
````
225+
226+
---
227+
228+
## Inheritance in the Real World
229+
230+
---
231+
232+
![fit](images/honda-accord-models.png)
233+
234+
---
235+
236+
![fit](images/honda-accord-models--lx.png)
237+
238+
---
239+
240+
![fit](images/honda-accord-models--sport.png)
241+
242+
---
243+
244+
![fit](images/honda-accord-models--sport-special-edition.png)
245+
246+
---
247+
248+
## [fit] Demo Time
249+
250+
![fit](images/honda-accord-models.png)
251+
252+
---
253+
254+
## [fit] Thanks

0 commit comments

Comments
 (0)
Please sign in to comment.