Object Oriented

Inheritance

JavaScript

 

Inheriting (ES6)

ECMAScript 2015
class Person {
  constructor(name) {
    this.name = name
  }

  greet() {
    console.log("Hi! I'm " + this.name);
  }
}

class Teacher extends Person {
  constructor(name, grade) {
    super(name);
    this.grade = grade;
  }
}

Class syntax is introduced in ES6. It is using extends keyword for inheritance.

Class is nothing but a function in JavaScript (Function Constructor).

super points to the parent class constructor (function) and needs to be called first thing in the constructor, so the parent object (prototype object) gets created.

Any Teacher objects now have access to methods and properties of Person (super) class object.

var teacher1 = new Teacher('Alice', 2);

teacher1.greet();               // Hi! I'm Alice
console.log(teacher1.name);     // Alice
console.log(teacher1.grade);    // 2
 

Inheriting

ECMAScript 5
// Person class -----
function Person(name) {
  this.name = name;
}

Person.prototype.greet = function() {
  console.log("Hi! I'm " + this.name);
}

// Teacher class -----
function Teacher(name, grade) {
  Person.call(this, name);
  this.grade = grade;
}

Teacher.prototype = Object.create(Person.prototype);
Teacher.prototype.constructor = Teacher;

This is the ES5 version of the code in the card above.

Object.create creates an empty object and set the object passed to it as a parent of the newly created object.

We will explain more on prototype in the next cards.

 

Prototype

ECMAScript 5
function Person(name) {
  this.name = name;
}

Person.prototype.greet = function() {
  console.log("Hi! I'm " + this.name);
}


var person1 = new Person('Bob');
console.log(person1.name)   // Bob
person1.greet();            // Hi I'm Bob
console.log(Person.prototype.greet === person1.greet);
// true

Each Function Constructor has a prototype property which points to an object that any new instances of that function constructor will inherit methods and properties from.

This means that, everytime you use new on a function constructor (or Class):

  1. A blank object {} gets created.
  2. A prototype of function constructor is set as a parent of the blank Object.
  3. Function constructor gets called with this points to that blank object.

Here we are defining the greet() method on the prototype of Person, so when we do person1.greet():

  1. JavaScript checks if greet is defined on person1.
  2. person1 does not have greet, so it checks person1 parent.
  3. person1 parent has greet so it calls it.

if the parent does not have the method, it moves to the parent of that parent and so on. This is called walking on the prototype chain.

Almost all objects in JavaScript has Object object at the end of the prototype chain.

 

Overriding Methods

ECMAScript 5
// Person class -----
function Person(name) {
  this.name = name;
}

Person.prototype.greet = function() {
  console.log("Hi! I'm " + this.name);
}

// Teacher class -----
function Teacher(name) {
  Person.call(this, name);
}

Teacher.prototype = Object.create(Person.prototype);
Teacher.prototype.constructor = Teacher;

Teacher.prototype.greet = function() {
  console.log("Hello! I am " + this.name);
}

Teacher.prototype.greet2 = function() {
  Person.prototype.greet.call(this, this.name);
}

Inherited methods from a parent class can be overridden in the children's classes.

Overriding methods is more like extending the definition rather than replacing them.

var teacher1 = new Teacher('Alice');

teacher1.greet();   // Hello! I am Alice
teacher1.greet2();  // Hi! I'm Alice
 

__proto__

ECMAScript 5
var person1 = new Person('Bob');

console.log(Person.prototype === person1.__proto__);
//true

Most JavaScript engines use property __proto__ (2 underlines) on objects to point to the parent object (prototype of the function constructor which that object is created from).

__proto__ is not a standard feature of JavaScript and it should be avoided.