Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ES6 Classes ability to perform polymorphism

I am trying to emulate polymorphism through ES6 Classes, in order to be able to better understand this theory.

Concept is clear (designing objects to share behaviors and to be able to override shared behaviors with specific ones) but I am afraid my code above is not a valid polymorphism example.

Due to my lack of experience, I appreciate if you answer these questions in a comprehensive way:

  • The fact that both Classes have an equally named method, and that instances made from each Class get access correctly to their respective methods, makes this a polymorphic example?
  • In case this does not emulate polimorphism, what changes should be done in the code for it?
  • I've tried removing the Employee.prototype = new Person(); line, and it still works. This is why I am afraid I'm not getting this concept.

class Person {
  constructor (name, age) {
    this._name = name;
    this._age = age;
  }
}

Person.prototype.showInfo = function(){
  return "Im " + this._name + ", aged " + this._age;
};


class Employee {
  constructor (name, age, sex) {
    this._name = name;
    this._age = age;
    this._sex = sex;
  }
}

Employee.prototype = new Person();

Employee.prototype.showInfo = function(){
  return "Im " + this._sex + ", named " + this._name + ", aged " + this._age;
};


var myPerson = new Person('Jon', 20);
var myEmployee = new Employee('Doe', 10, 'men');

document.write(myPerson.showInfo() + "<br><br>");   // Im Jon, aged 20
document.write(myEmployee.showInfo() + "<br><br>"); // Im men, named Doe, aged 10
like image 823
Biomehanika Avatar asked Jun 06 '17 13:06

Biomehanika


1 Answers

Every JavaScript object has an internal "prototype" property, often called [[prototype]], which points to the object from which it directly inherits.

Every JavaScript function [object] has a property prototype, which is initialized with an [nearly] empty object. When you create a new instance of this function by calling it as a constructor, the [[prototype]] of that new object will point to the constructor's prototype object.

So, when you write this var myPerson = new Person('Jon', 20);,you have the method showInfo because you have this

Person.prototype.showInfo = function(){
    return "Im " + this._name + ", aged " + this._age;
};

With ES6 if you want to see the polymorphism you could do that :

class Person {
    constructor (name, age) {
        this._name = name;
        this._age = age;
    }
        
    showInfo () {
        return "Im " + this._name + ", aged " + this._age;
    }
}

class Employee extends Person {
    constructor (name, age, sex) {
        super(name,age);
        this._sex = sex;
    }
        
    showInfo(){
        return "Im " + this._sex + ", named " + this._name + ", aged " + this._age;
    }
}

var myPerson = new Person('Jon', 20);
var myEmployee = new Employee('Doe', 10, 'men');

document.write(myPerson.showInfo() + "<br><br>");   // Im Jon, aged 20
document.write(myEmployee.showInfo() + "<br><br>"); // Im men, named Doe, aged 10
like image 63
geo Avatar answered Sep 27 '22 16:09

geo