Skip to content

Commit 0395718

Browse files
ericwgreeneericwgreene
committed
added code demos
1 parent bcaa2af commit 0395718

12 files changed

+352
-18
lines changed

‎public/demos/class_extends.js‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
2+
class Person {
3+
4+
constructor(firstName, lastName) {
5+
this._firstName = firstName;
6+
this.lastName = lastName;
7+
}
8+
9+
get firstName() {
10+
console.log('getting first name');
11+
return this._firstName;
12+
}
13+
14+
set firstName(value) {
15+
console.log('setting first name');
16+
this._firstName = value;
17+
}
18+
19+
getFullName() {
20+
return this.firstName + ' ' + this.lastName;
21+
}
22+
}
23+
24+
class Student extends Person {
25+
26+
static create(studentId, name) {
27+
const nameParts = name.split(' ');
28+
return new Student(studentId, nameParts[0], nameParts[1]);
29+
}
30+
31+
constructor(studentId, firstName, lastName) {
32+
super(firstName, lastName);
33+
this.studentId = studentId;
34+
}
35+
36+
getRecordInfo() {
37+
return this.studentId + ' ' + this.lastName + ', ' + this.firstName;
38+
}
39+
40+
getFullName() {
41+
return super.getFullName().toUpperCase();
42+
}
43+
44+
}
45+
46+
47+
// const student1 = new Student(1, 'Bob', 'Smith');
48+
const student1 = Student.create(1, 'Bob Smith');
49+
student1.firstName = 'Seema';
50+
console.log(student1.getFullName());
51+
console.log(student1.getRecordInfo());
52+
53+
console.dir(student1);
54+

‎public/demos/classes_constructor_function.js‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
2+
class Person {
3+
4+
constructor(firstName, lastName) {
5+
this.firstName = firstName;
6+
this.lastName = lastName;
7+
}
8+
9+
getFullName() {
10+
return this.firstName + ' ' + this.lastName;
11+
}
12+
}
13+
14+
const person1 = new Person('Bob', 'Smith');
15+
16+
Person.prototype.getFullName = function() {
17+
console.log('you have been hacked...');
18+
};
19+
20+
console.log(person1.getFullName());
21+
22+
console.dir(person1);
23+
24+
// function Person2(firstName, lastName) {
25+
// this.firstName = firstName;
26+
// this.lastName = lastName;
27+
// }
28+
29+
// Person2.prototype.getFullName = function() {
30+
// return this.firstName + ' ' + this.lastName;
31+
// };
32+
33+
// const person2 = new Person2('Bob', 'Smith');
34+
// console.log(person2.getFullName());
35+
36+
// console.dir(person2);

‎public/demos/freeze_seal.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
'use strict';
2+
3+
const o = {
4+
msg: 'Hi!',
5+
};
6+
7+
// Object.preventExtensions(o);
8+
// console.log( Object.isExtensible(o) );
9+
10+
// Object.seal(o);
11+
// console.log( Object.isSealed(o) );
12+
13+
Object.freeze(o);
14+
console.log( Object.isFrozen(o) );
15+
16+
17+
// o.data = 2;
18+
19+
// delete o.msg;
20+
21+
o.msg = 'Bye!';
22+
23+
console.dir(o);

‎public/demos/function_context.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
3+
<title>Welcome to Introduction to ES2017!</title>
4+
<link rel="icon" href="data:,">
5+
<link href="css/site.css" rel="stylesheet">
6+
7+
<main>
8+
<h1>Welcome to Introduction to ES2017 for React + GraphQL Developers!</h1>
9+
</main>
10+
11+
<script src="js/bundle.js"></script>
12+
13+
<script>
14+
15+
'use strict';
16+
17+
function outer() {
18+
19+
console.log(this);
20+
21+
22+
const inner = () => {
23+
console.log(this);
24+
};
25+
26+
inner();
27+
}
28+
29+
// outer();
30+
// window.outer();
31+
32+
const o = {
33+
id: 2,
34+
outer: outer,
35+
};
36+
37+
o.outer();
38+
39+
// console.log(outer === o.outer);
40+
41+
</script>
42+
43+

‎public/demos/getter_setters.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
2+
3+
const person = {
4+
_firstName: 'Bob',
5+
};
6+
7+
Object.defineProperty(person, 'firstName', {
8+
configurable: true,
9+
enumerable: true,
10+
get: function() {
11+
return this._firstName;
12+
},
13+
set: function(value) {
14+
this._firstName = value;
15+
}
16+
});
17+
18+
console.log(person.firstName);

‎public/demos/prop_iteration.js‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
2+
const parent = {
3+
legCount: 2,
4+
armCount: 2,
5+
};
6+
7+
const person = Object.create(parent);
8+
person.firstName = 'Bob';
9+
person.lastName = 'Smith';
10+
person.age = 32;
11+
12+
//console.log(person.firstName);
13+
14+
person.firstName = 'Tim';
15+
person.hairColor = 'brown';
16+
delete person.age;
17+
18+
// in operator uses the prototype chain
19+
20+
// not a good way
21+
// console.log('firstName' in person);
22+
23+
Object.defineProperty(person, 'eyeColor', {
24+
configurable: true,
25+
enumerable: false,
26+
writable: true,
27+
value: 'brown',
28+
});
29+
30+
31+
// not a good way
32+
for (let propName in person) {
33+
console.log(propName);
34+
}
35+
36+
console.log(Object.keys(person));
37+
38+
console.log(Object.getOwnPropertyNames(person));

‎public/demos/property_keys_strings.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
2+
// const letters = ['a','b','c','d'];
3+
4+
// console.log(letters['0']);
5+
6+
// letters.doIt = function() {
7+
8+
// };
9+
10+
// letters.thisIsCool = 'fun!';
11+
12+
// console.dir(letters);
13+
14+
// const o = {
15+
// '0': 'a',
16+
// '1': 'b',
17+
// '2': 'c',
18+
// length: 3,
19+
// };
20+
21+
// Object.setPrototypeOf(o, Array.prototype);
22+
23+
// console.log(o);
24+
25+
// const person = {
26+
// 'intuit is amazing and great': 'Bob'
27+
// };
28+
29+
// console.log(person['intuit is amazing and great']);
30+

‎public/demos/proto_inheritance.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
const parent = {
2+
name: 'parent',
3+
amt: 2000,
4+
address: {
5+
street: '123 Oak Lane',
6+
city: 'Mountain View',
7+
state: 'CA',
8+
}
9+
};
10+
11+
const child = Object.create(parent);
12+
child.name = 'child';
13+
14+
parent.amt = 3000;
15+
child.amt = 15;
16+
delete child.amt;
17+
18+
console.log(parent.address.state);
19+
console.log(child.address.state);
20+
21+
child.address = {
22+
state: 'NY',
23+
};
24+
25+
console.log(parent.address.state);
26+
console.log(child.address.state);
27+
28+
console.dir(child);

‎public/demos/proto_inheritance_alt.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
2+
const protoPerson = {
3+
getFullName: function() {
4+
return this.firstName + ' ' + this.lastName;
5+
},
6+
}
7+
8+
const person1 = Object.create(protoPerson);
9+
person1.firstName = 'Sonia';
10+
person1.lastName = 'Sahoo';
11+
12+
const person2 = Object.create(protoPerson);
13+
person2.firstName = 'Nick';
14+
person2.lastName = 'Yang';
15+
16+
17+
console.log(person1.getFullName());
18+
console.log(person2.getFullName());
19+
console.log(protoPerson.getFullName());
20+
console.log(person1.getFullName === person2.getFullName);
21+

‎public/demos/shorthand_props.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
'use strict';
2+
3+
const firstName = 'Bob';
4+
5+
const propName = '_lastName';
6+
7+
const person = {
8+
firstName,
9+
[ propName ]: 'Smith',
10+
getFullName() {
11+
return this.firstName + ' ' + this.lastName;
12+
},
13+
get lastName() {
14+
return this._lastName;
15+
},
16+
set lastName(value) {
17+
this._lastName = value;
18+
},
19+
age: undefined,
20+
};
21+
22+
// console.log(person.age);
23+
24+
console.log(JSON.stringify(person))
25+
26+
console.log(Object.getOwnPropertyNames(person));

0 commit comments

Comments
 (0)