forked from Swap76/Learn-JavaScript
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathinheritance.js
More file actions
163 lines (128 loc) · 4.4 KB
/
Copy pathinheritance.js
File metadata and controls
163 lines (128 loc) · 4.4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
/*
// ====================================
// ====================================
// BASE INHERITANCE EXAMPLE
// ====================================
// ====================================
*/
let baseObject = {
a: 1,
b: 2
}
// Create a new object with baseObject as the prototype for extendedObject.
let extendedObject = Object.create(baseObject);
// Define property c to the baseObject.
// This is not explicitly defined on extendedObject
// but is accessible via the [[Prototype]].
baseObject.c = 3;
// It appears that there are no properties on extendedObject
console.log(extendedObject) // {}
// a and b were defined on the baseObject.
// The property looks up the prototype chain
// until the properties of a and b exist or null is encountered for [[Prototype]].
console.log(extendedObject.a); // 1
console.log(extendedObject.b); // 2
// Define d on the extendedObject
// this is not accessible to the baseObject
// as the [[Prototype]] inherits one way
extendedObject.d = 4;
// We now see property d on extendedObject
console.log(extendedObject) // { d: 4 }
// c is accessible because the prototype chain is "alive".
// As properties are added or deleted, they can be accessed
// by objects that share a prototype
console.log(extendedObject.c); // 3
// d is accessible on extendedObject where it was defined
// but is inaccessible to baseObject and returns undefined
console.log(extendedObject.d); // 4
console.log(baseObject.d) // undefined
/*
// ====================================
// ====================================
// CLASS BASED INHERITANCE EXAMPLE
// ====================================
// ====================================
*/
// Animal class is defined with a property of legs and a method of getLegs
// which returns the current value of legs.
class Animal {
constructor () {
this.legs = 4;
}
getLegs () { // Function for getting legs
return (this.legs);
}
}
// Dog inherits the base properties from Animal
// and adds its own property of age (which is not shared with Animal)
// and the methods getAge and getSound
class Dog extends Animal {
constructor (age) {
// We need to call super in order to instantiate the constructor on Animal.
// If super is not called, then legs would be inaccessible to the Dog class
super();
this.age = age;
}
getSound () {
return ("Bow");
}
getAge () {
return (this.age);
}
}
// Create a new Dog object passing in 10 for the age parameter
const tommy = new Dog(10);
// Since the Dog class extends the Animal class
// tommy has access to the getLegs method
console.log(tommy.getLegs()); // Output 4
console.log(tommy.getSound()); // Bow
console.log(tommy.getAge()); // 10
/*
// ====================================
// ====================================
// Function Based Inheritance Example
// ====================================
// ====================================
*/
// This function defines the base "constructor" for us and is
// comparable to the constructor function found in the class example
function Animal() {
this.legs = 4;
}
// Adding the getLegs property to the prototype ensures that
// it will be inherited to any objects that are created from Animal
Animal.prototype.getLegs = function() {
return this.legs;
}
// The Dog function acts as the constructor, but where is the super call
// that we use to call the constructor from Animal?
function Dog(age) {
// the call method is similar in function to calling the super method in the
// super method in the class based example. In this case, it instantiates the
// legs property
Animal.call(this);
this.age = age;
}
// We set the prototype of Dog to the prototype of Animal
// in order to have access to the getLegs method that is
// defined on Animal's prototype
Dog.prototype = Object.create(Animal.prototype);
// Dog is set as the constructor property on the Dog prototype to
// match the object structure of the class example
Dog.prototype.constructor = Dog;
// Define getSound method
Dog.prototype.getSound = function() {
return ("Bow");
}
// Define getAge method
Dog.prototype.getAge = function() {
return (this.age);
}
// create new Dog with age 10
const tommy = new Dog(10);
console.log(tommy); // Dog { legs: 4, age: 10 }
// call getLegs that was inherited from Animal
console.log(tommy.getLegs()); // 4
// call both getSound and getAge that are defined on Dog
console.log(tommy.getSound()); // Bow
console.log(tommy.getAge()); // 10