Skip to content

Instantly share code, notes, and snippets.

@Aldizh
Last active May 2, 2020 22:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Aldizh/b188487c4ba9af641918d4aea5729df4 to your computer and use it in GitHub Desktop.
Save Aldizh/b188487c4ba9af641918d4aea5729df4 to your computer and use it in GitHub Desktop.
Prototype Inheritance example javascript
/*
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