Last active
May 2, 2020 22:16
-
-
Save Aldizh/b188487c4ba9af641918d4aea5729df4 to your computer and use it in GitHub Desktop.
Prototype Inheritance example javascript
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
Let us start with tehse two definitions: | |
Class Variables — Declared inside the class definition (but outside any of the instance methods). They are not tied to any particular object of the class, hence shared across all the objects of the class. Modifying a class variable affects all objects instance at the same time. | |
Instance Variable — Declared inside the constructor method of class (the __init__ method). They are tied to the particular object instance of the class, hence the contents of an instance variable are completely independent from one object instance to the other. | |
Every function created in javascript inherits from Object | |
which internally consists of a constructor function and __proto__ | |
__proto__ allows for sharing across instances | |
*/ | |
// Defining a Person Object/Function | |
function Person(first, last, age, gender, interests) { | |
this.name = { | |
first, | |
last | |
}; | |
this.age = age; | |
this.gender = gender; | |
this.interests = interests; | |
// class variable (not available as a class property) | |
var x = 0; | |
}; | |
// Greeting here is shared across instances | |
Person.prototype.greeting = function() { | |
console.log('Hi! I\'m ' + this.name.first + '.'); | |
}; | |
// Teacher here inherits from Person with a small modification | |
function Teacher(first, last, age, gender, interests, subject) { | |
Person.call(this, first, last, age, gender, interests); | |
this.subject = subject; | |
} | |
// Ensure prototype is carried over the child | |
Teacher.prototype = Object.create(Person.prototype); | |
// Ensure that contructor is not anonymous | |
Teacher.prototype.constructor = Teacher; | |
// Observe the difference in greetings | |
var person = new Person('John', 'Doe', 30, 'male', ['soccer', 'ufc']); | |
var teacher = new Teacher('Dave', 'Griffiths', 31, 'male', ['football', 'cookery'], 'mathematics'); | |
person.greeting(); | |
teacher.greeting(); | |
console.log('Is my greeting prototype the same? ', person.__proto__.greeting === teacher.__proto__.greeting) | |
// Now lets tweak the greeting prototype for Teacher Function/Class and check again | |
Teacher.prototype.greeting = function() { | |
var prefix; | |
if (this.gender === 'male' || this.gender === 'Male' || this.gender === 'm' || this.gender === 'M') { | |
prefix = 'Mr.'; | |
} else if (this.gender === 'female' || this.gender === 'Female' || this.gender === 'f' || this.gender === 'F') { | |
prefix = 'Mrs.'; | |
} else { | |
prefix = 'Mx.'; | |
} | |
console.log('Hello. My name is ' + prefix + ' ' + this.name.last + ', and I teach ' + this.subject + '.'); | |
}; | |
person.greeting(); | |
teacher.greeting(); | |
console.log('Is my greeting prototype the same? ', person.__proto__.greeting === teacher.__proto__.greeting) | |
console.log(person.name); // should work | |
console.log(person.x); // should return undefined since it is a class variable |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment